JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" style="height:500px"></div>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<button id="btn" ">Second serie</button>
JavaScript
var seriesOptions = [], seriesOptions2 = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT'],
names2 = ['GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ 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++;
if (seriesCounter == names.length) {
createChart();
}
});
});
$.each(names2, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions2[i] = {
name: name,
data: data
};
console.log(seriesOptions2);
// 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++;
// if (seriesCounter == names.length) {
// createChart();
// }
});
});
$('#btn').click(function() {
chart.series[0].setData(seriesOptions2[0].data,true);
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') +...