Render Chart from CSV Date-TIme Data - CanvasJS JavaScript Charts

Render Chart from CSV Date-TIme 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 dataPoints = [];
function getDataPointsFromCSV(csv) {
    var 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(",");           
            dataPoints.push({            
                x: new Date(points[1]), 
                y: parseFloat(points[2]),                
				    });
				}
    }
    return dataPoints;
}

//CSV Files is saved in https://codepen.io/vishwas/pen/ooGPOp.js
$.get("https://codepen.io/vishwas/pen/ooGPOp.js", function(data) {	
	var chart = new CanvasJS.Chart("chartContainer", {
		   title: {
	  	  	text: "Render Chart from CSV",
     	 },
       data: [{
       		xValueFormatString: "hh:mm:ss TT",
	     		type: "line",
	     		dataPoints: getDataPointsFromCSV(data)
			 }]
    	});
			chart.render();
	});