Line Graph Bugs

[sss04]

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!

[Sanjoy]

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.

[sss04]

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!

[Sanjoy]

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.

[sss04]

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!

[Sanjoy]

Hi,

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

Here is an similar example to follow.

[sss04]

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 8 years, 3 months ago by sss04.

[Vishwas R]

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

[sss04]

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!

[Vishwas R]

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