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" />
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>
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?