HighChart Integration with Liferay

Subhasis Roy
Subhasis Roy
A Minute Read

I have experienced some work related to HighChart integration with Liferay in my recent development work.

I am sharing my work experience here,

Integrating highchart requres the "jquery.min.js"(it requires version above 1.9.1) along with the "highchart.js"

Integrating HighChart is quit easy. Proving you the details below -

Step 1. Include the above two JS files in the JSP.

#Import JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
 
Step2: Write the script to generate the High Chart
 
#Sample BarGraph Code:
 
<script>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
        },
        title: {
            text: 'Sample Bar Graph'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'category',   
            title: {
                text: 'Status',
                style: {
                    fontSize: '12px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            title: {
                text: 'Count'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '<b>{point.y:.1f} count</b>'
        },
        series: [{
            name: 'Data',
            colorByPoint: true,
            data: [
                ['Chrome', 11],
                ['Safari', 7],
                ['FireFox', 21],
                ['IE', 1]              
            ]
        }]
    });
});
</script>
 
Step3: Add the container in the div to accomodate the High Chart
 
Code:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
 
Now you run this code inside a portlet and put in in a portal page and it will work fine.
 
 
Scenario: MULTIPLE HIGH CHART INTEGRATION ON SAME PORTAL PAGE WITH DIFF PORTLETS
 
But in one of case I had multiple portlet containing HighChart on the same portal page.
 
On that time it was not working. None of the HighChart was coming up on the page. 
 
Solution:
If you look at the above code then you can see that the chart/graph has been generate using " $('#container').highcharts({", based on the container.
 
And in the case of multiple portlet containing hich charts on the same , this was causing the problem.
 
So I have changed the implementation as following -
 
Sample Code:
 
new Highcharts.Chart({
 chart: {
    type: 'column',
    renderTo: containerName
 }
...rest of the high chat code...
});
 
In this above case we are generating the highchart by creating new instance and it will work if we have mutilple portlet on the same page which contains high charts.
Page Comments

Related Assets...

No Results Found

More Blog Entries...