Highcharts Stock Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

<div id="resizer" style="min-width: 500px; min-height: 200px">
    <div id="inner-resizer">
        <div id="container" style="height: 400px">
        </div>
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<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>

CSS

#resizer {
    border: 1px solid silver;   
}
#inner-resizer { /* make room for the resize handle */
    padding: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
<style type="text/css">

JavaScript

$(function() {
    
    (function (H) {
        H.wrap(H.Axis.prototype, 'setAxisSize', function (proceed) {
            var chart = this.chart,
                options = this.options,
                height = options.height,
                top = options.top,
                test = /%$/;
            if (test.test(height)) {
                options.height = parseInt(height, 10) / 100 * chart.plotHeight;
            }
            if (test.test(top)) {
                options.top = parseInt(top, 10) / 100 * chart.plotHeight + chart.plotTop;
            }
            proceed.call(this);
            
            options.height = height;
            options.top = top;
                
                
        });
        
    }(Highcharts));

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
        
        // split the data set into ohlc and volume
		var ohlc = [],
			volume = [],
			dataLength = data.length;
			
		for (i = 0; i < dataLength; i++) {
			ohlc.push([
				data[i][0], // the date
				data[i][1], // open
				data[i][2], // high
				data[i][3], // low
				data[i][4] // close
			]);
			
			volume.push([
				data[i][0], // the date
				data[i][5] // the volume
			])
		}

		// set the allowed units for data grouping
		var groupingUnits = [[
			'week',                         // unit name
			[1]                             // allowed multiples
		], [
			'month',
			[1, 2, 3, 4, 6]
		]];

		// create the chart
		$('#container').highcharts('StockChart', {
		    
		    rangeSelector: {
		        selected: 1
		    },

		    title: {
		        text: 'AAPL Historical'
		    },

		    yAxis: [{
		        title: {
		            text: 'OHLC'
		        },
		        height: '60%',
		        lineWidth: 2
		    }, {
		        title: {
		            text: 'Volume'
		        },
		        top: '65%',
		        height: '35%',
		        offset: 0,
		        lineWidth: 2
		    }],
		    
		    series: [{
		    ...