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
function getDataPointsFromCSV(csv) {
var dataPoints, csvLines, points;
dataPoints = csvLines = points = [];
csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 1; i < csvLines.length; i++)
if (csvLines[i].length > 0) {
points = csvLines[i].split(",");
chart.options.data[0].dataPoints.push({label: points[0], y: parseFloat(points[1])});
chart.options.data[1].dataPoints.push({label: points[0], y: parseFloat(points[2])});
}
}
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
theme: "dark1",
title: {
text: "Chiller Temp Logging"
},
axisY:[
{
title: "Temp",
},
{
title: "Humidity",
}
],
data: [
{
type: "spline",
name: "Temp",
showInLegend: true,
dataPoints: []
},
{
type: "spline",
name: "Humidity",
axisYIndex: 1,
showInLegend: true,
dataPoints: []
},
]
});
$.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vQkg2y4kqlj2iRyFyUjZmG3uezNXcrWQ19Ro44QDTNzs_QjF55WvAgIQhc8azC1bOGirEXC4XE7t6UZ/pub?output=csv", function(data) {
getDataPointsFromCSV(data);
chart.render();
});