ElementStacks

by hfrntt

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px; width: 700px"></div>

JavaScript

var data = (function(){
    for(var i=0, arr=[]; i<500; i++)
        arr[i] = Math.random();
    return arr;
})();

var Zoom = function(axis) {

    var zoom = this,
        loc = window.location,
        axis = axis;

    zoom.get = function() {
        var b = loc.hash.match(/zoom:([0-9.]+),([0-9.]+)/);
        if (b === null || b.length < 3)
            return false;
        return [parseFloat(b[1]), parseFloat(b[2])];
    }
    
    zoom.set = function(min, max) {
        loc.hash = 'zoom:'+min+','+max;
        return zoom;
    }
    
    zoom.apply = function() {
        var e = zoom.get();
        if (e)
            axis.setExtremes(e[0], e[1]);
        return zoom;
    }
        
    return zoom;
}

window.chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'x',
        events: {
           selection: function(e) {
               var axis = e.xAxis[0];
               this.zoom.set(axis.min, axis.max).apply();
               return false;
           }
        }
    },
    
    series: [{
        data: data
    }]
}, function(chart){
    chart.zoom = new Zoom(chart.xAxis[0]);
    chart.zoom.apply();
});