JavaScript server side data visualization with LightningChart JS

Even though JavaScript has a strong standing in both client and server software, when it comes to server side data visualization it seems that JavaScript chart libraries are rarely used, whereas with Python libraries it is an everyday usage case.

Based on a quick investigation on the subject, I believe that this is because while most popular JS chart libraries are easy to use on client side, they are unfortunately just a bit too difficult to justify using on the server side when there are so many Python tools for the same purpose with wide user base.

However, since the popularity of JavaScript as a server side technology is probably not going to disappear any time soon, I do think we’ll be seeing steadily increasing usage of JavaScript server side data visualization in the years to come.

In this story, we’ll see what kind of applications server side data visualization is suitable for and I’ll share my experience from creating a server side data visualization proof of concept with LightningChart JS.

By default web data visualization tools operate on the client side, spending processing resources in order to generate a visual on the web page that the user can see and possibly interact with.

“Server side data visualization” is a technique where the chart rendering is moved to a server and the result is downloaded and displayed on the web page as an image. Here are some general benefits:

+No heavy chart drawing algorithms with the users expense. Drawing charts can be heavy, which might destroy user experience especially with low end devices like laptops and phones.

+Less bandwidth usage. Very often visualization is done from data downloaded from a server (database) — if the data set in question is big, then downloading a single high resolution image of the rendered chart can be much more efficient.

+More processing power. The JavaScript browser run time is a quite limited sandbox especially when it comes to available memory and processing power. By performing your data visualization in a Node.js script for example, you have better access to multithreading and run-time memory management which can enable heavy visualizations that would be impossible or impractical on client side.

Naturally, server side data visualization comes with its demerits, too:

• Otherwise natively available user interactions of the chart library are not usable since the client only has a picture of a chart. If the application requires detailed chart interactions its best to stick to client side data visualization.
• Chart refresh rate is limited by upload speed; high resolution chart pictures are surprisingly large files, so constantly downloading an updated image is not very realistic. If the application requires a refresh rate of over 1 FPS (frames per second) then its best to draw the charts on the client side.

Previously I mentioned that most JS chart libraries don’t make it all too easy to use server side rendering. Usually it’s up to the user to setup a headless browser environment and somehow get it working with the chart library.

I had been wanting to test how difficult this process was for our very own LightningChart JS, and thankfully I can say that it was a very pleasant experience;

We manage our own official support package for running LightningChart JS in a headless environment (lcjs-headless), and the usage is exactly same as in a browser application — just without the browser :)

I wrote a test Node.js application which generates data, puts it into a LCJS heatmap grid series and renders the chart into a PNG file.

This is perfect for rendering really detailed heat maps with large data sets — for example in the picture above, the heat map contains over 6 million data points. Rendering that on an older mobile phone might require calling the fire department.

The LCJS headless package makes it easy to export the rendered chart into various formats like PNG or binary blobs to send over the internet. Additionally, the chart size can be set arbitrarily which lets you render really high resolution images, which can be great if you need zooming on the client side, or smaller images if size is an issue.

For those interested, you can find the code here.

Server side rendering is a really interesting concept and opens up another window of possibilities for data visualization especially when combined with hardware accelerated rendering.

I’ll probably be expanding on this topic in the future with more dynamic applications, like semi-real-time applications (1 refresh per second) or extremely heavy data visualizations (billions of data points).