Home forums Using CanvasJS Graph a CSV file

This topic contains 59 replies, has 23 voices, and was last updated by  Priyanka M S 12 months ago.

Viewing 15 posts - 16 through 30 (of 60 total)
  • Author
    Posts
  • #8669

    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

    #8673

    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

    #8675

    Hello,
    CSV file pasted from notepad

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

    #8676

    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,

    #8677

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

    regards,

    #8684

    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 :-)

    #8688

    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

    #8689

    Neal,

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


    Sunil Urs

    #8692

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

    #8714

    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 4 years, 3 months ago by  sid. Reason: adding more details
    • This reply was modified 4 years, 3 months ago by  sid.
    #8717

    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 4 years, 3 months ago by  sid.
    #8723

    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?

    #8729

    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

    #8731

    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)

    #8733

    sid,

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

    __
    Anjali

Viewing 15 posts - 16 through 30 (of 60 total)

You must be logged in to reply to this topic.