Multi-Series Line Chart from CSV - CanvasJS JavaScript Charts

Multi-Series Line 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

function getDataPointsFromCSV(csv) {
  var dataPoints, csvLines, points;
  dataPoints = csvLines = points = [];
  
  csvLines = csv.split(/[\r?\n|\r|\n]+/);
  for (var i = 0; i < csvLines.length; i++)
    if (csvLines[i].length > 0) {
      points = csvLines[i].split(",");
      
      chart.options.data[0].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[3])});
      chart.options.data[1].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[4])});
      chart.options.data[2].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[5])});
      chart.options.data[3].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[6])});
    }
}

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Multi-Series Line Chart from CSV",
    },
    data: [
    	{ 
      	type: "line", 
        name: "Series1",
        xValueFormatString:"hh:mm tt",
        showInLegend: true,
      	dataPoints: [] 
      },
      { 
      	type: "line", 
        name: "Series2",
        xValueFormatString:"hh:mm tt",
        showInLegend: true,
        dataPoints: [] 
      },
      { 
      	type: "line", 
        name: "Series3",
        xValueFormatString:"hh:mm tt",
        showInLegend: true,
        dataPoints: [] 
      },
       { 
      	type: "line", 
        name: "Series4",
        xValueFormatString:"hh:mm tt",
        showInLegend: true,
        dataPoints: [] 
      }
    ]
  });
  
$.get("https://codepen.io/indranil-deo/pen/VrQZOB.js", function(data) {
  getDataPointsFromCSV(data);
  chart.render();
});