FORUMS

Select any forum below to ask question

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

September 1, 2015 at 5:28 am #9299

cProg

Naveen Venugopal,

thank you for your answer. It helps me to go further.

This is what my .csv file look like; there 65000 rows in the file; so it is pretty a huge file:

course_id,userid_DI,registered,viewed,explored,certified,final_cc_cname_DI,LoE_DI,YoB,gender,grade,start_time_DI,last_event_DI,nevents,ndays_act,nplay_video,nchapters,nforum_posts,roles,incomplete_flag
LavalX/CB22x/2013_Spring,MHxPC130442623,1,0,0,0,Canada,NA,NA,NA,0,2012-12-19,2013-11-17,,9,,,0,,1
LavalX/CS50x/2012,MHxPC130442623,1,1,0,0,United States,NA,NA,NA,0,2012-10-15,,,9,,1.0,0,,1
LavalX/CB22x/2013_Spring,MHxPC130275857,1,0,0,0,United States,NA,NA,NA,0,2013-02-08,2013-11-17,,16,,,0,,1

The .csv file has 20 fields (columns), and drawing all the charts on the same figure will not be readable. So is it possible with such a .csv file to select the columns I want to draw the chart? For example let us say that I want to draw the following charts:

-Daily number of registrations in LavalX courses from February 17 to May 29 (colums: userid_DI, registered, start_time_DI)
-The number and percentage of these registrants who become certified are also shown (colums: userid_DI, registered, certified).

How can I select the columns in brackets?

This is my code:

<!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:"HMXPC13_DI_v2_5-14-14.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[2]) });
				}
				drawChart(dataPoints);
			}
		}

		function drawChart(dataPoints)
		{
			var chart = new CanvasJS.Chart("chartContainer", 
			{
				  theme: "theme2", //theme1
				  title: 
				  {
						text: "Charts"
				  },

					axisX:
					{
						labelAngle: 90,
						labelWrap:true,
						labelAutoFit: false,
						labelFontSize: 15,
						labelMaxWidth: 200,
						labelFontColor: "black"
					},

					axisY:
					{
						labelAngle: 0,
						labelWrap:true,
						labelAutoFit: false,
						labelFontSize: 15,
						labelMaxWidth: 200,
						labelFontColor: "black"
					},

					animationEnabled: false,   // change to true
					zoomEnabled:true,
					data: [
					{
						// Change type to "bar", "splineArea", "area", "spline", "pie",etc.
						type: "line",
						//type: "column",
						indexLabelPlacement: "outside",
						indexLabelFontWeight: "bold",
						indexLabelFontColor: "black",
						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>Figure</b></div>
	</body>
</html><img src="http://ctrlv.in/629780" alt="My chart" />