Highcharts Demo

author(s): Torstein Hønsi

by unklefolk

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
<button id="pageBack" class="autocompare">&lt; Page back</button>
<button id="zoom" class="autocompare">Zoom in</button>
<button id="pageForward" class="autocompare">Page forward &gt;</button>

JavaScript

$(function () {
    $('#container').highcharts({

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
            19.9, 71.5, 106.4, 229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
            29.9, 71.5, 106.4, 29.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
            39.9, 71.5, 106.4, 9.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
            49.9, 71.5, 106.4, 12.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
            59.9, 71.5, 106.4, 219.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    });

		var xAxisPageSize = 20;
    var zoomed = false;
    
    // the button action
    $('#zoom').click(function () {
    
        var chart = $('#container').highcharts();
       	var currentExtremes = chart.xAxis[0].getExtremes();

				if (zoomed)
        {
        	chart.xAxis[0].setExtremes(currentExtremes.dataMin, currentExtremes.dataMax);
          $('#zoom').html('Zoom in');
          zoomed = false;
        } else {
        	chart.xAxis[0].setExtremes(currentExtremes.min, currentExtremes.min + xAxisPageSize);
          $('#zoom').html('Zoom out');  
          zoomed = true;
        }
    });
    

    // the page back button action
    $('#pageBack').click(function () {
        var chart = $('#container').highcharts();
        var currentExtremes = chart.xAxis[0].getExtremes();
        if (currentExtremes.min <= currentExtremes.dataMin) {
        	return;
        } 
        else if (currentExtremes.min - xAxisPageSize <= currentExtremes.dataMin) {
        	chart.xAxis[0].setExtremes(0, xAxisPageSize);
        } else
        {
        	chart.xAxis[0].setExtremes(currentExtremes.min - xAxisPageSize, currentExtremes.min);
        }
        
        //debugger;
        //chart.xAxis[0].setExtremes(0, 5);
    });
    
    // the page back button action
    $('#pageForward').click(function () {
        var chart =...