ArticleHere's a quick overview on how to start visualizing data at high-performance with the lcjs library
With already 21 versions out, we have come a long way from where we started. Now would be a good time to reflect on why is LightningChart JS revolutionary.
Let’s go back in time to a handful of years when there didn’t exist any general data visualization tool that utilized hardware acceleration. During this time, people had very limited resources to work with, and data sets with only as little as 10,000 items were quite troublesome to handle.
For reference, here is an 8-year-old Stack overflow thread that involves a developer struggling to visualize a data set with 10^5 points. This question is quite popular, having at this time >27k views, and expectedly, there’s a plethora of comments and answers trying to resolve the issue.
Some answers directly say that there are too many data points while others refer to some considerably complex-sounding data management patterns to optimize the visualization. Ultimately, even the accepted answer leads to stating that the amount of data points is simply too much for this particular visualization framework.
- Import LightningChart JS
- Write ~10 lines of code.
You now have a scatter chart with 100, 000 data points (10x more than what was asked) ready to roll in ~100 milliseconds with all possible lightning-fast interactions, zooming, panning, and cursors.
This chart will work in more than 99% of modern devices from personal computers to laptops, phones to even embedded systems.
Let’s look at another example, a 3-year-old Stack Overflow thread where someone is struggling with a zoomable heatmap chart. Here is a quote from the thread owner :
“Is there anything to make it faster/smoother or is it just too many points and that is the best I can have? I was wondering if there is some trick to make it lighter for the browser while keeping enhancements like tooltips.”
I will spoil the answers to this question, several people are suggesting different sorts of tricks involving hundreds of lines of code that will slightly improve the performance.
Some people suggest implementing their rendering framework with more efficient technologies – not very helpful!
The poor-performing heatmap in question had a data set with 360 x 75 data points coming to a total of 27 000 data points instead Lightning Chart JS hitting billions of data points.