Home › Forums › Chart Support › Graph a CSV file

Graph a CSV file

Viewing 15 posts - 31 through 45 (of 62 total)
1 2 3 4 5
  • May 15, 2015 at 7:22 pm #8734

    sid

    Thanks Anjali , could you please also help me with.
    1. I need to know if there could be a way that graph is also (appended) say after every 2 minutes. Increment already plotted graph (and dont do whole work of plotting from beginning again). Basically it should store already plotted points and avoid replots.I hope I’m clear with my requirement. I basically need an append funtion that pushes newer data points from csv.

    2. My csv has multiple columns, say “n” , is there a way to push dataPoints from each column in a better way. Because currently i use 1 for loop for 1 column. The number of columns can be different, sometimes 2 or 3 or 10. This should be dynamic in some way.

    May 18, 2015 at 9:30 am #8792

    sid

    I am currently in need for a way to create graph on the fly. But using I canvasJS, I need to plot graphs from the beginning. Which mean I need all dataPoints at once. The below is my eg.

    data.csv at 9:00 am
    Time,Value
    9:00,10

    data.csv at 9:05 am
    Time, Value
    9:05,20

    data.csv at 9:10 am
    Time,Value
    9:10,30

    and so on….

    Currently I have to keep on saving each data point and plot it from starting. However, there should be a way to read this file and append it to the graph.
    Would highly appreciate if you could reply on the same. I hope my requirement is clear enough.

    June 26, 2015 at 3:42 pm #9127

    MDAR_Tech

    Hi

    I’m trying to do something just a little bit different.

    I followed the advice here and did manage to create a graph with 2 lines, from the same CSV file, but what I want to do is create a single graph with 2 (or more) lines from different CSV files.

    I’ve created a JSfiddle to show what we’re done, in which are links to what we have got to work on our server.

    http://jsfiddle.net/MDAR_Tech/1tgk509g/14/#share

    Could you tell us where we are going wrong?

    Many thanks in advance,

    Stuart

    June 30, 2015 at 7:54 pm #9132

    Anjali

    Hello,

    In your csv file you have dateTime values which you are assigning to label property. Instead you should be using dateTime values which can be done as shown below :

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

            var dataPoints1 = [];
            var dataPoints2 = [];

            $.ajax({
                type: "GET",
                url: "http://www.cuedup.biz/vgraphing/demoui/BT01.csv",
                dataType: "text",
                success: function (data) { processData1(data); }
            });

            function processData1(allText) {
                var allLinesArray = allText.split('\n');
                if (allLinesArray.length > 0) {
                    for (var i = 0; i <= allLinesArray.length - 2; i++) {
                        var rowData = allLinesArray[i].split(',');

                        var labelData = rowData[0].split(":");           
                        
                        if( labelData[2] === undefined )
                            labelData[2] = 0;

                        labelData[0] = parseInt(labelData[0]);
                        labelData[1] = parseInt(labelData[1]);
                        labelData[2] = parseInt(labelData[2]);
                            
                        if (rowData.length >= 2)                          
                            dataPoints1.push({ x: new Date(2012, 1, 1, labelData[0], labelData[1], labelData[2]), y: parseInt(rowData[1]) });
                    }
                }            
              requestTempCsv();
            }

           function requestTempCsv() {
                $.ajax({
                    type: "GET",
                    url: "http://www.cuedup.biz/vgraphing/demoui/GP01.csv",
                    dataType: "text",
                    success: function (data) { processData2(data); }
                });
           }

            function processData2(allText) {
                var allLinesArray = allText.split('\n');
                if (allLinesArray.length > 0) {

                    for (var i = 1; i <= allLinesArray.length - 1; i++) {
                        var rowData = allLinesArray[i].split(',');
                        var labelData = rowData[0].split(":");

                        if (labelData[2] === undefined)
                            labelData[2] = 0;

                        labelData[0] = parseInt(labelData[0]);
                        labelData[1] = parseInt(labelData[1]);
                        labelData[2] = parseInt(labelData[2]);

                        if (rowData.length >= 2)
                            dataPoints2.push({ x: new Date(2012, 1, 1, labelData[0], labelData[1], labelData[2]), y: parseInt(rowData[1]) });

                    }
                    drawChart(dataPoints1, dataPoints2);
                }
            }          

            function drawChart(dataPoints1, dataPoints2) {
                var chart = new CanvasJS.Chart("GP01", {
                    theme: "theme2",
                    title: {
                        text: "Master bedroom temperature and heating demand"
                    },                  
                    zoomEnabled: true,
                    data: [
                    {
                        type: "stepLine",
                        dataPoints: dataPoints1
                    },
                    {
                        type: "spline",
                        dataPoints: dataPoints2
                    }

                    ]
                });
                chart.render();
            }
        });

    </script>
    <script type="text/javascript" src="canvasjs.js"></script>
</head>
<body>
<div id="GP01" style="height: 300px; width:100%;"></div>
</body>
</html>

    __
    Anjali

    August 19, 2015 at 5:38 am #9251

    xcorex

    Hi guys,
    I’m using the #6371 code and my csv file is simple.

    2015/08/10,718.00
2015/08/13,708.00
2015/08/18,738.34

    I’m a linux user, and if I save the csv file with leafpad (notepad similar), I got a nice chart.
    https://i.imgur.com/iypLkfz.jpg

    But, when I save the csv with the vim editor, I got a terrible chart.
    http://i.imgur.com/zZXkPgf.jpg

    The problem is, this is a “line break” issue. I made a bash script to update the csv file and the problem persist. For example, the code below is sufficient to produce a wrong chart:
    $ echo "2015/10/10,777.33" > file.csv

    Is anyone smart enough to figure how to solve this? Thanks.

    August 25, 2015 at 7:45 pm #9270

    Naveen Venugopal

    xcorex,

    The issue seems to be an additional line at the end of file which has not been handled in #6371. You can handle this case by checking if a line is empty as shown below.

    for (var i = 0; i <= allLinesArray.length - 1; i++) {
	var rowData = allLinesArray[i].split(',');
	if(rowData && rowData.length > 1)
	  dataPoints.push({ label: rowData[0], y: parseInt(rowData[1]) });
}

    I’ll also update #6371 with this code

    —
    Naveen

    August 29, 2015 at 12:54 am #9287

    cProg

    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?

    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>
    August 31, 2015 at 4:42 pm #9293

    Naveen Venugopal

    cProg,

    There are few issues with the code.
    – Y value you are assigning is a String instead of a Number.
    – drawChart method is not defined
    – dataPoints is null Array

    What you can do is
    – Assign a Number as y-value.
    – Define a method drawChart to update dataPoints as show below.

    function drawChart(dataPoints){
	chart.options.data[0].dataPoints = dataPoints;
	chart.render();
}
    September 1, 2015 at 5:27 am #9298

    colopez

    I use #6371 and it’s working fine.

    My .csv looks like that:

    Name1,146,73972,2015/08/30/00
    Name1,148,23764,2015/08/30/00
    Name1,144,10564,2015/08/30/00
    Name2,218,1959,2015/08/30/00
    Name2,144,540,2015/08/30/00
    Name3,66,516,2015/08/30/00
    Name1,146,51782,2015/08/30/01
    Name1,148,22306,2015/08/30/01
    Name1,144,8910,2015/08/30/01
    Name2,218,1522,2015/08/30/01
    Name2,144,733,2015/08/30/01
    Name3,66,314,2015/08/30/01

    Each column means

    Name,error,quantity,date (YYYY/MM/DD/HH)

    I need:

    Put the date column in axisx
    Put the error column like legend in axisy2
    Put the name column like legend

    Thanks in advance for your help

    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" />
    September 1, 2015 at 12:36 pm #9302

    Naveen Venugopal

    colopez,

    Here is the jsfiddle for the same.

    September 2, 2015 at 12:38 pm #9310

    colopez

    Hi Naveen Venugopal,

    Thanks for you fast response and help.

    I did some changes in code (here jsfiddle) but I’m sure that I do some wrong.

    I need put date but it shows ESME4.

    Thanks in advance for your fast response and valuable help.

    September 4, 2015 at 11:28 am #9315

    Naveen Venugopal

    colopez,

    Here is the jsfiddle for the same.

    October 27, 2015 at 12:09 pm #9515

    rlabeda

    Hi,
    I´m trying to create a zoomable linechart with the ability to plot data from a csv file generated by google docs. Here is a link to a sample file:

    https://docs.google.com/spreadsheets/d/1aE_7GVc_EQx_xDXZ7Uz52oBdihW-8m5btJuhnJL_prU/pub?gid=0&single=true&output=csv

    Is this possible with canvas.js? I´m currently using google charts for this but I find the canvas.js look and feel much more appealing, not to mention the load speed.

    I am currently not a paying user of canvas.js so I don´t expect that you will spend time to give me a detailed code example but I was hoping for a push in the right direction.

    Kind Regards,
    R

Viewing 15 posts - 31 through 45 (of 62 total)
1 2 3 4 5

You must be logged in to reply to this topic.