HighChart Integration with Liferay

thumbnail
Subhasis Roy
Published Date9 Years Ago - 135547 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.
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