$(function () { var seriesOptions = [], seriesCounter = 0, names = ['MSFT', 'AAPL', 'GOOG']; /** * Create the chart when all data is loaded * @returns {undefined} */ function createChart() { $('#container').highcharts('StockChart', { rangeSelector: { selected: 4 }, yAxis: { labels: { formatter: function () { return (this.value > 0 ? ' + ' : '') + this.value + '%'; } }, plotLines: [{ value: 0, width: 2, color: 'silver' }] }, plotOptions: { series: { compare: 'percent', showInNavigator: true } }, series: seriesOptions }); } $.each(names, function (i, name) { $.getJSON('http://datas.org.cn/jsonp?filename=json/' + name.toLowerCase() + '-c.json&callback=?', function (data) { seriesOptions[i] = { name: name, data: data }; // As we're loading the data asynchronously, we don't know what order it will arrive. So // we keep a counter and create the chart when all the data is loaded. seriesCounter += 1; if (seriesCounter === names.length) { createChart(); } }); }); });