Real-time data visualization with WebSocket
Web based data visualization technologies are currently living an era of change, as more and more users require native web solutions instead of desktop applications, which by nature have access to more processing power.
This calls for developers — like me — to develop highly optimized web based data visualization tools that are powerful enough to accommodate for these migrating applications.
The following article will showcase one application, where traditional data visualization libraries are not enough and instead cutting edge hardware accelerated rendering is required.
WebSocket is the real-time communication method in web — it enjoys wide support and really doesn’t mind what kind of platform it is used on (browsers, Node.js servers, IoT devices, …).
I did a very quick (literally like 60 minutes of active programming work) proof of concept for using WebSocket to stream data from a Node.js server directly to a webpage running a data visualization with LightningChart JS, and the result is this dandy little dashboard with real-time moving data:
Now, the above result is old news — however, the part where this gets interesting is when we bump the amount of data input. With my average office PC I was able to stream 300 000 data points per second, and display it with stable 60 FPS.
Numbers are hard and humans don’t like them, so let’s see what that actually means;
Let’s say our usage case is monitoring factors like temperature and voltage in a scientific test context and distinguishing between individual milliseconds is required. In this case, we could monitor 300 data sources simultaneously without losing any detail between millisecond intervals.
That is impressive, and it seriously has not been possible until very recently.
LightningChart JS is a relatively new item in the web charts ecosystem, and just this Spring 2021 with our v3.0.0 release we broke through the previous world limits of line chart visualization in web.
This kind of application would otherwise be limited by how long the client takes to visualize the incoming data. In the real-world this means that compromises will have to be made on data resolution, or some other sub-optimal approach is taken — like going for “almost real-time”, where the data is refreshed every 10 seconds or so.
Lastly, please interpret the results with a grain of salt, since the data is coming from a locally running server — in real world applications there will be extra delay in transferring data.
I’m looking forward to seeing what real-world applications our users can create with hardware accelerated data visualization on the client side and WebSocket data streaming!
The related code can be found at my GitHub project.
