FORUMS

Select any forum below to ask question

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

August 29, 2015 at 12:56 am #9288

cProg

Hallo,

my .csv file looks like that:

course_id,userid_DI,start_time_DI
LavalX/CB22x/2013_Spring,MHxPC130442623,2012-12-19

I want to draw a graph displaying the number of user (userid_DI column) per day (start_time_DI column) and for a given course (course_id column).

I’m getting a blank page with just the title “Basic Column Chart – CanvasJS”. What is going wrong please? Thanks.

This is the code I am running:

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

	$.ajax({
		type: "GET",
		url:"figure1.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[2], y:parseInt(rowData[1]) });
			}
			drawChart(dataPoints);
		}
	}

	var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2",
        title: {
            text: "Basic Column Chart – CanvasJS"
        },
        data: [
        {
            type: "column",
            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>Figure</b></div>
</body>
</html>