Home › Forums › Chart Support › Graph a CSV file › Reply To: Graph a CSV file

April 7, 2015 at 10:38 pm #8600

StefanA

Hi,
You must excuse my lack of knowledge when it comes to these things. What is the console? This is the code I trying to use:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	$.ajax({
		type: "GET",
		url:"logg.csv",
		dataType: "text",
		success: function(data) {processData(data);}
	});

	function processData( allText ) {
		var allLinesArray = allText.split("\n");
		if( allLinesArray.length > 0 ){
			var dataPoints = [];
			for (var i = 0; i <= allLinesArray.length-1; i++) {
				var rowData = allLinesArray[i].split(",");
				dataPoints.push({ label:rowData[0], y:parseInt(rowData[1]) });
			}
			drawChart(dataPoints);
		}
	}

	function drawChart( dataPoints) {
		var chart = new CanvasJS.Chart("chartContainer", {
			title:{
				text: "ID"
			},
			axisX:{
				labelAngle: 0,
				labelWrap:true,
				labelAutoFit: false,
				labelFontSize: 15,
				labelMaxWidth: 200,
				labelFontColor: "black"
			},
			data: [
			{
				indexLabelPlacement: "outside",
				indexLabelFontWeight: "bold",
				indexLabelFontColor: "black",
				type: "column",
				dataPoints: dataPoints
			}
			]
		});
		chart.render();
	}
});
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div><center><b>This a test text</b></center>
</body>
</html>

My csv file called logg.csv looks like this:
2015-04-03,10:00,239
2015-04-03,12:00,304
2015-04-03,14:00,256
2015-04-03,16:00,301