Javascript chart leaks memory

[jhaxo]

How can I implement a cross browser javascript strip chart that does not leak memory. I have treid several off the shelf and home made charts. the basic test is to leave them running, redrawing the chart once per second while using control panel to observe memory loss. I have a little button to turn off the redraw as a sanity check to verify that memory isn't leaking all by itself.

I have tried plotkit. I have tried drawing on a canvas tag. I am now trying svg in xhtml. And I have tried flotr and Emprise EJSChart and the only chart I have found that did not leak with the same code feeding it data was a vml based chart , which sadly doesnt seem to work under firefox even ff 3.

My application needs to stay up and running indefinitley. it would use ajax to get data from a web server monitoring some hw. Is this even possible or is the only real answer a regular application? My company has a flash based web app and it also leaks. I am not familiar with its internals.


If I turn off charting my gauges and data and text based readouts are fine and leakless.

[gits]

there are some things that might be considered with memory leaks across browsers and i assume that there are different problems with different browsers ... so at first: do you really need a cross-browser-script or could you use a specific target browser to optimize the script for? it seems to be a specialized app ... should it be a public application?

probably the best way would be to generate a chart image at the server and reload it through an ajax call since all javascript-operations to create a chart heavily involves dom-operations - like node creation, replacement etc. may be we could start to create a script that leaks less memory ... for the time now ... you could try to reload the page you currently have after some time to cleanup the mess and let it run again for a while ...

usually all dom-nodes that are created during the chart-creation should be either recycled for the next operation or their references should be set to null explicitly when they are not needed anymore ...

kind regards

[jhaxo]

there are some things that might be considered with memory leaks across browsers and i assume that there are different problems with different browsers ... so at first: do you really need a cross-browser-script or could you use a specific target browser to optimize the script for? it seems to be a specialized app ... should it be a public application?

probably the best way would be to generate a chart image at the server and reload it through an ajax call since all javascript-operations to create a chart heavily involves dom-operations - like node creation, replacement etc. may be we could start to create a script that leaks less memory ... for the time now ... you could try to reload the page you currently have after some time to cleanup the mess and let it run again for a while ...

usually all dom-nodes that are created during the chart-creation should be either recycled for the next operation or their references should be set to null explicitly when they are not needed anymore ...

kind regards

I took the easy part of your idea first and its helping. I have run my modified canvas and svg app's for 10 hours so far. The memory fluctuations are small enough now that its hard to know if its due to windows 'noise'. I will keep the test going this week.

For my canvas based chart I used to re-create the canvas and context variable with each redraw and I tried recycling the context by first invoking
ctx.clearRect(0 ,0,width,height ); and then redrawing. It is possible I have no leak at all with the canvas cart, I will wait out the results.

For my SVG application I am doing something similar, for each redraw something like this:
parent.replaceC hild(nupath,pat h);
where the path is my beloved chart line.
I still create a new path for each cycle and altho its hard to measure it seems there is a small leak of about 10k in 10*60*60 cycles

I will follow up as I get more test results.