Managing Memory with jqplot


We use jqplot. A lot. Exclusively. It is a great lightweight library for producing pretty, mobile-friendly plots.

One issue we have discovered, however, is that when updating plots frequently (as we nearly always do), memory tends to leak. On larger plots, long periods, or frequent updates, this can spiral out of control and crash a browser. This tends to be especially problematic in Firefox.

The Problem

In a typical jqplot call, we generate a plot in a div with a command like:

$.jqplot('plot_div', plot_series_array, render_plot_options);

As it turns out, memory is allocated and never released here. Watching a system resource monitor reveals that the browser continues to increase memory usage.

The Solution

To solve this problem, we do two simple things:

  1. Put the plot into a global variable so it can be accessed at any time.
  2. Destroy the plot before recreating it.

In the section of our body (using jquerymobile, where all our js lives in the body), put our plot into our globaldata container:

var globodata = {netplot:''};

Now, each time we create the plot, in addition to emptying out our container div, we also use the destroy() method to release the memory.

if (globodata.netplot) {
globodata.netplot = $.jqplot('plot_div', plot_series_array, render_plot_options);

That’s all!

Leave a Reply

Your email address will not be published. Required fields are marked *