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





-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/6bebdf06-e279-4484-8831-7dbf15802a36n%40googlegroups.com.

Reply via email to