This example showcases simple usage of HeatmapScrollingGridSeries, a simple, yet incredibly powerful series type.

HeatmapScrollingGridSeries visualizes three dimensional data (X, Y, color) of large quantities.
It can easily handle data sets in million data points range even on low-end devices.
With large amounts of RAM even billions of data points can be visualized!

Heatmaps can be created in XY Charts:

// Add heatmap scrolling Grid Series to a XY Chart
chartXY.addHeatmapScrollingGridSeries({
    resolution: 100,
})

The example displays live speed of incoming data as data points per second, feel free to try higher data rates by altering dataSampleSize in the example code to see how much data HeatmapScrollingGridSeries can handle on your machine!

For reference, on a Lenovo Yoga (average office laptop with no GPU to speak of), there was no visible effort even with dataSampleSize: 5000 which means 150 000 incoming data points every single second.

What's equally impressive is that thanks to automatic data cleaning, this application can run indefinitely! Read more about automatic data cleaning with HeatmapScrollingGridSeries below.

When HeatmapScrollingGridSeries is created, there is only one property that has to be specified always:

resolution: amount of data values along non-scrolling dimension.

With just this configuration, a fully functional scrolling heatmap grid series capable of handling tens of millions data points is created.

The following optional properties can be used for tweaking heatmap behavior for exact application purposes:

start: Axis coordinate where heatmap grid begins.

step: The Axis offset between two heatmap cells.

scrollDimension: By default the series is configured to have fixed rows (Y) resolution and scroll indefinitely along columns (X). This can be flipped by specifying scrollDimension: rows.

HeatmapScrollingGridSeries receives data as append operation to push on top of previously pushed data.

Data is added using addIntensityValues method:

// Example syntax, append 2 samples to scrolling heatmap grid with resolution: 10
heatmap.addIntensityValues([
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
])

Automatic data cleaning is essential in streaming applications that run for long times or even indefinitely;

In LightningChart JS, this is configured with the setDataCleaning method;

// Example, configure automatic data cleaning.
heatmapGridSeries.setDataCleaning({
    // Out of view data can be lazily removed as long as total scrolling columns count remains over 1000.
    minDataPointCount: 1000,
})

Simple? - Yes.

Powerful? - Naturally.