HighChart Integration with Liferay

thumbnail
Subhasis Roy
Published Date10 Years Ago - 137554 Views

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.
Comment (0)

More Blog Entries

thumbnail

Dragging and dropping portlets

thumbnail
Olaf Kock
19 Feb
8
thumbnail

Uploading files using Ajax via AlloyUI

thumbnail
Muhammad Asif
22 Feb
3
Blogs