Highcharts Stock Demo

author(s): Torstein Hønsi

by Michel Munzert

HTML

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

<script src="http://code.highcharts.com/stock/highstock.src.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 zoomButton;
    var chart = new Highcharts.StockChart({

        chart: {
            renderTo: 'container',
            zoomType: 'x',
            events: {
                selection: function() {
                    var ch = this;
                    zoomButton = ch.renderer.button('Reset zoom', null, null, function(){
                        ch.yAxis[0].setExtremes(null, null);
                    }, {
                        zIndex: 20
                    }).attr({
                        id: 'resetZoom',
                        align: 'right',
                        title: 'Reset zoom level 1:1'
                    }).add().align({
                        align: 'right',
                        x: -15,
                        y: 40
                    }, false, null);
                }
            }
        },
        yAxis:  {
            events: {
                setExtremes: function(event){
                    if(!event.min && !event.max){
                        zoomButton.destroy();
                    }
                }
            }
        },            
        rangeSelector: {
            selected: 1
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur}]
    });
});