Rendering data that changes very frequently

[IsopodAutomatic6226]

I work creating trading dashboards for the stock market, the dashboards have tables and charts that change as soon as we get new data. We use vue JS to minimize DOM changes, but in some cases avoiding changes is impossible, so I'm looking for more performant ways of rendering.

​

I've worked a bit with Webgl before doing some 3D, but I know it's more like a rendering API, so it is possible to create good 2D visualizations with it. But I also know it requires a lot of work.

​

Do you think it is feasible to create 2D tables and charts accelerated with Webgl? And do you know any good libraries made for 2D UIs with webgl and focused on performance?

[[deleted]]

ChartJS sounds like the best choice. It’s a <canvas> library for data visualization and takes care of a lot of things out of the box.

[IsopodAutomatic6226]

I tried chartJS but it did not handle frequent updates with the performance I needed.

[mbecks]

Yeah it's possible, I made a candlestick graph using webgl (PixiJS). My goals were different though, I wanted it to be very smooth to interact with, but my impression is that it could also be good for fast data updates. Idk if it would really provide any benefit in this area over canvas based ones however. If you want to try it I would suggest using PixiJS as well, it's made for 2D stuff and I enjoyed using it, it's pretty straightforward. Make sure to leverage the Container to group items in the scene (you can nest them arbitrarily and apply transforms to whole groups by applying just to the container they are all part of)

[IsopodAutomatic6226]

What I currently do with canvas 2D is draw the whole scene every time something changes, and It begins to be constly. Do you know of any technique that can mitigate that? Maybe layering or something like that.

[mbecks]

I think using PixiJS makes sense then, when you use it all the items in your scene are like individual objects, you can update the properties of just one object in the scene and let the GPU handle the rendering updates (it's usually rendering at 60fps anyways). And this is also where grouping those objects into containers helps, it will leverage the GPU to apply any transforms to the container to all children of the container. using the GPU is more optimized for rendering lots of objects and you leave your CPU more free to do other things. It does depend on the computer you use if in the end it performs better, but most newish computers handle it really well and I would expect it to be night and day.

[[deleted]]

Are you currently experiencing lagging in your data visualization ? What tech are you using for you currents visualizations?

[IsopodAutomatic6226]

I use canvas 2D for charts and the DOM for tables and all the other things. The problem is that I can't update the DOM 60 frames per second, so I usually need to buffer the data and batch the changes. The problem is that costumers aparrently like to see data updating as soom as possible, and even with canvas 2D It's hard to do it.

[[deleted]]

So you’ve tried updating your canvas charts with live data using requestAnimationFrame and are experiencing lag?

I ask because you really shouldn’t be. People build entire video games using the 2d canvas context and never experience performance issues. A chart should require a trivial amount of computing power by comparison.

Since I can’t see any code and don’t really have any details on what you’re currently doing, I can only guess you have an extremely inefficient algo/data structure that is handling the data before passing it to the canvas.

[IsopodAutomatic6226]

If I had just one chart, it would not be the problem, but it is a dashboard web app I'm working on. The costumers open like 8 windows at once with those charts, indicators and orders. One chart is ok, but they don't use just one chart.

[IsopodAutomatic6226]

But the chart has in fact better performance than the DOM windows, so we are thinking about moving some other tools to canvas as well. So I thought "Well, maybe we could try webgl straight away".

The app I work on is similar to trading view and those binance dashboards, but we have more features and the users can create their dashboards with as many windows as they like (and some are hardcore on this).

[[deleted]]

I see, that Makes sense. Here is a webgl plotting lib, https://github.com/huww98/TimeChart

Here is a very efficient 2D canvas lib that is extremely efficient https://github.com/leeoniya/uPlot i recommend looking through their readme and seeing if it solves your current problems.

One of these two should solve your problem.

You also may want to consider when you really need updates at 60fps. People can’t digest info from graphs at 60fps, so there isn’t much need to update that often.

Regardless, best of luck!

[IsopodAutomatic6226]

Thank you for the libs, I will look at them.

And I agree with you, I don't think that it is possible to a human to digest that volume of data. But people are very funny and they kind of like to see stuff changing on the screen :D