CODEWITHSUNDEEP
highcharts
Marthinus Elliott
Marthinus Elliott

Reputation: 67

Adding data points in Highcharts

I was tasked to display several charts on a page (asp.net), all dynamically generated as the chart count is random. I had extremely long "load" times (page unresponsive etc), and discovered it was in the client side, where the series points were added.

I realized that it was due to my lack of understanding of highcharts, and the "extra" work I may be giving it to do with this approach.

I first create a new 'div' container, attach them to the page, initiate it as a highcharts object, then add points.

jQuery.each(hotCakes, function (a, value) {

            var thecpuchartsmall = {
                chart: { type: 'area' },
                title: { text: value.vmName + " processor usage %" }
            };

            //Create New Div
            var theDiv = document.createElement('div');
            var newId = "div_" + value.vmName;

            theDiv.className = 'vmCPU_Div';
            theDiv.id = newId;
            $("#divAllVM").append(theDiv);

            //Create the Chart, assign to Div       
            $("#" + newId).highcharts(thecpuchartsmall);

            var tmpChart = $("#" + theDiv.id).highcharts();
            tmpChart.addSeries({ name: value.vmName, data: [] });

            jQuery.each(value.dateValue, function (v, dateValues) {
                tmpChart.series[0].addPoint([Date.parse(dateValues[0]), parseFloat(dateValues[1])]);
            });
        });

this is the problem:

tmpChart.series[0].addPoint(..)

it doesnt like doing this for 30 or up to 300 data points. I then decided to just create an array, push all the values in there, and assign it once to the series. The load times (in my test) went from 40 seconds, to 10 seconds (6 seconds for ajax data)

this was the solution:

            var myData = [];
            jQuery.each(value.dateValue, function (v, dateValues) {
                myData.push([Date.parse(dateValues[0]), parseFloat(dateValues[1])]);
            });

            me.series[0].setData(myData);

What exactly was highcharts doing in the first scenario with the long load times?

Upvotes: 1

Views: 1259

Answers (1)

Mark
Mark

Reputation: 108507

If you look at the API documentation, Highcharts was adding the point and then redrawing the plot (the redraw option defaults to true)!

Please note that for the best performance you should be creating your chart with the data already in place:

        var myData = [];
        jQuery.each(value.dateValue, function (v, dateValues) {
            myData.push([Date.parse(dateValues[0]), parseFloat(dateValues[1])]);
        });

        var thecpuchartsmall = {
            chart: { type: 'area' },
            title: { text: value.vmName + " processor usage %" },
            series: [{data: myData, name: value.vmName}]
        };

        $("#" + newId).highcharts(thecpuchartsmall);

Upvotes: 1

Related Questions