Introduction to the JS heatmaps performance comparison

This benchmarking comparison of different JavaScript libraries’ heatmaps has been performed during early September 2021 and the main goal was to demonstrate the performance and data handling abilities of different commercial charting libraries’ heatmaps and the fastest JS heatmaps by LightningChart.

The wide use of heatmaps is to visualize 3-dimension by plotting two dimensions to a given X&Y location that’ll be color-coded based on a 3rd data dimension.

The performance comparison was carried out within 2D grid heatmaps that can be categorized in three different types, as well. These three types are StaticRefreshing, and Appending heatmaps.

Each type of heatmap has its particular performance metrics, for instance, that set a benchmark of success/failure amongst charting libraries. Full test open-source project can be accessed from GitHub.

Device Hardware & Operating System Specifications

JS heatmaps performance comparison technical requirements pc icon
Mid-Level Desktop PC

SoC/CPU

RAM

GPU

Screen Resolution

Screen Refresh Rate

Browser

AMD Ryzen 9 5900X processor

16.0 GB

Nvidia GeForce RTX 3080

2560 x 1440 resolution

165 Hz

Chrome & Mozilla Firefox

What did we measure? – Static Heatmaps 

For Static heatmaps, the dataset is loaded and rendered based on a colored look-up table.

Rendering

Obvious yet not granted metric that tells us simply if a heatmap is rendered at a given data dimension or amount. 

Load-up Speed

Measured in seconds, this is a metric that tells how many seconds, once initiated the rendering procedure, does the chart take to be fully visible to the user.

Static Heatmaps Performance Results

In the next image, the X-axis represents the tests performed for each of the competitors’ own charting libraries and LightningChart JS both version 3.0.0 and newest version 3.1.0, and the amount of data capable of handling by each library.

Whereas, the Y-axis represents the loa-up speed whilst the higher the place of the line in the plot, the faster the load-up speed.

Each line drawing represents the amount of data that each library is capable of handling, demonstrating by far, that the latest version of LightningChart JS v.3.1.0, can handle the largest amount of data.

LightningChart JS v.3.1.0 can handle 35,000 x 35,000 data points, that is, 1,225,000,000 data points.

JS heatmaps performance comparison - Static Heatmaps results

The test results were collected in the next table and each cell was colored based on their meaning for the specific parameter.

Green = Good. Yellow = satisfactory. Red = struggling

Within the next three images, it can be appreciated the comparison between the 6 different charting libraries for JavaScript with regard to Static Heatmaps

In the first image, at a heatmap size of 50 x 50 (2,500 data points), all libraries successfully render, however, at a different initial rendering delay time (measured in ms). LightningChart JS v.3.1 has an initial rendering delay of 150 ms.

The second image demonstrates what are the initial rendering delay times for the six libraries at 4, 9, and 16 million data points, respectively.

Ultimately, when rendering 16 million data points the only two libraries that remain in the game are both LightningChart JS v.3.1 and v.3.0 with initial rendering delay times of 510 ms and 14,950 ms, respectively.

Lastly, the last image shows, when pushed to the limits, how different JavaScript charting libraries respond to the data-intensive heatmap visualizations.

When visualizing 1,2 billion data points, LightnigChart v3.1 is the only charting library standing up, with an initial rendering delay of 28,400 ms.

JS heatmaps performance comparison - Static Heatmaps results1
JS heatmaps performance comparison - Static Heatmaps results2
JS heatmaps performance comparison - Static Heatmaps results3

What did we measure? – Refreshing & Appending Heatmaps 

For Static heatmaps, the dataset is loaded and rendered based on a colored look-up table.

Frames Per Second (FPS)

Obvious yet not granted metric that tells us simply if a heatmap is rendered at a given data dimension or amount. 

CPU usage %

Measured in seconds, this is a metric that tells how many seconds, once initiated the rendering procedure, does the chart take to be fully visible to the user.

Max. Amount of Data

Measured in seconds, this is a metric that tells how many seconds, once initiated the rendering procedure, does the chart take to be fully visible to the user.

Refreshing  Heatmaps Performance Results

The importance of this test relies on how fast the data can be refreshed, the faster the better.

The following image results (2) display how is the performance of LightningChart JS against other charting libraries with increasingly heavy real-time heatmap applications.

Bar Chart Result

The last bar chart indicates the Maximum heat map size where the library could function with satisfactory performance.

For example, LightningChart JS v.3.1 performed well until 3000×3000 (refresh) and 14000×14000 (append).

JS heatmaps performance comparison - Refreshing Heatmaps results1
JS heatmaps performance comparison - Refreshing Heatmaps results2

The test results for Refreshing Heatmaps are displayed in the next table and color-coded according to a specific parameter.

Green = Good. Yellow = satisfactory. Red = struggling

Within the next two images, the FPS and CPU are demonstrated as a result of a specified heatmap size.

At the beginning of the tests, all the involved charting libraries successfully render at different FPS and CPU usage, being LightningChart JS v3.1 and v.3.0 two of the three libraries with the highest FPS. 

When visualizing 100 x 100 (1 million) data points, both versions of LightningChart and competitor D are the only libraries with a great performance whilst at this point competitor c has failed the test.

Ultimately, when pushing the tests to the extreme and visualizing 10,000 x 10,000 (100 million) data points, the only library remaining in the game is LightningChart JS v.3.1 at its full capacity.

JS heatmaps performance comparison - Refreshing Heatmaps table results1
JS heatmaps performance comparison - Refreshing Heatmaps table results2

Appending  Heatmaps Performance Results

In these tests, the real-time data is streamed into the heatmap and displayed as fast as possible. 1 column is added between every refresh.

JS heatmaps performance comparison - Appending Heatmaps results1
JS heatmaps performance comparison - Appending Heatmaps results2

The test results for Appending Heatmaps are displayed in the next table and color-coded according to a specific parameter.

Green = Good. Yellow = satisfactory. Red = struggling

The third test of this performance comparison for JS libraries shows how appending heatmaps behave to a given amount of data points as well as their FPS and CPU usage.

For instance, at the beginning of the test for the appending heatmaps, all the libraries successfully render with the remarkable observation that competitors A and B have the lowest FPS.

When referring to the CPU usage, competitors A, B, and are almost at their full capacity of CPU resource consumption at the lowest number of data points in the test, proving their poor performance.

In the second picture, the test is pushed to the extreme when asking the JS libraries to visualize 14,000 x 14,000 (196 million) data points.

At this stage, the only remaining player is LightningChart JS v.3.1. with an outstanding 115 FPS and only 46% of CPU usage.

JS heatmaps performance comparison - Appending Heatmaps table results1
JS heatmaps performance comparison - Appending Heatmaps table results2

Fastest JS Heatmaps – Conclusion & Analysis

Different chart charting libraries have their own strengths and selling points, but LightningChart’s strength definitely is the exceptional rendering performance, allowing to build advanced and data-intensive applications, visualizing heat map charts in just about any type of application.

This performance comparison has been made with the intention of demonstrating the capabilities that the developer and consequently the end-user, can enjoy when implementing LightningChart JS library into their workflow. Learn more about how LightningChart JS can improve your data visualization application development project.

 

Remarkable observations:

Static Heatmaps

  • LightningChart JS v.3.1 can visualize 13,000 x 13,000 data points in only 5 seconds
  • LightningChart JS v.3.1 can visualize 700x more data than the average non-hardware-accelerated competitor
  • The LightningChart JS library can visualize 136x more data than the closest hardware-accelerated competitor.
  • When visualizing 500 x 500 data points, LightningChart v.3.1 is 10x faster than competitors’ charting libraries. 

Real-time Heatmaps (Refreshing & Appending)

  • LightningChart JS has an outstanding performance against competitors that have an extremely low performance even when visualizing as little as 25×25 data points. (Applications using these types of low-performance libraries would be useless and unable to perform in an interactive web document)
  • In Refreshing applications, LightningChart can perform with 378x larger data sets than the average competitor
  • Appending heatmaps can visualize up to 196 million data points with an outstanding 115 FPS and only a 46% CPU usage. 

For appending heatmaps, LightningChart JS is 835x more efficient than hardware-accelerated competitors’ charts.

For appending heatmaps, LightningChart JS is 13,800x more efficient than non-hardware accelerated competitors’ charts.

JS Heatmaps Performance Comparison Static Heatmap

Learn more about LightningChart JS, the world’s fastest charting library for JavaScript!