Flot memory leak while associating two graphs using panning

Question

we are rendering two graphs with flot, which share the same x-axis. we plot them with:

plot1 = $.plot($("#placeholderGraph1"), p1_data, d1_options);
plot2 = $.plot($("#placeholderGraph2"), p2_data, d2_options);

we need to make sure that panning and zooming on one graph also redraws the other and vice versa. we achieve this with the following binding:

$("#placeholderGraph1").bind("plotpan", adjustGraph1Axes);
$("#placeholderGraph2").bind("plotpan", adjustGraph2Axes);

If we don't add these last two statements, there is no memory leak and browser(all the browsers) drops memory whenever it redraws. But with the above binding, browser never drops memory and it piles up towards hundreds of megabytes.

Apart from this, we also update individual legends with mouse movements.

we tried following approaches for the memory leak, but none worked:
1. making plot1 and plot2 global variables and explicitly deleting the contents
2. Deleting the graph divs and recreating
3. Explicitly unbinding events before rebinding
4. Plotting an empty graph before redrawing

Any other approaches to associating two graphs or dumping memory?

Answer 1

Issue might be with the Flot Plugin: jquery.flot.navigate.js.

I suggest you to upgrade to JQuery to Version-1.5 along with the flot plugin mentioned above.

You may like to visit this link (refer: ChangeLog towards your right side):

https://code.google.com/p/flot/source/browse/trunk/jquery.flot.navigate.js?r=317

Answer 2

I may have had a similar issue synchronizing the selection on an overview plot and panning/zooming in the main plot; my issue was that the event handler for one plot was triggering the event for the other plot and the execution of the corresponding event handler was triggering the event for the first plot, which caused the original event handler to execute...leading to an infinite loop.

In other words, are you sure your issue isn't that the execution of adjustGraph1Axes isn't triggering the plotpan event for graph 2 which causes the execution of adjustGraph2Axes unintentionally, which trigger the plotpan for graph 1 and causes adjustGraph1Axes to execute and so on? My post along with the solution is located here: Flot event for range updates in response to panning/zooming .

I used a flag to solve the ping-pong issue between the two event handlers and my solution is at < http://jsfiddle.net/apandit/nu2rr58h/12/ >.