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: parseFloat(rowData[3]) });
  dps2.push({ label: new Date(rowData[0]), y: parseFloat(rowData[4]) }); 
  dps3.push({ label: new Date(rowData[0]), y: parseFloat(rowData[5]) });
  dps4.push({ label: new Date(rowData[0]), y: parseFloat(rowData[6]) });
  dps5.push({ label: new Date(rowData[0]), y: parseFloat(rowData[7]) });
  dps6.push({ label: new Date(rowData[0]), y: parseFloat(rowData[8]) });
  dps7.push({ label: new Date(rowData[0]), y: parseFloat(rowData[9]) });
  dps8.push({ label: new Date(rowData[0]), y: parseFloat(rowData[10]) });
  dps9.push({ label: new Date(rowData[0]), y: parseFloat(rowData[11]) });
  dps10.push({ label: new Date(rowData[0]), y: parseFloat(rowData[12]) });

}

function processData(allText) {
  var...