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=".1.1/jquery.min.js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>

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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts./highcharts.js"></script>
<script src="https://code.highcharts./modules/boost.js"></script>
<script src="https://code.highcharts./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?

• javascript
• highcharts

• The short story is just include it and it will work. It seems to just override some default highcharts functions so the boost versions are called instead of the normal ones. I don't understand the specifics of it either. – apokryfos Commented Jul 19, 2016 at 13:40
• thanks...........................................................we can close this topic. – Brk Commented Jul 19, 2016 at 13:57
• If you find a more detailed explanation anywhere you could just answer your own question. I'm sure it will help someone else at some point. – apokryfos Commented Jul 19, 2016 at 14:00
• ok I will :) .... – Brk Commented Jul 19, 2016 at 14:29

1 Answer 1

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.