JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
</body>
JavaScript
$.ajax({
type: "GET",
url: "data.csv",
dataType: "text",
success: function (dataCsv) { processData(dataCsv); }
});
processData(dataCSV);
function processData(allText) {
var allLinesArray = allText.split('\n');
if (allLinesArray.length > 0) {
var dataPoints = [];
var dataPoints2 = [];
for (var i = 1; i <= allLinesArray.length - 1; i++) {
var rowData = allLinesArray[i].split(',');
dataPoints.push({
x: new Date(Date.parse(rowData[0])),
label: new Date(Date.parse(rowData[0])),
y: parseFloat(rowData[7])
});
}
for (var i = 1; i <= allLinesArray.length - 1; i++) {
var rowData = allLinesArray[i].split(',');
dataPoints2.push({
x: new Date(Date.parse(rowData[0])),
label: new Date(Date.parse(rowData[0])),
y: parseFloat(rowData[8])
});
}
drawChart(dataPoints, dataPoints2);
}
}
function drawChart(dataPoints, dataPoints2) {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme1",
title: {
fontFamily: "verdana",
text: "Ueberschrift",
},
axisX: {
fontFamily: "verdana",
...