Ask Questions and Find Answers

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:

<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>

<%@ 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 />

<script type="text/javascript">
    var categories = ["36", "37", "38", "39", "40"];

    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" %>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

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 

<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...

Thanks in advance!