RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 16 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Get the latest version of RGraph (version 6.20, 1st December 2024) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
Posted by Mohamed at 15:00 on Friday 4th June 2021[link]
Hello RGraph team,
I actually using RGraph.line to show a curve in one of pages in a web app. And every thing is good as far.
the switch between pages is based on literal template. The problem occures when the page is left, the Rgraph.line remains in Heap. I tried setting the line element to null but the GC is not collecting it
here the script file and the html simplefied and snipped together
Can please tell me how can i free the Rgraph.line? It's very critical in my usecase.
Thank you in advance.
Mohamed
Posted by Richard at 15:48 on Friday 4th June 2021[link]
Well the memory "leak" is probably a reference to the object lying around. For JavaScripts GC to free up an objects memory there would need to be no more references to it.
Two such references I can think of are the __object__ property that's added to the canvas (you can get rid of that by setting: line.canvas.__object__ = null) and perhaps the RGraph.cache variable which is used to cache the drawing of background grids. You can get rid of that by setting: RGraph.cache = null.
Richard
Posted by Mohamed at 16:27 on Friday 4th June 2021[link]
Hello Richard,
thank you for you fast answer.
I extended my reset function with your recomandation as follow:
this.reset = () => {
_line.canvas.__object__ = null;
_line.cache = null;
_line = null;
};
but still not working sadly.
Is there a function in RGraph, that complete detachs a draw element? like the RGraph.clear and RGraph.reset?
Best Regards
Mohamed
Posted by Richard at 18:20 on Friday 4th June 2021[link]
There's no such function I'm afraid.
When you create the chart object, try using window._line instead of just _line. This would make it use a global - but hopefully just a single global. eg:
if(!window._line) { // Check if the _line global variable exists
window._line = new RGraph.Line({
id : `Curvecsv`,
// ...
Richard
Posted by Mohamed at 15:48 on Thursday 10th June 2021[link]
Hello Richard,
thank you for your answer.
So at first storing the _line object in window is antipatern in my case that I have to use OOP (actually the solution I'm working on it uses a multitude of graphs, which will be loaded dynamically that's why for each needed curve, a drawItem will be generated).
That's why to have more control of the memory management, I tooke recourse of modifying the RGraph Lib Structure by changing the Module IIFE "(function (win,doc,undefined){ ...})(windows,document)"
in RGraph.common.core.js to a regular function declaration as:
function load_RGraph(win,doc,undefined) {....};
load_RGraph(window,document);
by this way I can delete the RGraph object from window completely and reload it when it will be needed (by click on page 1 for example), through:
RGraph = null;
And the same for the Line element in Rgraph.line.js
"(function (conf){...})()" to a function declaration like
const RGraph_line = function (conf) {...};
and each time it needed I set the RGraph.line expression after loading RGraph
RGraph.Line = RGraph_line;
It's not a perfect way, because the RGraph Module adds some listnener to window too, wich remains a leak in actual case, but is not critical.
Kind Regards
Mohamed
Posted by Richard at 16:56 on Friday 11th June 2021[link]
> So at first storing the _line object in window is antipatern in my
> case that I have to use OOP (actually the solution I'm working on
> it uses a multitude of graphs, which will be loaded dynamically
> that's why for each needed curve, a drawItem will be generated).
There's a Registry object in RGraph that you could use if you prefer. It's used inside RGraph for a few settings, but you could always use it for your own things too if you wish.
RGraph.Registry.set('myObject1', _line);
And then to retrieve it again you'd call:
var _line = RGraph.Registry.get('myObject1');
if (!_line) {
// Create the line chart...
// And put it in the registry
RGraph.Registry.set('myObject1', _line);
}