Multi-Series Step Line Chart from CSV Data - CanvasJS Javascript Charts

Multi-Series Step Line Chart from CSV Data - 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 chart = new CanvasJS.Chart("chartContainer", {    
		title: {
				text: "Multi-Series Step Line Chart from CSV Data"
		},
		data:  [{
        type: "stepLine",
        dataPoints: []
      },
      {
        type: "stepLine",
        dataPoints: []
      },
      {
        type: "stepLine",
        dataPoints: []
      },
      {
        type: "stepLine",
        dataPoints: []
      },
      {
        type: "stepLine",
        dataPoints: []
      },
      {
        type: "stepLine",
        dataPoints: []
    	}]
});

$.ajax({
		type: "GET",
		url: "https://codepen.io/indranil-deo/pen/WdNXoj.js",
		dataType: "text",
		success: function (dataCsv) { 
      getDataPointsFromCSV(dataCsv);
    }
});

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

function toValue(strVal) {
  return (strVal === "On") ? 1 : 0;
}