JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
visibility : hidden;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
visibility : hidden;
}
</style>
<body onload = "runTimer()"><p id = "demo">Ready for data</p>
<div id="chartContainer" style=" opacity : 1; height: 370px; width: 100%;"></div>
<script>
var initialized = false;
var dpsOld1 = [];
var dpsNew1 = [];
var dps1 = [];
var dpsOld2 = [];
var dpsNew2 = [];
var dps2 = [];
var scatterOld1 = [];
var scatterNew1 = [];
var scatter1 = [];
var scatterOld2 = [];
var scatterNew2 = [];
var scatter2 = [];
var storeInterval;
var chart;
window.onload = function ()
{
chart = new CanvasJS.Chart("chartContainer",
{
exportEnabled: true,
title :{
text: "Testing Chart"
},
toolTip:{
shared: true,
enabled:true
},
axisY: {
interval:20,
suffix:" kph",
includeZero: true,
minimum: -100,
maximum: 300
},
axisX:{
labelMaxWidth: 160,
labelWrap: false,
interval:1,
intervalType: "second",
labelAngle: 0,
valueFormatString: "YYY-MMM-DDDh:mm:ss TT ",
},
data: [{
xValueFormatString: "DD-MMM-YY h:mm:ss:fff TT ",
toolTipContent : "<div>TimeStamp: {x}</div><br/><div style=\"color:blue;\">{name}: {y} kph</div> " ,
xValueType: "dateTime",
name : "Wheel Speed",
type: "spline",
markerSize: 0,
dataPoints: dps1
},
{
xValueFormatString: "h:mm:ss ",
toolTipContent : " <div style=\"color:red;\">{name}: {y} kph</div> " ,
name : "Sensor...