Highcharts Demo

author(s): Torstein Hønsi

by Ryan Brackett

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="ao-demand-pagination">
  <button id="beginning" class="autocompare">Beginning</button>
  <button id="back" class="autocompare">Back</button>
  <button id="forward" class="autocompare">Forward</button>
  <button id="ending" class="autocompare">Ending</button>

</div>
<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      spacingBottom: 0,
      spacingTop: 0,
      spacingLeft: 0,
      spacingRight: 0,
      events: {
        load: function() {
          this.xAxis[0].setExtremes(0, 5);
        }
      }
    },
    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],
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, 'blue'],
          [1, 'green']
        ]
      }

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

    }]

  });

  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);
  });

 ...