score:4

Accepted answer

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.


Related Query

More Query from same tag