JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var dataToBeParsed = {
"Temp1": [
{
"time": 1576144810,
"value": 159
},
{
"time": 1576144810,
"value": 194
},
{
"time": 1576144810,
"value": 169
},
{
"time": 1576144810,
"value": 182
},
{
"time": 1576144810,
"value": 198
},
{
"time": 1576144810,
"value": 156
}
],
"Temp2": [
{
"time": 1576144810,
"value": 168
},
{
"time": 1576144810,
"value": 170
},
{
"time": 1576144810,
"value": 162
},
{
"time": 1576144810,
"value": 184
},
{
"time": 1576144810,
"value": 175
},
{
"time": 1576144810,
"value": 167
}
],
"Temp3": [
{
"time": 1576144810,
"value": 171
},
{
"time": 1576144810,
"value": 162
},
{
"time": 1576144810,
"value": 154
},
{
"time": 1576144810,
"value": 189
},
{
"time": 1576144810,
"value": 166
},
{
"time": 1576144810,
"value": 183
}
]
};
var data = [];
for(var dataPoint in dataToBeParsed) {
if(dataToBeParsed.hasOwnProperty(dataPoint)) {
var dataPoints = [];
for(var i=0; i<dataToBeParsed[dataPoint].length; i++) {
dataPoints.push({y:dataToBeParsed[dataPoint][i].value, x:dataToBeParsed[dataPoint][i].time*1000});
}
data.push({
type: "line",
xValueType: "dateTime",
dataPoints: dataPoints
});
}
}
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Multi Series Line Chart"
},
axisY: {
includeZero: false
},
data: data
});
chart.render();