Pagination in column chart with Previous, Next controls?

Question

I have created a Column highchart and i have to create pagination for it.

How can i achieve Pagination with forward, backward,next, previous controls?

I have the column chart code as below,

$(function () {
    $('#ao-demand-distribution').highcharts({
        chart: {
            type: 'column',
            spacingBottom: 0,
            spacingTop: 0,
            spacingLeft: 0,
            spacingRight: 0,

        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                'S1',
                'S2',
                'S3',
                'S4',
                'S5',
                'S6',
                'S7',
                'S8'
            ],
            crosshair: false,
            gridLineWidth: 0,
            tickWidth : 0
        },
        yAxis: {
            min: 0,
            max: 150,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'S1',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]

        }, {
            name: 'S2',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3]

        }]
    });
});

HTML CODE :

<div class="ao-demand-pagination">
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa-step-backward"></i></a>
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa fa-chevron-left"></i></a>
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa fa-chevron-right"></i></a>
                                    <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa-step-forward"></i></a>

                                </div>

Pagination Visual :

please help to me fix this pagination.

Answer 1

This can be done with setExtremes. You set up a paramaterization for your "window" per page and update the extremes on each click. The can be done in 2 main sets of code.

1) On load you set your window the "beginning" of the chart:

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

2) You then apply logic to the button functions to allow for paging:

  var stepWidth = 5;
  // the button action
  $('#beginning').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].setExtremes(0, 5);
  });

  $('#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);
  });

  $('#ending').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].setExtremes(9, 11);
  });

I leave adding in logic to prevent going out of range to you. Here is a sample jsFiddle.