Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

function getData(num) {
    var data = [];

    for (var i = 0; i < num; i++) {
        data.push(Math.round(Math.random() * 1000))
    }

    return data;
}

Highcharts.chart('container', {
    chart: {
        marginBottom: 100
    },
    legend: {
        enabled: false
    },
    series: [{
        type: 'column',
        data: getData(100)
    }]
}, function(chart) {
    var dataLength = chart.series[0].data.length,
        buttonsNum = 3,
        btnTop = chart.plotHeight + chart.plotTop + 40,
        options = {
            str: '<<',
            x: 0,
            y: btnTop,
            step: dataLength / buttonsNum
        };

    chart.xAxis[0].setExtremes(0, options.step);
    chart.customBtns = [];

    for (var i = 0; i < buttonsNum; i++) {
        if (!i) {
            renderBtn(options, chart);
            options.str = '<';
            renderBtn(options, chart);
        }
        options.str = i + 1;
        renderBtn(options, chart);

        if (i === buttonsNum - 1) {
            options.str = '>';
            renderBtn(options, chart);
            options.str = '>>';
            renderBtn(options, chart);
        }
    }
    placeBtns(chart);
});

function renderBtn(options, chart) {
    chart.customBtns.push(chart.renderer.button(
            options.str,
            options.x,
            options.y,
            function() {
                setRange.call(this, options, chart.xAxis[0]);
            })
        .attr({
            width: 20
        })
        .add());

    options.x += options.width;
}

function setRange(options, axis) {
    var textStr = this.text.textStr,
        min,
        max;

    if (Highcharts.isNumber(textStr)) {
        min = (textStr - 1) * options.step;
        max = (textStr - 1) * options.step + options.step;
    } else {
        switch (textStr) {
            case '<<':
                min = 0;
                max = options.step;
                break;

            case '<':
                if (!axis.min) {
      ...