Highchart bar pagination

Question

I have a dynamic bar chart that display data from table. Due to large number of data i need to add a pagination in the bar chart like this :

.Through my researches I found this example [http://jsfiddle.net/wergeld/xvxjpvte/][2]
where I learn that I can use in the bar option :

events: {
load: function() {
this.xAxis[0].setExtremes(0, 5);
}

and programming the button like this :

$('#forward').click(function() {
var chart = $('#container').highcharts();
var currentMin = chart.xAxis[0].getExtremes().min;
var currentMax = chart.xAxis[0].getExtremes().max;

chart.xAxis[0].setExtremes(currentMin + stepWidth, currentMax + stepWidth);
});

$('#back').click(function() {
var chart = $('#container').highcharts();
var currentMin = chart.xAxis[0].getExtremes().min;
var currentMax = chart.xAxis[0].getExtremes().max;

chart.xAxis[0].setExtremes(currentMin - stepWidth, currentMax - stepWidth);
});

. Unfortunately this is not in this way I would like to make the pagination.

With my chart codes posting below Would anyone help me to make the pagination like the image showed above.

Any help is greatly appreciate it.

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

$(document).ready(function() {

var dataSum=600;

var options = {
chart: {
renderTo: 'container',
type: 'bar',
marginRight: 130,
marginBottom: 25,
events: {
load: function() {
this.xAxis[0].setExtremes(0, 19);
}
},
},
title: {
text: 'Report<br/>'
},
subtitle: {
text: '600 Diagnosticos Por Servicios<br/>2019-01-02 - 2019-02-03'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' servicios'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter:function() {
var pcnt = (this.y / dataSum) * 100;
return Highcharts.numberFormat(pcnt) + ' %';
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
}, 
scrollbar: {
enabled: true
},
credits: {
enabled: false
},
series: []
}

$.getJSON("<?php echo site_url('admin_medico/bar2data');?>", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});

The json format is like this :

[{"name":"Descrip","data":["INFERTILIDAD FEMENINA, NO ESPECIFICADA(N979)",
"TRICOMONIASIS UROGENITAL(A590)",
"LEIOMIOMA INTRAMURAL DEL UTERO(D251)",
"ENFERMEDAD INFLAMATORIA PELVICA FEMENINA POR GONOCOCOS (A54.2\u2020)(N743*)",
"INCONTINENCIA URINARIA POR TENSION(N393)",
"HIPERTENSION ESENCIAL (PRIMARIA)(I10)"]},
{"name":"Diagnostico","data":[3,2,2,1,1,1]}]

Answer 1

Similar to the example that you provided, you can use Highcharts.SVGRenderer to create buttons. In the click event you need to use the setExtremes method with the right values:

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) {
                    min = axis.min;
                    max = axis.max;
                } else {
                    min = axis.min - options.step;
                    max = axis.min;
                }

                break;

            case '>>':
                min = axis.dataMax - options.step + 1;
                max = axis.dataMax + 1
                break;

            case '>':
                if (axis.max >= axis.dataMax) {
                    min = axis.min;
                    max = axis.max;
                } else {
                    min = axis.max;
                    max = axis.max + options.step;
                }
                break;
        }
    }

    axis.setExtremes(min, max);
}

function placeBtns(chart) {
    var btns = chart.customBtns,
        btnsWidth = 0,
        x;

    btns.forEach(function(btn) {
        btnsWidth += btn.getBBox().width
    });

    x = (chart.chartWidth - btnsWidth) / 2;

    btns.forEach(function(btn) {
        btn.attr({
            x: x
        });
        x += btn.getBBox().width
    });
}

Live demo: http://jsfiddle.net/BlackLabel/xu95fg7L/

API Reference:

https://api.highcharts.com/class-reference/Highcharts#.isNumber

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button