how to improve the efficacy while dynamic create charts

Question

My webpage have 3 chart(Line chart and Stacked column chart)

each chart have different series

but have same length of data

the length of data and categories are fetch from database

it mean i can't set a default setting

i use the below javascript to set these charts

    //loop Chart1, 2, 3
    $.each(Charts, function(i,chart){

        //loop series
        $.each(chart.series, function (i, se) {

            //set series default data e.g[0, 0, 0, 0, 0]
            se.setData(Series);

        });

        //set categories e.g["Peter", "John", "Tom", "Mary", "May"]
        chart.xAxis[0].setCategories(Categories);

    });

* the problem is spend a long time and maybe cause the browser "No responding".

Answer 1

Try to replace your code with

$.each(Charts, function(i,chart){

    //loop series
    $.each(chart.series, function (i, se) {

        //set series default data e.g[0, 0, 0, 0, 0]
        se.setData(Series,false);

    });

    //set categories e.g["Peter", "John", "Tom", "Mary", "May"]
    chart.xAxis[0].setCategories(Categories,false);
    chart.xAxis[0].isDirty = true;
    chart.redraw();
});

Answer 2

Nested loops are terrible for performance. Pre-process your data so that you can just provide the appropriate series to each chart.

Depending on how often the data refreshes in the database use the appropriate levels of caching on the database, on the server-side that retrieves the data from the database, and on the on the web-server.