Hi All,

In my latest project I needed to implement multiple Highcharts on a single webpage and to accomplish that I used the following approach.

The main objective of this blog is to cover three things:-

1. Multiple Highcharts on a single webpage.
2. Using of classes in Javascript.
3. Converting JSON array into Javascript array as per desired.

Step 1st:- Include the desired lib files from the Highcharts and get the Javascript code for the particular graphs and paste them in another js file. For example I pasted it into "customHighCharts.js".

Remember I did the changes in the Graph code as per my requirements you do as per your requirements.

Now check I have created two objects of Highcharts.Chart chart & chart2 as I have to show two charts on a single page.

var completed = 0;
var pending = 0;
var chart; var chart2;
$(function() {
 chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        title: {
            text: 'YOUR TITLE',
            x: 10 //center
        },
        subtitle: {
            text: 'Source: ' + SUBTITLE,
            x: 10
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
        },
        tooltip: {
            valueSuffix: 'VALUE SUFFIX'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
                name: 'Done',
                data: []
        }]
    });


   chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        colors: ['#8ECAC8', '#F6B071'],
        title: {
            text: 'Set vs Completed Target'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false,
                    color: '#31446C',
                    connectorColor: '#31446C'
                },
                showInLegend: true
            }
        },
        series: [{
                type: 'pie',
                name: 'Good Deed',
                data: [
                    ['Completed', 0],
                    ['Pending', 0]
                ]
        }]
    });
});

Step 2nd:- Creating class & object in Javascript.

var diaryClass = function(){
    this.createLinechart = function($jsonArray){
        var abc=[];
        $.each($jsonArray, function(i, item) {
            abc.push([parseInt(i) , parseInt(item)]);
        });
        chart.series[0].setData(abc);
    };
    this.createPiechart = function($jsonArray){
        var def=[]; var completed = 0 ; var pending = 0;
        $.each($jsonArray, function(i, item) {
            if(i == "Completed"){
                completed = parseInt(item);
            } else {
                pending = parseInt(item);
            }
            def.push([i , parseInt(item)]);
        });
        var numb = 0; var numb2 =  0;
        if((pending == 0) && (completed == 0)){
            numb =  0; numb2 =  0;
        }else if(pending == 0){
            numb =  100; numb2 =  0;
        } else if(completed == 0) {
            numb =  0; numb2 = 100;
        } else {
            if(pending < completed){
                numb =  100; numb2 =  0;
            } else {
                numb =  Math.round(((completed/pending)*100));
                numb2 =  100 - numb;
            }
        }
        completed = numb;//To be Fixed
        pending = (numb2 < 0)? 0:numb2;
        chart2.series[0].setData([['Completed',completed],['Pending',pending]], true);
    };        
};
var diary = new diaryClass();//Creating the object of the Diary class

Step 3rd:- Calling class method at the time of ready function in Javascript with the data as parameters.

//Without Ajax
Sample data:-
$lineCompleteData = {"14":"2","28":"1"} //JSON array
$pieCompleteData = {"Completed":"3","Pending":"0"}//JSON array

diary.createLinechart();
diary.createPiechart();

//with AJAX
Sample data:-
{"success":{"lineChartData":{"14":"2","28":"1"},"pieChartData":{"Completed":"3","Pending":"0"}}}

diary.createLinechart(response.success.lineChartData); diary.createPiechart(response.success.pieChartData);

Step 4th:- Including the HTML elements on the webpage where the graphs need to be displayed.

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