Graph a CSV file

[StefanA]

This is really annoying. The csv chart seems so work for everybody but me. I must be really stupid. All i get is a blank web page. Can someone please help me figure it out?

screencap of html source
> screencap of csv
screencap of folder

[Sunil Urs]

Hi Stefan,

Data structure of your CSV file is not clear from the picture. Can you please open the file in notepad and paste the content that you see.

—
Sunil Urs

[StefanA]

Hello,
CSV file pasted from notepad

11/06/2014,5992
12/06/2014,6341
13/06/2014,6653

[costelcotae]

Hi,

I have a question about parsing csv file. My csv file looks like

260;259;0.02;0;1;25.51;43.3;20.88;69.58
265;243;0.09;1;0;29.51;48.3;25.88;71.58
265;243;0.09;1;0;29.51;48.3;25.88;71.58
262;249;0.06;0;1;35.51;40.3;20.88;65.58

how i can parse the file and row number to be X value and Y values parsed from coresponding row?
this values are from some sensors and i want to make a graph with this values

regards,

[costelcotae]

i managed to parse my csv file and make a graph.
problem fixed

regards,

[Neal]

Preface – I copied and pasted the first answer and just changed the url:”data.csv” and nothing else. I did do something different and that was to put it in a separate file from my index.php file for my own sanity. (I don’t like having javascript in the same file as my html. Might just be me, but still)

Anyways, back to the point of this post :-)

I was doing some testing with this method of graphing a .csv and checked the console. Well apparently, the javascript I copied and pasted threw an error in the console. The error is : Uncaught TypeError: Cannot read property ‘getContext’ of null

As I really am noobish in Javascript, what is this supposed to mean? Is it nothing? Normally errors in programming are nothing, but still worries me :-)

[Sunil Urs]

StefanA,

The code that we have provided should work fine for your CSV file. I think problem is that you are not running the program via a Web Server. Because you are running the program directly from the file system, ajax request get blocked due to browser security settings. So please run the same via a browser like Apache, Nginx, IIS, etc and it should work fine.

—
Sunil Urs

[Sunil Urs]

Neal,

Can you please post the code and csv file here so that we can have a look?

—
Sunil Urs

[StefanA]

Ok, I will try to run the code via a server. Thanks for your help.
// Stefan

[sid]

Thanks for such an awesome utility!.
I’m pretty new to web dev, but canvasjs has been a great motivation.
I have my data.csv regularly being updated (appended)

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.

2. Suppose my csv has more than 2 columns (say 10), can I plot multi line graphs by specifying column names. eg. to find correlation between 2 or more value. Line colour legeds can be taken from column names (headers)

Moving forward I would like my web page to have an option to show/hide lines. eg. by default it shows lines for all columns. (This is just an additional utility which may come handy,can be ignored for now)

AS far as my point 2 of multiple line graph is concerned, I think, we need to just send other column values in the below code. dataPoints for all columns should be passed instead.

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

Thanks is advance.

• This reply was modified 9 years, 6 months ago by sid. Reason: adding more details
• This reply was modified 9 years, 6 months ago by sid.

[sid]

for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(',');
                                dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
                                dataPoints.push({label:rowData[0],y:parseInt(rowData[2])});
                               //dosnot plot 2 lines,plots values but not in correct way
                        }

• This reply was modified 9 years, 6 months ago by sid.

[sid]

        function processData(allText) {
                var allLinesArray = allText.split('\n');
                if(allLinesArray.length>0){
                        var dataPoints = [];
                        var dataPoints2= [];
                        for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(',');
                                dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
                        }
                        for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(',');
                                dataPoints2.push({label:rowData[0],y:parseInt(rowData[2])});
                        }
                        drawChart(dataPoints,dataPoints2);
                        

                }
        }

        function drawChart( dataPoints,dataPoints2) {
                var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                title:{
                        text: "Gati Chart"
                },
                zoomEnabled:true,
                data: [
                {
                        type: "line",
                        dataPoints: dataPoints
                },
                
                
                {
                        type: "line",
                        dataPoints: dataPoints2
                }]
                });

                chart.render();
        }

I am tring to plot 2 line graphs, using the above code I get 2 line blue for dataPoints and red for daatPoints2.But I am getting a straight line for dataPoints and correct line graph for dataPoints2, can you suggest whats wrong with my code? On hovering the blue line, it gives me correct values in tooltip but why is it coming as a straight line?

[Anjali]

sid,

Can you please create a jsfiddle which reproduce the issue. While creating JSFiddle you can hard code your CSV file as a string and parse the same.

__
Anjali

[sid]

Anjali, thanks for your response.
Sorry for my last post, datapoints were fine but scale was very far scattered. dataPoints were in 10^6 and datapoints2 were in 10^9, which is why both were not being shown properly. (@admin:last post can be deleted). However, is there a way to automatically scale line graphs. eg. say 1 line graph has values in 10^2 and other line graph has values in 10^8 . Is there a way to show both lines on 1 graph (using scaling for y axis)

[Anjali]

sid,

You can do the same by using different y-axis for both the lines as shown in this example.

__
Anjali