Memory-Leak using RGraph.Line in a one page besed App

Question

I actually using RGraph.line to show a curve in one of page 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 item to null but the GC is not collecting it. For drawing container, I'm using an OOP structure. Can someone please tell me how can i free the Rgraph.line? Thank you in advance

here the script file:

// data Set
let myData = [5,10,0,9,8,152,56,1,4,25,10]

let template_p1 = `<div id='curve'>
                    <canvas id="Curvecsv">[No canvas support]</canvas>
                   </div>`;

let template_p2 = `<div> this is a test page </div>`;

// variables
let selection = 1; //<-- page tracker
let drawable = null; // <-- oop object for drawing
let p1_loaded = false; // <-- load trackers
let p2_loaded =false;

//events
const installEvents = () =>
document.querySelectorAll('.item').forEach( link => 
    link.addEventListener('click', () => {
             selection = Number(link.getAttribute('id'));
        })
    )

//OOP container
class DrawableItem {
    constructor(name,id){
        let _name = null;
        this.set_name = name => _name = name;
        this.name = () => _name;

        let _id = null;
        this.set_id = id => _id = id;
        this.id = () => _id;

        let _line = null;
        this.draw = inputData => {
            RGraph.reset(document.getElementById(`Curvecsv`));
            if(!_line) {
                _line = new RGraph.Line({
                        id : `Curvecsv`,
                        data: [], 
                        options: {
                            titleColor: 'green',
                            backgroundGridBorder: true, 
                            shadow: false,
                            yaxisTickmarks: false,
                            yaxisTickmarksCount: null,
                            yaxisScale: false,
                            colors: ['#000']
                        }
                    });
                //fit the graph to parent div
                _line.canvas.style.width='100%';
                _line.canvas.style.height='100%';
                _line.canvas.width  = _line.canvas.offsetWidth ; 
                _line.canvas.height = _line.canvas.offsetHeight ;
            }

            _line.original_data[0] = inputData;
            _line.set('title', 'this is a test curve');
            _line.draw();

        }
        this.reset = () => _line = null;

        this.set_name(name);
        this.set_id(id);
    }
}


//Subroutines
const  sleep = ms => {
    let unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + ms) {}
}

const loadPage = () => {
    console.log(selection);
    if(selection === 2) {
        if(!p2_loaded) {
            drawable.reset();
            document.querySelector('.content').innerHTML = template_p2;
            p2_loaded = true; p1_loaded = false;
        }

    } else if(selection === 1){
        if(!p1_loaded) {
            document.querySelector('.content').innerHTML = template_p1;
            p2_loaded = false; p1_loaded = true;
        }
    }
    sleep(50);
    setTimeout(draw,500);
}

const draw = () => {
    if(selection === 1) {
        if(p1_loaded) {
            drawable.draw(myData);
        }
    }
    sleep(50);
    setTimeout(loadPage,500);
}

//Setup
const setup = () => {
    installEvents();

    drawable = new DrawableItem('test',1);
    loadPage();
}

//execution
setup();

and the html code:

<!-- index.html -->
<!-- ----------------------------------------------------------------- -->
<html><body>
    <header><nav><ul>  
        <li class="item" id ="1"><a class= "link"  href="#"> page 1 </a></li>
        <li class="item" id ="2"><a class= "link"  href="#"> page 2 </a></li>
    </ul></nav></header>
    <main>
        <div class="content" display="block"></div>
    </main>
</body>
    <script type="text/javascript" src="RGraph.common.core.js"></script>
    <script type="text/javascript" src="RGraph.line.js"></script>
    <script type="text/javascript" src="script.js"></script>
</html>
<!-- ----------------------------------------------------------------- -->
<!-- end of index.html -->
<!-- ----------------------------------------------------------------- -->

Memory-Leak using RGraph.Line in a one page besed App

0 Answers0