Double daily chart

by László Kovács

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<button id="button" class="autocompare">Show New Date</button>
<div id="container-1" style="height: 400px; min-width: 310px"></div>
<div id="container-2" style="height: 400px; min-width: 310px"></div>

CSS

#container-1 {
    border: 1px solid black;
    margin-bottom: 20px;
}

#container-2 {
    border: 1px solid black;
    
}

JavaScript

$(function () {
    $('#button').click(function () {
        var chart = $('#container-1').highcharts();
        chart.xAxis[0].setExtremes(
            Date.UTC(2008, 0, 1),
            Date.UTC(2008, 1, 1)
        );
    });
    var globalmin = 0;
    var globalmax = 0;
    var maxRange = 24 * 3600 * 1000 * 31; //1 month
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        // Create the chart
        $('#container-1').highcharts('StockChart', {
            xAxis: {
                events: {
                    afterSetExtremes: function(e) {
                        var max = this.max,
                            min = this.min;
                        
                        if(max-min > maxRange)
                        {
                            min = max - maxRange;
                            var x = this;                            
                            setTimeout(function(){ 
                                x.setExtremes(min,max);//chart xAxis
                                
                            }, 1);
                        }
                    },
                    setExtremes: function(e) {
                        if (globalmin == e.min && globalmax == e.max) {
                        return 0;
                        } else {
                            globalmin = e.min;
                            globalmax = e.max;
                            var chart2 = $('#container-2').highcharts();
                            chart2.xAxis[0].setExtremes(e.min,e.max) 
                            return 1;
                        }
                    }
                    
                }
            },

            rangeSelector : {
                selected : 0,
                buttons: [{
                    type: 'month',
                    count: 1,
                    text: '1 m'
                }],
                inputEnabled: false
            },

           ...