JSFiddle - React, Tailwind, and code Playground
HTML
<div id="chartContainer" style="height: 500px; width: 60%;">
JavaScript
< script type = "text/javascript" >
window.onload = function() {
// dataPoints
var dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
title: {
text: "testing "
},
toolTip: {
shared: true
},
legend: {
verticalAlign: "top",
horizontalAlign: "center",
fontSize: 14,
fontWeight: "bold",
fontFamily: "calibri",
fontColor: "dimGrey"
},
axisX: {
title: "RR @ 1 sec"
},
axisY: {
prefix: ' ',
includeZero: false
},
data: [{
// dataSeries1
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "result1",
dataPoints: dataPoints1
}, {
// dataSeries2
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "result2",
dataPoints: dataPoints2
}, {
// dataSeries3
type: "line",
xValueType: "dateTime",
showInLegend: true,
name: "Average",
dataPoints: dataPoints3
}],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
var updateInterval = 1000;
// initial value
var yValue1 = 000;
var yValue2 = 000;
var yValue3 = 000;
var time = new Date;
/*time.setHours(9);
*/
/*time.setMinutes(30);*/
time.setSeconds(00);
time.setMilliseconds(00);
// starting at 9.30 am
var updateChart = function(count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var i = 0; i < count;...