JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>
CSS
#container {
width: 300px;
}
#container > div {
height: 100px;
margin: 10px;
}
#container div.highcharts-container {
border: 1px solid #000;
}
JavaScript
var NUM_OF_CHARTS = 32,
NUM_OF_VALUES = 200,
NUM_OF_SERIES_PER_CHART = 2,
defaultOptions = {
chart: {
renderTo: 'container',
events: {
redraw: function(){
}
},
animation: {
enabled: false
}
},
legend: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: null
},
plotOptions: {
series: {
marker: {
enabled: false
},
shadow: false,
animation: {
enabled: false
}
}
},
credits: {
enabled: false
},
yAxis: {
title: {
text: null
}
},
xAxis: {
labels: {
enabled: false
}
},
series: []
},
options, au;
window.charts = [];
function randomData(index) {
for(var i=0, data=[]; i<100; i++)
data[i] = Math.random()*100|0 + 100*index;
return data;
}
function setSeriesData(series, n, update) {
for(var i=0; i<n; i++) {
if(update === true) {
series[i].setData(randomData(i), false);
} else {
series[i] = {
data: randomData(i)
}
}
}
}
// draw charts for the first time
for (var i=0; i<NUM_OF_CHARTS; i++) {
options = $.extend(null, defaultOptions, {
chart: {
renderTo: $('<div>').appendTo('#container')[0]
}
});
setSeriesData(options.series, NUM_OF_SERIES_PER_CHART);
charts[i] = new Highcharts.Chart(options);
}
function Autoupdate(charts) {
var l = charts.length, i;
function redrawHandler(n) {
i = (n+1 >= l) ? 0 : n+1;
...