FORUMS

Select any forum below to ask question

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

April 8, 2015 at 7:50 pm #8604

Anjali

stefanA,

In every browser we have developer tool which you can open either from browser’s settings or using shortcut F12. In developer tools, console is available and you can see error there. But after looking into your code we know where it is going wrong. So please correct the below mention points :

1) You are not using jQuery file because of which $ is not define when you are trying to do $(document).ready. So please use jQuery before $(document).ready.

2) Both jquery.canvasjs.min.js (jQuery Plugin) and canvasjs.min.js (standalone) are CanvasJS files and you require only one of them at any time depending on whether you want to use it as a jQuery Plugin or as a standalone library. For this sample you’ll need standalone version (canvasjs.min.js)

Below is the code with the issues fixed

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-2.1.1.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[2]) });
			}
			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.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<center><b>This a test text</b></center>
</body>
</html>
  • This reply was modified 9 years ago by Anjali.
  • This reply was modified 9 years ago by Anjali.