Slight problem With charts eating up memory

[Bram Bakker]

I am currently working on a website that is going to use google charts, or something alike, to get data from a broker and plot this data as as fast as it can. When I start the connection with the broker I see the data being plotted fine almost as fast as the broker has the data, so this works great.

For the broker we are using MQTT, the website front end where we are getting the data from this broker and plot it into a graph is Angular.

I have set up the basics like shown on the developers.google.com website. In the 

    this.client?.onMessage.subscribe((packet: any) => {

function I have a part that sends the correct data to a array before it calls this.drawchart again. The array contains a maximum of 50 values (I have a function that removes the first two if the array gets over 50 values). and after that this.drawchart again.

in the drawchart fucntion I do the following:

    const data = new google.visualization.DataTable();

    data.addColumn('string', 'val1');
    data.addColumn('number', 'val2');

    for (let i = 0; i < this.xyz.length; i += 2) {
         data.addRow([this.xyz[i].toString(), Number(this.xyz[i + 1])]);
    }

    const options = {
        'title': 'Speed',
    }

    const chart = new      google.visualization.LineChart(document.getElementById('chart_div'));
    chart.clearChart();
    chart.draw(data, options); 

The problem seems to be that for every value it draws in the graph it creates a new div just after the scripts but before the closing body tag. This is not where our chart_div is either. The div has the style of display none and position absolute. Inside is another div with these styles: background: infobackground; padding: 1px; border: 1px solid infotext; font-size: 12px; margin: 12px; font-family: Arial

That last div also contains the values that are displayed on the x axis.

If I hover on one of these values the div it added changes slightly, like removing the display none and setting some values like visibility, left and top. At this point it also has added the "goog-tooltip" class.

Is there a way that we can remove the created div when they go offscreen or even better stop the creation of those divs alltogether?

Thanks for reading, and hopefully you do know the solution. If more info is needed, please let me know