How can I make sure my Google chart data gets removed from memory in Javascript?

Question

I am using Google Charts for a Dashboard web app and need to put in the functionality to periodically refresh the page.

I set up some quick code that basically resubmits the form whenever a JS timer is finished.

    function timerTick() {
        window.setTimeout("timerTick()", 15000);
        document.forms["input"].submit();
    }  

I have a form that makes ajax calls to get the data in Json format.

I then go through the data and populate my google chart objects.

The problem is, the browser uses more and more memory, and eventually crashes.

I've tried making all the chart variables global, and setting them to null before I fetch new data, but that helped only a small amount.

I've also tried the following:

        $("chart_div").empty();
        $("chart_div2").empty();
        $("chart_table").empty();

Just to clear all the chart data from the DOM, but it looks like garbage collections just won't work without a page refresh.

Any help identifying possible memory hogs or ways to get Garbage collection work more immediately would be awesome.

Preemptive thanks.

Answer 1

Call the clearChart method on each visualization - that should clean up the HTML and event handlers for each chart. Then you can null out the chart objects and they should be garbage collected.

The Visualization API has had memory leaks before, though they were supposedly fixed in a recent update. If this doesn't solve your leak problem, you should file a bug report on it here: code.google.com/p/google-visualization-api-issues/issues/list

Moving this here so it can be marked as the answer.

Answered in comments by asgallant Dec 7 at 0:36