Clearing the Flot canvas

[kaisean]

I have a simple question. I have a graph and a simple JS line

var myPlot = $.plot(graph, data);

and a function that changes the data.

I am using jQueryUI slider and on its "slide" event I call the
function that changes the data (according to the slider) and then
replots the graph. But the old series line on the graph remains
visible.

Is there any way to clear the canvas or should I just simply remove
the Flot from the DOM and then add it again? I guess it would go
slower that way. What is the right approach?

[Juan Mendes]

Lots of questions about this here. The simplest approach is to just call $.plot again. However, that approach can leak memory since the event handlers are left in the previous HTML that is discarded.

What do you mean by "I'm calling the function that changes the data"? Which function?

Because I had memory leak problems, I replot by doing the following:

flot.setData(series);

flot.setupGrid();

flot.draw();

However, some people have reported a few problems with this, I haven't seen your problem yet!

--Juan

--
Juan Mendes

[Ryley Breiddal]

Ole seems to think this is the best plan, see here:

http://code.google.com/p/flot/issues/detail?id=269#c17

[Phillip Howell]

When I've seen this problem in the past, it's been because I wasn't
properly changing the data I was passing to the plot() call. Check the
data that's actually going to flot, and I suspect you'll see that the
old (stale) series is still there in addition to the new series.

-pkh

[Kornelije Petak]

Just a simple custom function that populates the array of data. Some
mathematical calculations.

Something like:

function recalculateData(speed)

{

d1 = [];

d2 = [];

for(var i=0; i<100; i++)

{

d1.push([i, Math.sin(speed)*2]);

d2.push([i, Math.sin(2*speed)]);

[Kornelije Petak]

Yes, you were completely right. I wasn't clearing the array on the data
update.
Thanks for pointing this out.

K

[Claudio Passarella]

Hi,

I want to remake the question.

 

I have a web page that shows a plot graphic.

 

Next, I whant the user to change the type of plot.

 

I assume that I have to clear, clean or remove the canvas were the plot is drawn.

 

I have done this successfully in Google chrome with the following line code:

 

$("#placeholder").empty() ;

 

But, this does not work in IE8.

 

I appreciate some assistance.

[Ced]

It is not necessary to clear the plot before redrawing.

.empty() is a jQuery function, not flot.  (http://api.jquery.com/empty/)  I am not sure why it isn't working in IE8, jQuery normally handles cross-browser compatibility issues. 
Try using Developer Tools in IE8 (press F12) to find out why it's not working.