JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.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
window.onload = function () {
var dps = [];
var dataSeries = [];
var chartCyclesBySensors = new CanvasJS.Chart("chartContainer", {
title:{
},
axisX:{
},
axisY :{
},
toolTip: {
shared: "true"
},
legend:{
},
data: dataSeries
});
$.when(
$.getJSON("https://api.myjson.com/bins/1chaz4", function(data) {
$.each(data,function(index, object){
dps[index] = [];
$.each(data[index], function(key, val) {
date = parseInt( val.time * 1000 );
dps[index].push({
x: new Date(date),
y: val.value
});
});
dataSeries.push({
name: index,
type: "spline",
showInLegend: true,
dataPoints: dps[index]
});
});
})
).then(function() {
chartCyclesBySensors.render();
});
}