Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • in reply to: Graph a CSV file #9299

    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" />
    in reply to: Graph a CSV file #9288

    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>
    in reply to: Graph a CSV file #9287

    Hallo,

    with such a .csv file content:

    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

    Display all the column at once in one graph will make the graph confuse. Is there a way to select 2 or 3 column to display on the X axis and one column on the Y axis without knowing the column index in advance?

Viewing 3 posts - 1 through 3 (of 3 total)