CSV and CanvasJS

canvasjs

by jwkeller

HTML

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>csv-update test</title>
<meta name="description" >
<meta charset="UTF-8">

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
	<div id="chartContainer" style="height: 300px; width: 600px;"></div>
</body>
</html>

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
	    animationEnabled: true,
	    exportEnabled: true,
		title:{
			text: "foobar"
		},
		axisY: {
			title: "Threads",
			includeZero: false
		},
		data: [{
			type: "column",
			toolTipContent: "{y} threads",
			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({
					label: points[0],
					y: parseFloat(points[1])
				});
		}		
		return dataPoints;
	}
 
	$.get("foobar.csv", function(data){

		chart.options.data[0].dataPoints = getDataPointsFromCSV(data);
		chart.render();
		updateChart();
	});

	function updateChart() {
	   $.get("foobar.csv", function(data) {
		   
			var dataPoints = csvLines = points = [];
			csvLines = data.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({
						label: points[0],
						y: parseFloat(points[1])          
					});
          
          points = csvLines[i].split(",");
					chart.options.data[0].dataPoints.shift({
						label: points[0],
						y: parseFloat(points[1]) 
					});      
                    
				}
			chart.render();
			setTimeout(function(){updateChart()}, 1000);
		});
	}

}