Hey!
I’m trying to visualize large datasets that are updated live on my computer. The data is a 2D array and is updated at roughly 50Hz. Is there a way to update a graph without reloading the page everytime? I guess a simple callback from an Intervall obj. is out of question here.
Hope you can help me out! Great forum 
- thanks!
Hi @mybrainleaks, welcome to the forum! What is the size of your 2D array and where do you read it from (an image string, a file, etc/)? Is it a Heatmap trace? Are you running the app on a local computer or hosted on the Internet? I don’t think you’ll be able to update the graph at 50 Hz :-). A callback using an interval should be the way to go, but with an interval large enough so that it’s not shorter than the time needed to update the figure.
Hey Emanuelle, thanks for your suggestions.
So the array size is 512x512 and might be even 1024/2048 depending on external hardware connected to a remote computer. Data is shared in a network via a key-value database.
I tried to implement this sort of streaming using server-side callbacks with an interval component as event soruce; the plot itself is a heatmapgl and supposed to render faster compared to ordinary heatmaps - this works so far but is yet kinda slow. I get a frame rate of roughly 10Hz, maybe the tiniest bit more.
I’m currently thinking of writing my own React component, that takes data as http requests - rendering should then be merely on the client side, right?
So you need to update a heat map rendering of all 1024 x 2048 = 2.1 million values 50 times per second? I am also not sure this is possible. Have you timed the heat map rendering itself?
Nah Emil, I guess I will limit it to 512x512px images in general. 50 times per second would be perfect, right now i can get to roughly… 10 updates maybe. Re-rendering the heatmapgl is triggered by an interval component with an ordinary app.callback(Out…, [In…])…
And I’m on board with you here - right now I do not think it is possible. Do you know how this is done in other, “pure JavaScript” based web apps?
I’m pleasantly surprised that you can reach 10 Hz… by the way, 10 Hz is roughly the persistence of vision so is there a real interest to reach higher frequencies? It would be interesting now to see where the bottleneck is: is it the network transfer of the array data. or the rendering time? You can take a look at the network and performance tabs of your browser’s developer tools to try to answer this question.
Well, definitely a bit lower Emmanuelle - if I’m not entirely mistaken old TVs have 50Hz for two half frames, so 25Hz per full frame transfer rate… so speeding it up the tiniest bit would be perfect for my liking. Of course i can skip some frames though, so 50Hz might not be entirely necessary, at least not for the image.
I’ll debug a bit and post some performance data once I have a bit of spare time!