How do you increase the performance of highcharts chart creation and rendering

Question

I have a file locally that has JSON formatted data. I have created little PHP script to echo out the the output of this file when call via AJAX. The data file's size is 59k. I followed the highcharts recommendation to disable animation and shadow. when I load the chart, it takes a very very very long time to render. I have pasted the script below. Any ideas what I can do to render this chart faster? As it stands, this is definitely not acceptable.

echo_file.php output looks like this:

[{"name":"loess","data":[[1373241600000,3.49571041760408],[1373241660000,3.4844505982485],[1373241720000,3.47324293684199],[1373241780000,3.46208745646435],[1373241840000,3.45098418019539],[1373241900000,3.43993313111491],[1373241960000,3.42893433230273],[1373242020000,3.41798780683864],[1373242080000,3.4070935778
43611722495],[1373243400000,3.18069824879358],[1373243460000,3.17101320762565],[1373243520000,3.16138101680096],[1373243580000,3.15180169939934],[1373243640000,3.14227527850057],[1373243700000,3.13280177718446],[1373243760000,3.12338121853083],[1373243820000,3.11401362561948],[1373243880000,3.10469902153021]]}]

this is the script:

$(document).ready(function() {


 var seriesOptions = [],
    yAxisOptions = [],
    colors = Highcharts.getOptions().colors;

function myAjax() {
    $.ajax({
                url: 'echo_file.php', 
                datatype: 'json',
                success: function(data) {

                    seriesOptions=data;
                    createChart();
                },

                cache: false    
                });
}

setInterval(myAjax, 300000); 


   function createChart() {

        $('#container').highcharts('StockChart', {
            chart: {
                animation: false,
                shadow: false

            },
            title : {
            text : 'CPU Utilization'
        },

            plotOptions: {

            series: {
                lineWidth: 2
            }
        },

            rangeSelector: {
                enabled: true,
                buttons: [{
                        type: 'minute',
                        count: 60,
                        text: 'hourly'
                    }, {
                        type: 'all',
                        text: 'All'
                    }]
            },
            credits: {
                enabled: false
            },
             xAxis: {
                type: 'datetime',
                minPadding:0.02,
                maxPadding:0.02,
                ordinal: false



            },


            yAxis: {
                labels: {
                    formatter: function() {
                        //return (this.value > 0 ? '+' : '') + this.value + '%';
                        return (this.value);
                    }
                }

            },


            yAxis : {
                title : {
                    text : '% CPU Utilization'
                },
                min:0,
                max:100,

                plotLines : {
                    value : 70,
                    color : '#FFA500',
                    dashStyle : 'shortdash',
                    width : 2,
                    label : {
                        text : 'Threshold',
                        align:'right'
                    }
                }                           

            },
            scrollbar: {
                    enabled: true
                    },
            navigator : {
                adaptToUpdatedData: false

            },


            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b>',
                valueDecimals: 2
            },

            series: seriesOptions

        });
    }

});

Answer 1

Highcharts just released a boost module that helps speed up charts with large amounts of data points. You need a modern browser to use this.

https://github.com/highslide-software/highcharts.com/blob/master/js/modules/boost.src.js

This is my highcharts options when I want to speed up rendering. It removes all animation, click events and tooltips.

Highcharts.setOptions({
    plotOptions: {
        area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
    },
    chart: {
        reflow: false,
        events: {
            redraw: function() {
                console.log("highcharts redraw, rendering-done");
                $('body').addClass('rendering-done');
            }
        },
        animation: false
    },
    tooltip: {
        enabled: false,
        animation: false
    },
    exporting: {
        enabled:false
    },
    credits: {
        enabled: false
    }
});