Memory release when leaving an RGraph page


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by sh2sg on 11th February 2013
Hi,

I am currently using RGraph.Clear() and RGraph.ObjectRegistry.Clear() to free used resources before leaving chart page, it is important when drawing charts on mobile device. Is that good enough?

Thanks/
Posted by RGraph support on 11th February 2013
Hi,

There occassionally some global variables used by RGraph - these are normally prefixed by "__". You can use an inspection tool or search the code to find exactly what they are - though none of them are particularly large.

Richard, RGraph Support

1 Year Premium Support now reduced to £299:
   www.rgraph.net/support
Posted by sh2sg on 12th February 2013
This is my cleanup code, it is called before the chart screen is pop from screens stack

function chartUnload() {
     RGraph.ObjectRegistry.Clear();

     var elemsCanvas = document.getElementsByTagName("canvas");
     for (var i=0; i<elemsCanvas.length; i++) {
         if (typeof(elemsCanvas[i]) != 'undefined' && elemsCanvas[i].id.indexOf("__rgraph") == 0) {
             elemsCanvas[i].parentNode.removeChild(elemsCanvas[i]);
         }
     }
     var elemsDiv = document.getElementsByTagName("div");
     for (var i=0; i<elemsDiv.length; i++) {
         if (typeof(elemsDiv[i]) != 'undefined' && elemsDiv[i].id.indexOf("__rgraph") == 0) {
             elemsDiv[i].parentNode.removeChild(elemsDiv[i]);
         }
     }
}

The strange thing is, it couldn't remove all "__rgraph_xxx" DIVs, always left some behind, if I enter/exit the chart screen several times, Web Inspector Elements shows many unused DIVs like:

<div id="__rgraph_trace_animation_1369160__" style="left: 0px; top: 213px; width: 768px; height: 840px; position: absolute; overflow: hidden; background-color: rgba(0, 0, 0, 0); display: none;"></div>

<div id="__rgraph_trace_animation_1493006__" style="left: 0px; top: 213px; width: 768px; height: 840px; position: absolute; overflow: hidden; background-color: rgba(0, 0, 0, 0); display: none;"></div>

<div id="__rgraph_trace_animation_4339141__" style="left: 0px; top: 213px; width: 768px; height: 840px; position: absolute; overflow: hidden; background-color: rgba(0, 0, 0, 0); display: none;"></div>

<div id="__rgraph_trace_animation_543999__" style="left: 0px; top: 213px; width: 768px; height: 840px; position: absolute; overflow: hidden; background-color: rgba(0, 0, 0, 0); display: none;"></div>

<div id="__rgraph_trace_animation_3455033__" style="left: 0px; top: 213px; width: 768px; height: 840px; position: absolute; overflow: hidden; background-color: rgba(0, 0, 0, 0); display: none;"></div>

<div id="__rgraph_trace_animation_462830__" style="left: 0px; top: 213px; width: 768px; height: 840px; position: absolute; overflow: hidden; background-color: rgba(0, 0, 0, 0); display: none;"></div>

If I manuually run removeChild from Javascript console, those elements can be clearly removed, but why some failed within the code?

Posted by RGraph support on 12th February 2013
Hi,

> If I manuually run removeChild from Javascript console, those elements can be clearly removed, but why some failed within the code?

No idea - they're just standard DIV tags that have been created with script. You could try instead using the Trace2 effect - which doesn't add extra DIV tags but instead uses the clip() canvas function so you might find it more efficient.

Richard, RGraph Support

1 Year Premium Support now reduced to £299:
   www.rgraph.net/support
Posted by RGraph support on 12th February 2013
Hi,

Also - if you're not using the latest version then you might want to upgrade as there's an optimisation that involves DOM elements.

Richard, RGraph Support

1 Year Premium Support now reduced to £299:
   www.rgraph.net/support
Posted by sh2sg on 12th February 2013
Yes I am using the latest version.

I changed the cleanup code, now it looks OK.

function chartUnload() {
     var el = new Array();
     var elemsCanvas = document.getElementsByTagName("canvas");
     for (var i=0; i<elemsCanvas.length; i++) {
         if (typeof(elemsCanvas[i]) != 'undefined' && elemsCanvas[i].id.indexOf("__rgraph") == 0) {
             el.push(elemsCanvas[i].id);
         }
     }
     var elemsDiv = document.getElementsByTagName("div");
     for (var i=0; i<elemsDiv.length; i++) {
         if (typeof(elemsDiv[i]) != 'undefined' && elemsDiv[i].id.indexOf("__rgraph") == 0) {
             el.push(elemsDiv[i].id);
         }
     }

     for (var i = 0; i < el.length; i++) {
         var elNode = document.getElementById(el[i]);
         if (elNode.parentNode) {
             elNode.parentNode.removeChild(elNode);
         }
         else {
             document.body.removeChild(elNode);
         }
     }

     # What is 'M' used for?
     var firstDiv = document.getElementsByTagName("div")[0];
     if (firstDiv.innerHTML == 'M') {
         firstDiv.parentNode.removeChild(firstDiv);
     }

     scatterChart = null;
     data = [];
     labels = [];

     RGraph.ObjectRegistry.Clear();
}

So far all extra DIVs are removed (from what I can see in Web Inspector), chart/data objects are all freed too, but there is another strange thing is, if I repeat entering/drawing/exiting the chart page, it will crash at the 60th times...

I am using RGraph.Effects.Scatter.jQuery.Trace(scatterChart) to draw chart with a little bit animation. Scatter chart does not have Trace2 method right?
Posted by RGraph support on 12th February 2013
Hi,

> I am using RGraph.Effects.Scatter.jQuery.Trace(scatterChart) to draw chart with a
> little bit animation. Scatter chart does not have Trace2 method right?

Correct - it's just the line chart. You could try using a CSS based effect that doesn't redraw the chart - eg the Slide.In effects - or simply not using an effect at all and see if you get the same result.

Richard, RGraph Support

1 Year Premium Support now reduced to £299:
   www.rgraph.net/support
Posted by sh2sg on 12th February 2013
I tried to use scatterChart.Draw(), same crash happened after 60 repeats.

The crash happened only on mobile device, so I guess it is something memory related, since I mannually free data, the memory leak might come from canvas drawing, every chart used memory and it was not freed somehow, after 60 times it ate all of memory... it could be mobile OS WebKit engine's problem (not properly support canvas) or Javascript library problem I am not sure.

I was testing on BlackBerry 10 OS.

 

Add a reply

 




« Back to message list
RGraph on social media