$(function () { $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { var lastDate = data[data.length - 1][0], // Get year of last data point days = 24 * 36e5; // Milliseconds in a day // Create the chart $('#container').highcharts('StockChart', { rangeSelector: { selected: 1 }, title: { text: 'General Fund Balance & Liquidity Tracker' }, yAxis: { title: { text: 'General Fund Balance' } }, series: [{ name: 'Fund Balance', data: data, id: 'dataseries', tooltip: { valueDecimals: 4 } }, { type: 'flags', name: 'Flags on series', data: [{ x: lastDate - 60 * days, title: 'Liquidity: 100 Days Cash on Hand' }, { x: lastDate - 30 * days, title: 'Liquidity: 50 Days Cash on Hand' }], onSeries: 'dataseries', shape: 'squarepin' }, { type: 'flags', name: 'Flags on axis', data: [{ x: lastDate - 45 * days, title: '45 days Prior to FY End' }, { x: lastDate - 15 * days, title: '15 days to Fiscal Year End' }], shape: 'squarepin' }] }); }); });
<script src="http://code.highcharts.com/stock/highstock.js"></script> <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> <div id="container" style="height: 400px; min-width: 310px"></div>