Multiseries chart from csv - CanvasJS JavaScript Charts
Multiseries chart from csv - CanvasJS JavaScript Charts
by canvasjs
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 dps1 = [], dps2 = [], dps3 = [], dps4 = [], dps5 = [], dps6 = [], dps7 = [], dps8 = [], dps9 = [], dps10 = [];
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Multiseries Spline Chart from external CSV"
},
axisX:{
labelFormatter: function (e) {
return CanvasJS.formatDate( e.value, "DD-MMM hh:mm");
}
},
axisY: {
includeZero: false
},
data:[{
type : "spline",
dataPoints : dps1
},
{
type: "spline",
dataPoints: dps2
},
{
type: "spline",
dataPoints: dps3
},
{
type: "spline",
dataPoints: dps4
},
{
type: "spline",
dataPoints: dps5
},
{
type: "spline",
dataPoints: dps6
},
{
type: "spline",
dataPoints: dps7
},
{
type: "spline",
dataPoints: dps8
},
{
type: "spline",
dataPoints: dps9
},
{
type: "spline",
dataPoints: dps10
}]
});
$.ajax({
type: "GET",
url: "https://codepen.io/indranil-deo/pen/jZowgJ.js",
dataType: "text",
success: function (dataCsv) { processData(dataCsv); }
});
function addDataPoint(dataValue){
var rowData = dataValue.split(',');
dps1.push({ label: new Date(rowData[0]), y: parseInt(rowData[3]) });
dps2.push({ label: new Date(rowData[0]), y: parseInt(rowData[4]) });
dps3.push({ label: new Date(rowData[0]), y: parseInt(rowData[5]) });
dps4.push({ label: new Date(rowData[0]), y: parseInt(rowData[6]) });
dps5.push({ label: new Date(rowData[0]), y: parseInt(rowData[7]) });
dps6.push({ label: new Date(rowData[0]), y: parseInt(rowData[8]) });
dps7.push({ label: new Date(rowData[0]), y: parseInt(rowData[9]) });
dps8.push({ label: new Date(rowData[0]), y: parseInt(rowData[10]) });
dps9.push({ label: new Date(rowData[0]), y: parseInt(rowData[11]) });
dps10.push({ label: new Date(rowData[0]), y: parseInt(rowData[12]) });
}
function processData(allText) {
var allLinesArray =...