How Do You Increase The Performance Of Highcharts Chart Creation And Rendering

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 foll

Solution 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("highchartsredraw, rendering-done");$('body').addClass('rendering-done');
            }
        },
        animation:false
    },tooltip: {
        enabled:false,
        animation:false
    },exporting: {
        enabled:false
    },credits: {
        enabled:false
    }
});

Solution 2:

Even if the file is local data must travel to the browser, since the chart is drawn there, here is an example with 52k points and the chart is loaded pretty fast.

See http://highcharts.com/stock/demo/data-grouping

If in your case you have too many points maybe you should take some mechanism to divide on representative samples, as it has no sense to show a chart where the eye can not distinguish between the different values​​.

See http://highcharts.com/stock/demo/lazy-loading