Destroying jQuery Flot Graph

Question

What is the correct way to destroy a jQuery flot graph in a way that will clean up all event handlers and not result in a memory leak?

It seems flot is leaving behind some zombies (aka Detached Dom Trees)

Spinoza

$.plot('#yourFlotDiv', {}, {}); read it somewhere. Don't exactly remember where. – Kenley

Answer 1

If you read the API docs, there is a shutdown method that cleans up for you

shutdown()

Cleans up any event handlers Flot has currently registered. This
is used internally.

eg.

var plot = $.plot($("#yourDiv"), options)

plot.shutdown()

Arie

Answer 2

For people who come here in the future, there is now a destroy function that calls shutdown and removes the canvas element. It's undocumented in the API for some reason, but is available in the code:

var flot = $("#FlotDiv").data('plot')
if (flot) // If it's destroyed, then data('plot') will be undefined
    flot.destroy();

Sensuous

Answer 3

if you want to remove event handlers then try jquery off method.

for to clear flot graph. you can empty the div.

$('#yourFlotDiv').empty();

Podium

What arguments should be passed to jQuery.off()? – Spinoza

@Spinoza $("#yourFlotDiv").off("yourEventHandlerTORemove"); for more info see this api.jquery.com/off – Podium

I am talking about making sure flot cleans up all of its event handlers and deletes all of the DOM elements that it created. – Spinoza

Answer 4

To remove the flot Graph

var placeholder = $("#FlotDiv");
placeholder.unbind(); //Remove a previously-attached event handler from the elements.
placeholder.empty();

Also in case you wish to unbind specific event this is the way to go :

$( "#foo").unbind( "click" );

For more info check this out.

Waterloo