Highcharts is not defined in Liferay 7 portlet

RE: Highcharts is not defined in Liferay 7 portlet

2019-05-16T03:52:32Z

Hai,
I know you said it solved with different plugin. but if you wanna try, I got the same issue using Highcharts v7.1.1
I try using v5.0.14 and its working fine.

RE: Highcharts is not defined in Liferay 7 portlet

2019-01-30T14:51:21Z

Thanks David for taking your time on responding.
Unfortunatelly, I could not make it work... but honestly I think it is a matter of the Highcharts files themselves, since I have succesfully imported JS in the same portlet.
In the end, I found this solution based on CSS animations that solved my problem.
Thanks again.

RE: Highcharts is not defined in Liferay 7 portlet

2019-01-24T17:28:50Z

Javier Solana:

Don't know why you say that...

The link uses the following syntax:

"com.liferay.portlet.header-portal-javascript=/o/dynamic-data-mapping-web/js/custom_fields.js"

The /o/dynamic-data-mapping-web is going through /o for OSGi module access, /dynamic-data-mapping-web for the web context that is serving the javascript, finally the /js/custom_fields.js then is the javascript being served. By using the full path this way, the browser is able to access the javascript the module is attempting to serve.

Your code excludes the preliminary stuff and goes straight to the /js/highcharts.js; when the browser submits this request, it is getting the 404 on the scripts because they can't load.

RE: Highcharts is not defined in Liferay 7 portlet

2019-01-24T16:04:02Z

David H Nebinger:

Clearly I don't think you actually looked at the reference link.

The javascript paths are relative to the portlet. These /js/highcharts.js paths are likely not resolving to anything.

So highcharts is not loading and you get the Highcharts is not defined message because it is not there.

Don't know why you say that...

I looked at the link you shared indeed. This is reason why I tried to create local files inside the portlet and include them as the link did.

This actually works, because I've tried to declare some variables at the end of these created files and they are loaded correctly and I can access them.

So maybe I am not loading the correct JS files...

RE: Highcharts is not defined in Liferay 7 portlet

2019-01-24T15:53:51Z

Clearly I don't think you actually looked at the reference link.

The javascript paths are relative to the portlet. These /js/highcharts.js paths are likely not resolving to anything.

So highcharts is not loading and you get the Highcharts is not defined message because it is not there.

RE: Highcharts is not defined in Liferay 7 portlet

2019-01-24T15:48:19Z

David H Nebinger:

Javier Solana:

As I said, it seems that the initial

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

in init.jsp is not working...

That is not how you load javascript in the portal. init.jsp is used to declare JSP globals, not HTML fragment script includes.

See https://github.com/liferay/liferay-portal/blob/7.0.x/modules/apps/forms-and-workflow/dynamic-data-lists/dynamic-data-lists-web/src/main/java/com/liferay/dynamic/data/lists/web/internal/portlet/DDLDisplayPortlet.java#L71 for a reference.

Thanks for the quick response David, but I am facing the same error. I have changed the way that js is included following your link:

"com.liferay.portlet.header-portlet-javascript=/js/highcharts.js",
"com.liferay.portlet.header-portlet-javascript=/js/exporting.js",
"com.liferay.portlet.header-portlet-javascript=/js/export-data.js",

What I've done is to copy/paste the JS content taken from the web into files created in my local file system. Is this right?

Still the same problem Uncaught ReferenceError: Highcharts is not defined

RE: Highcharts is not defined in Liferay 7 portlet

2019-01-24T14:40:19Z

Javier Solana:

As I said, it seems that the initial

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

in init.jsp is not working...

That is not how you load javascript in the portal. init.jsp is used to declare JSP globals, not HTML fragment script includes.

See https://github.com/liferay/liferay-portal/blob/7.0.x/modules/apps/forms-and-workflow/dynamic-data-lists/dynamic-data-lists-web/src/main/java/com/liferay/dynamic/data/lists/web/internal/portlet/DDLDisplayPortlet.java#L71 for a reference.

Highcharts is not defined in Liferay 7 portlet

2019-01-24T13:11:22Z

Hi all,

I've been struggling for days with this issue... I am trying to use Higcharts in a portlet (thing that I did in the past already...), but it seems that I cannot manage to succesfully load the needed javascript.

I am using liferay-ce-portal-7.0-ga3.

I am importing the js at init.jsp:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

<liferay-theme:defineObjects />

<portlet:defineObjects />

var valMale = [5, 5, 6, 5, 4];
var valFemale = [5, 3, 5, 6, 5];

</script>

Then, defining the corresponding div at view.jsp:

<%@ include file="/init.jsp" %>

And finally, I have put the corresponding JS where I cannot access the Highchart variable that is suposed to be loaded:

js/progressFeedback.js

$(document).ready(function () {

Highcharts.chart('container', {
   credits: {
   enabled: false
   },
   chart: {
type: 'bar'
},
title: {
text: 'Example of title'
},
subtitle: {
text: ''
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1,
style: { "color": "#666666", "cursor": "default", "fontSize": "9px" }
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1,
style: { "color": "#666666", "cursor": "default", "fontSize": "9px" }
}
}],
yAxis: {
title: {
text: 'Age'
},
labels: {
formatter: function () {
return Math.abs(this.value);
}
}
},

plotOptions: {
series: {
stacking: 'normal'
}
},

tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},

series: [{
name: 'Male',
data: valMale
}, {
name: 'Female',
data: valFemale
}]
});

});

And, finally, here is my @Component declaration at the portlet.java

@Component(
   immediate = true,
   property = {
       "com.liferay.portlet.display-category=category.sample",
       "com.liferay.portlet.footer-portlet-javascript=/js/progressFeedback.js",
       "com.liferay.portlet.instanceable=true",
       "javax.portlet.display-name=MyFeedback Portlet",
       "javax.portlet.init-param.template-path=/",
       "javax.portlet.init-param.view-template=/view.jsp",
       "javax.portlet.resource-bundle=content.Language",
       "javax.portlet.security-role-ref=power-user,user"
   },
   service = Portlet.class
)

The error I get in Chrome is:

Uncaught ReferenceError: Highcharts is not defined

I have tried this with no success: https://dev.liferay.com/es/develop/tutorials/-/knowledge_base/7-0/liferay-amd-module-loader

As I said, it seems that the initial

in init.jsp is not working...

Thanks in advance!