CODEWITHSUNDEEP
javascripthighcharts
Brk
Brk

Reputation: 1297

How to boost your performance in HighCharts

Hey I am using highcharts library for introducing graphs of gases.

I want to boost their performance, so that each graph can handle more than 50,000 points per graph.

I know that I can specify turboThreshold to be 1 million and it will works fine,but I have notice a new module called boostjs of HighCharts and I would like to use it, but I don't know how.

This is an example of usage:

$(function () {

    function getData(n) {
        var arr = [],
            i,
            a,
            b,
            c,
            spike;
        for (i = 0; i < n; i = i + 1) {
            if (i % 100 === 0) {
                a = 2 * Math.random();
            }
            if (i % 1000 === 0) {
                b = 2 * Math.random();
            }
            if (i % 10000 === 0) {
                c = 2 * Math.random();
            }
            if (i % 50000 === 0) {
                spike = 10;
            } else {
                spike = 0;
            }
            arr.push([
                i,
                2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
            ]);
        }
        return arr;
    }
    var n = 500000,
        data = getData(n);


    console.time('line');
    $('#container').highcharts({

        chart: {
            zoomType: 'x'
        },

        title: {
            text: 'Trimmed Highcharts drawing ' + n + ' points'
        },

        subtitle: {
            text: 'Using the experimental Highcharts Boost module'
        },

        tooltip: {
            valueDecimals: 2
        },

        series: [{
            data: data,
            lineWidth: 0.5
        }]

    });
    console.timeEnd('line');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

Apparently I don't need to do anything expect adding the script after highchart's script.This is strange , I was sure that I need to add some property to highcharts graph properties to enable this boost mode. I need an explanation on this script and how to use it properly?

Upvotes: 1

Views: 3395

Answers (1)

Emre Bolat
Emre Bolat

Reputation: 4552

In all SVG based charting solutions including HighCharts, performance decreases after adding a couple hundreds of points to the chart.

The process of adding so much objects (points) to a SVG based chart takes time and user interaction with these objects (like values, titles, tooltips etc.) feels slow. Because there is a limitation of SVG elements which you can add to DOM.

HTML5 canvas technology does not have such limitations. But a pure HTML5 canvas solution lacks of SVGs strength like DOM access, sharp rendering between different screen solutions etc.

So HighCharts engineers made a hybrid solution with using both SVG and HTML5 canvas technologies. They are drawing the graph on a HTML5 canvas then copying the content of the chart to a SVG.

This is how HighChart's boost.js works.

Upvotes: 10

Related Questions