Highcharts Stock Demo

author(s): Torstein Hønsi

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

<div id="report" style="font: 0.8em sans-serif"></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/usdeur.js"></script>

JavaScript

$(function () {
    var $report = $('#report');

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

        chart: {
            //zoomType: 'x',
            events: {
                selection: function (event) {
                    if (event.xAxis) {
                        $report.html('Last selection:<br/>min: ' + Highcharts.dateFormat('%Y-%m-%d', event.xAxis[0].min) +
                            ', max: ' + Highcharts.dateFormat('%Y-%m-%d', event.xAxis[0].max));
                    } else {
                        $report.html('Selection reset');
                    }
                }
            }
        },

        rangeSelector: {
            selected: 1
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });
    var chart = $('#container').highcharts();
    chart.pointer.cmd = chart.pointer.onContainerMouseDown;
    chart.pointer.onContainerMouseDown = function (a){
        this.zoomX=this.zoomHor=this.hasZoom=a.shiftKey;
        this.cmd(a);
    };   
});