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

March 30, 2015 at 7:07 pm #8498

Anjali

There are few issues in your code. So please correct the below mentioned points:

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

2) While rendering the chart you are using data object twice

data: [
{
indexLabelPlacement: “outside”,
indexLabelFontWeight: “bold”,
indexLabelFontColor: “black”,
data: [
{
type: “column”
dataPoints: dataPoints
}
]

Below is the code with the issues fixed.

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

	$.ajax({
		type: "GET",
		url:"data2.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 style="background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center">
<div id="chartContainer" style="height: 800px; width: 100%; background-image:url("fonto1.png"); background-repeat:no-repeat; background-position:center; background-size:100% 100%"></div>
<div style="text-align: center; color:red; font-size:25px;"><b>Τελευταία Ενημέρωση 27 Μαρ 2015 12:00</b></div>
</body>
</html>

__
Anjali