JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container">
</div>
JavaScript
var BleedEnthalpy = {"0":1.495308553,"1":0.4441197889,"2":0.8609127688,"3":1.0913122458,"4":1.2085670076};
var BypassRatio = { "0":0.0602932228,"1":0.0020143045,"2":0.1111420462,"3":0.0017957639,"4":0.0665590016};
var CorrCoreSpeed = {"0":0.324932966,"1":0.0117531727,"2":0.0031048726,"3":0.0178847649,"4":0.0240343906};
var CorrFanSpeed = {"0":0.1305041016,"1":0.0724399592,"2":0.2403974931,"3":0.0670989556,"4":0.1423183933};
var FuelFlowRatio = {"0":0.6702051884,"1":0.2283618629,"2":0.6229737661,"3":0.582081078,"4":0.5427240603};
var HPCOutletTemp = {"0":0.5849573032,"1":0.0045057842,"2":0.1007197519,"3":0.1086887797,"4":0.1617558349};
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor: null,
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
var iter = 0;
// set up the updating of the chart each second
var series = this.series[0];
var series2 = this.series[1];
var series3 = this.series[2];
var series4 = this.series[3];
var series5 = this.series[4];
var series6 = this.series[5];
myInterval = setInterval(function() {
var len = Object.keys(BleedEnthalpy).length;
var len2 = Object.keys(BypassRatio).length,
x = new Date().getTime();
if (iter < len) {
series.addPoint([x, BleedEnthalpy[iter]], false, true);
series2.addPoint([x, BypassRatio[iter]], false, true);
series3.addPoint([x, CorrCoreSpeed[iter]], false, true);
series4.addPoint([x, CorrFanSpeed[iter]], false, true);
series5.addPoint([x, FuelFlowRatio[iter]], false, true);
series6.addPoint([x, HPCOutletTemp[iter]], true, true);
iter++;
} else {
clearInterval(myInterval);
}
}, 1000);
}
}
},
title: {
text: null
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [{
title:...