Multi Series Line Chart from CSV Data- CanvasJS

Multi Series Line Chart from CSV Data- CanvasJS

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[1])});
      chart.options.data[1].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[2])});
      chart.options.data[2].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[3])});
    }
}

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Multi-Series Line Chart from CSV",
    },
    axisX: {
    	valueFormatString: "mm:ss:ff",
    	interval: 1,
      intervalType: "second"
    },
    data: [
    	{ 
      	type: "line", 
        name: "Series1",
        showInLegend: true,
      	dataPoints: [] 
      },
      { 
      	type: "line", 
        name: "Series1",
        showInLegend: true,
        dataPoints: [] 
      },
      { 
      	type: "line", 
        name: "Series1",
        showInLegend: true,
        dataPoints: [] 
      }
    ]
  });
  
$.get("https://codepen.io/suyashsingh/pen/XaGVBW.js", function(data) {
  getDataPointsFromCSV(data);
  chart.render();
});