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 data = [];

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

function addDataPoint(rowData){
		for(var j = 1; j < rowData.length; j++){
				var yData = (rowData[j] === "On") ? 1 : 0;
				var xData = new Date(rowData[0]);
				var dataFlag = false;
				for(var i=0;i<data.length;i++){
						if(data[i].legendText == "DataSeries"+j) {
						data[i].dataPoints.push({x:xData, y:yData});
						dataFlag = true;
						}
				}
				if(!dataFlag){
						data.push({
						type : "stepLine",
						legendText : "DataSeries"+j,
						dataPoints : [
								{ x: xData, y:yData }
						]
						});
				}
		}
}

function processData(allText) {
		var allLinesArray = allText.split('\n');
		if (allLinesArray.length > 0) {
        for (var i = 0; i <= allLinesArray.length - 1; i++) {
            var rowData = allLinesArray[i].split(',');            
            addDataPoint(rowData);
        }
				chart.render();
		}
}

var chart = new CanvasJS.Chart("chartContainer", {    
		title: {
				text: "Multi-Series Step Line Chart from CSV Data"
		},
		data: data
});