Highcharts: high performance for multiple charts on one page

I have multiple highcharts in one page minimum 10 charts maximum 25 charts in one page, something like widgets

I used to call data for tall charts from server using Ajax Function and I call data from MYSQL database

There is no problem loading charts, but only when I load more than 5 charts on one page, the performance of high charts becomes very poor, the chart loads very slowly, I tried some of the methods suggested on the Highcharts website, for example

Lazy Loading - http://www.highcharts.com/stock/demo/lazy-loading Data Grouping - http://www.highcharts.com/stock/demo/data-grouping

But none of these methods help me, but my performance is very slow, example of my coding as I used to call diagrams

I have multiple dropdowns, when each dropdown value changes, the graph will update according to the dropdown values

I used to call charts using Ajax functions like this

  $.ajax({
                    type: "GET",
                    url: "SampleAJAX.aspx",
                    data: "type=CHART1&data="+data1,
                    success: Chart1Success,
                    error: IsError
                });

  $.ajax({
                    type: "GET",
                    url: "SampleAJAX.aspx",
                    data: "type=CHART2&data="+data2,
                    success: Chart2Success,
                    error: IsError
                });
....etc..etc... like wise n number of Ajax functions will be called

      

And after these Ajax functions I used to call charts in success functions

     function Chart1Success(){
    $('#Chart1').highcharts({
                        chart: {
                            type: 'pie',
                            style: {
                                fontFamily: "Roboto",
                            },
                            events: {
                                load: function () {
                                    var msg = "Chart1";
                                    AfterUpdate(msg);
                                },
                            },
                        }
          .................
    });
    }

  function Chart2Success(){
    $('#Chart1').highcharts({
                        chart: {
                            type: 'column',
                            style: {
                                fontFamily: "Roboto",
                            },
                            events: {
                                load: function () {
                                    var msg = "Chart2";
                                    AfterUpdate(msg);
                                },
                            },
                        }
          .................
    });
    }
  ......etc..etc.... n number of Highcharts continues

      

Sorry for not posting the script as my data is a bit confidential and I have a lot of time to integrate the same into a fiddle with sample data if I still need my level to be better to publish

+3


source to share





All Articles