Highcharts Stock Demo

author(s): Torstein Hønsi

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>
<div id="report"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/large-dataset.js"></script>

JavaScript

$(function () {

    function printExtremes(desc, min, max) {
        $('#report').append('<br><b>' + desc + ':</b> [' + Highcharts.dateFormat("%H:%M:%S", min) +
            ' , ' + Highcharts.dateFormat("%H:%M:%S", max) + "]");
    }

    var data = [];

    var start = Date.UTC(2014, 1, 1);
    var pointInterval = 1000; // 1 sec

    // 1 hour of data
    for (var i = 0; i < 60 * 60; i++) {
        data.push(i);
    }

    $('#container').highcharts('StockChart', {

        chart: {
            events: {
                load: function () {
                    var chart = this;
                    var extremes = chart.xAxis[0].getExtremes();

                    printExtremes("Start", extremes.min, extremes.max)
                    // set max extreme 30 mins before, this works!
                    setTimeout(function () {
                        chart.xAxis[0].setExtremes(extremes.min, extremes.max - (30 * 60 * 1000));
                        var ex = chart.xAxis[0].getExtremes();
                        printExtremes("1st change", ex.min, ex.max)
                    }, 2000);

                    // set max extreme 30 mins after, this doesnt works, but...
                    setTimeout(function () {
                        chart.xAxis[0].setExtremes(extremes.min, extremes.max + ((30 * 60 * 1000)));
                        // ... if you print the axis extremes, it holds the correct extremes 
                        var ex = chart.xAxis[0].getExtremes();
                        printExtremes("2nd change", ex.min, ex.max)
                    }, 4000);

                }
            }
        },
        xAxis: {
            ordinal: false  
        },
        rangeSelector: {
            enabled: false
        },

        navigator: {
            enabled: false,
        },

        scrollbar: {
            enabled: false,
        },

        navigator: {
            enabled: false,
        },

        series: [{
            name: 'Data',
            data: data,
   ...