Home forums Using CanvasJS Line Graph Bugs

This topic contains 9 replies, has 3 voices, and was last updated by  Vishwas R 4 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #11629

    sss04
    Member

    Hi Canvas.js team!

    I’ve been using Canvas.js for the past week, and I’ve been getting some bugs. I’ve shown them in this video for you’re convenience. https://youtu.be/Bjt7EeqvYvA

    I’ve shown below some of my code. The first is the code that runs when the user checks a box.

    var Bonnie=function() {var  dataPoints=[];
    var dataSeries = { type: "line", showinLegend: true, legendText:"Bonnie" };d3.csv('Bonnie.csv',
    function(results){results.forEach(function(d){d.time=parseFloat(d.Day)
    +(parseFloat(d.Hour)/24)+((parseFloat(d.Minute)/60)/24);});
    results.forEach(function 
    (d){dataPoints.push({x:d.time,y:parseFloat(d.Height)});});
    dataSeries.dataPoints=dataPoints;
    data.push(dataSeries);
    });};

    The second is run everytime the user hits submit.

    var charter = function () {
    	 var chart = new CanvasJS.Chart("chartContainer",
    			    {
    			      zoomEnabled: true,
    			      title:{
    			        text: "Heights!"
    			      },
    			      legend:{
    			    	    horizontalAlign: "right",
    			    	    verticalAlign: "center" 
    			        },
    			      animationEnabled: true,
    			      axisX:{
    			    	title: "Time (days)",
    			        labelAngle: 30
    			      },
    			      
    			      axisY :{
    			    	title: "Height (m)",  
    			        includeZero:true
    			      },
    			      
    			      data: data
    			      
    			    });
    
    chart.render();
    };

    Thanks! I really want these bugs to be fixed!

    #11634

    Sanjoy
    Moderator

    Hi,

    In your case chart is not displayed initially because chart.render is called with data as an empty array. Calling chart.render after initializing data with dataPoints should solve the issue. If still the problem persists creating an jsfiddle will help us to understand the problem better and help you out.

    And here you have a typo, instead of showinLegend it will be showInLegend.

    #11635

    sss04
    Member

    The showInLegend works, but the resizing of the graph problem does not.

    I’ve created a jsfiddle and I’ve attached a couple of datasets.

    Abby.csv
    Kyle.csv

    The attached Datasets mean that Abby and Kyle will work.

    Thanks!

    #11636

    Sanjoy
    Moderator

    We have gone through the code snippet, once you are updating the data you should call render method on chart. In the library with resizing of window, chart automatically calls render method to fit into resized window. So, you could view updated chart once you resize the window.

    Here you have to modify the following line
    if(document.getElementById("Veruca").checked&&(atelesoff)){Veruca();}
    as if(document.getElementById("Veruca").checked&&(atelesoff)){Veruca(); chart.render();}

    Doing the same with all the check-boxes (line no. 379-401 of fiddle) should fix your problem. As shown as video if you are using submit button it will be efficient to call render method inside submit button click handler.

    **Note:- At any point of time if you want to show the chart with updated options/data, call render method on chart.

    #11643

    sss04
    Member

    Hi Sanjoy
    It doesn’t work…. I updated my code and the fiddle , and I’m still getting the problem where the Title of the graph and “Canvas.js” shows up, but the graph doesn’t until I change the screen size. I don’t know what to do… I love Canvas.js, just don’t love this bug.

    Thanks! Please help!

    #11648

    Sanjoy
    Moderator

    Hi,

    Your fiddle is not working because you haven’t linked to jQuery, CanvasJS, CSV file/cdn.

    Here is an similar example to follow.

    #11651

    sss04
    Member

    I’m so lost…..

    I’ve linked the canvas.js now, and the csv files are linked above, not sure how to link them. Sorry for all the trouble, would really help with a quick fix.

    https://jsfiddle.net/9beg8w3e/

    • This reply was modified 4 months ago by  sss04.
    #11669

    Vishwas R
    Keymaster

    d3.csv is an asynchronous method, where the code inside the callback function will run when the data is loaded whereas code outside the callback function will run immediately after the request is made, when the data is not yet available. Because of this the chart was rendered with no data but title and legend. When you resize, chart will be re-rendered, data would be updated from csv by then.

    d3.csv execution:

    first();
    d3.csv("path/to/file.csv", function(rows) {
      third();
    });
    second();

    For more info refer stackoverflow.

    Here is your working code. (Note:CSV and function related to checkbox-Abby has been updated and working fine, kindly follow same for other checkboxes aswell. proj4.js file has been saved and linked from codepen).

    #11671

    sss04
    Member

    Hey Vishwas!

    It’s really starting to make sense now, thank you for the clarification. In your Note, however, you said the CSV and the function relating to the checkbox has been updated. I will update it for the others as well, but in the jsfiddle you’ve linked, there is no JavaScript. Could you add the JavaScript with the “working code”?

    Thanks for all the help!

    #11673

    Vishwas R
    Keymaster

    Please check the updated jsfiddle with working script(which you have named it as proj4.js).

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

You must be logged in to reply to this topic.