Apply pagination on column chart using Highcharts

Question

I am drawing a column chart (see image below) using Highcharts.

So far, I am successfully able to draw the chart, but I'm facing issues with pagination (next-previous buttons).

One idea would be to use a separate <div> element just below my chart and write a logic to show buttons, but in my requirements, I need to show the next and previous buttons in the chart area itself.

  <div id="chart-2" class="graph"></div>
    <div id="buttons"></div>

The following is the code to draw a chart - I have 12 categories (Jan - Dec), I want to display (Jan - Jun) on one page and (Aug - Dec) on another page.

$('#chart-2').highcharts({
                    chart :{
        backgroundColor: '#3f3b53',
        type:'column'
        },
        legend : {
                symbolHeight : 8,
                symbolWidth : 8,
                symbolRadius : 4,
                 margin: 15,
                 backgroundColor: '#FFFFFF',
                 layout:'horizontal',
                 itemDistance:25,

                 symbolMargin:10,
                itemStyle: {
                color: 'black',
                fontWeight: 'normal'

             }
             }, 
        title: {
            text: ''
        },
        xAxis: {
            categories: [
                'JAN',
                'FEB',
                'MAR',
                'APR',
                'MAY',
                'JUN',
                'JUL',
                'AUG',
                'SEP',
                'OCT',
                'NOV',
                'DEC'
            ],
        labels: {
            style: {
                color: '#FFFFFF'
            }
        }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
        backgroundColor: '#FFFFFF',
        borderColor: '#FFFFFF',
        borderRadius: 0,
        borderWidth: 5,
        formatter: function() {
            return ' <b>' + this.y + '</b><br><b>'+this.series.name+'</b>';
        }
    },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Physical Medicine',

             color: '#0099ff',
            data: [90, 80, 85, 70, 80, 50, 88, 85, 20, 30, 40, 50]

        },{
            name: 'Phychiatry',

             color: '#ff3399',
            data: [80, 70, 85, 60, 50, 70, 38, 89, 70, 40, 20, 50]

        },{
            name: 'Otrhopedic Surgery',

             color: '#cc0000',
            data: [88, 79, 81, 50, 40, 76, 31, 81, 65, 30, 29, 59]

        },{
            name: 'Nephrology',

             color: '#ff5c33',
            data: [88, 89, 61, 60, 70, 36, 21, 51, 69, 39, 21, 51]

        },{
            name: 'Cardiology',

             color: '#ffa64d',
            data: [18, 29, 31, 50, 40, 46, 81, 31, 89, 39, 81, 31]

        },{
            name: 'General Surgery',

             color: '#ffe066',
            data: [28, 59, 61, 59, 49, 41, 31, 41, 81, 31, 87, 38]

        },{
            name: 'General Practise',

             color: '#a64dff',
            data: [78, 69, 41, 89, 29, 81, 21, 11, 41, 35, 92, 89]

        },{
            name: 'Pulmanory Diesease',

            color: '#0066ff',
            data: [58, 39, 49, 89, 39, 61, 25, 45, 23, 76, 42, 89]

        }]
                }, function(chart) { // on complete

    //chart.renderer.button("abc", 100, 100, function() {}, {}, {}, {}).add();
    chart.renderer.button('Reset zoom', null, null, chart.resetZoom, {
   zIndex: 20
}).attr({
   align: 'right',
   title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
   align: 'right',
   x: -10,
   y: 10
}, false, null);
});

Answer 1

However, The Accepted Answer is true for Jan to Dec. If there are some different cases then above code will get only two screen. I have made a some customization to the accepted answer hope it will surely help others for different scenerio.

function (chart) {
    var x=6;
    var max_plot=12;

    chart.renderer.button('<', chart.plotLeft - 60, chart.plotHeight + chart.plotTop).addClass('left').add();

    chart.renderer.button('>', chart.plotLeft + chart.plotWidth + 30, chart.plotHeight + chart.plotTop).addClass('right').add();

    $('.left').click(function() {
        if (x < 0) {
            x = 0;
        } else {
            console.log('fsafg');
            chart.xAxis[0].setExtremes(x-6, x-1);
            x=x-6;
        }
    });

    $('.right').click(function() {
        if (x > max_plot) {
            x = max_plot;
        } else {
            chart.xAxis[0].setExtremes(x+1, x+6);
            x=x+6;
        }
    });
}

Answer 2

If I understand you correctly, you can use chart.renderer.button for adding new buttons to your chart, that will change the extremes of your xAxis.

function(chart) { // on complete
    chart.renderer.button('<', chart.plotLeft - 60, chart.plotHeight + chart.plotTop).addClass('left').add();


    chart.renderer.button('>', chart.plotLeft + chart.plotWidth + 30, chart.plotHeight + chart.plotTop).addClass('right').add();

    $('.left').click(function() {
      chart.xAxis[0].setExtremes(0, 5);
    });
    $('.right').click(function() {
      chart.xAxis[0].setExtremes(6, 11);
    })
  }

When you will change you xAxis extremes you will be able to show the half of your points on left button click, and the second half on right button click.

You can find options I have used in Highcharts API: http://api.highcharts.com/highcharts

And here you can find an example how it can work: http://jsfiddle.net/1dtt1Lph/2/