Heatmap Grid

This example shows a simple use-case scenario for grid-based Heatmaps.

The data used for the heatmap is created using the WaterdropGenerator function in the example code.

Heatmaps are a powerful tool for visualizing magnitude in two dimensions. This example focuses on the IntensityGrid-type Heatmap Series.

Heatmaps can be created in XY Charts:

// Add heatmap Series to a XY Chart
chartXY.addHeatmapSeries( {
    rows:       verticalResolution,
    columns:    horizontalResolution,
    start:      { x: 0, y: 0 },
    end:        { x: 100, y: 100 },
    pixelate:   false

Heatmap Series options

Let's open up the options a bit more:

Rows determine the vertical resolution, or density of each cell vertically.
Columns determine the horizontal resolution, or density of each cell horizontally.
The position from where the heatmap will be rendered from.
The position to where the heatmap will be rendered to.
If true, each cell will be rendered as-is; this will create a pixelated look for the heatmap.
If false, the cells will be interpolated to give the heatmap a cleaner look.

The rows and columns control the amount of data present in the heatmap; think of them as cells in a matrix.

The start and end position determine the size of the heatmap in the XY Chart's scale.

There are additional optional options available;
Which type of IntensitySeries should be used for the heatmap.
The Horizontal Axis the heatmap should be attached to.
The Vertical Axis the heatmap should be attached to.

Heatmap series usage

Now that we have the heatmap specified, it's time to fill it with data.

// Use invalidateValuesOnly to add data to the series and invalidate it.
// The data should be given as a matrix of numbers.
heatmap.invalidateValuesOnly( Matrix<number> )
// Optionally, it's also possible to go through each cell in the heatmap
// and fill the data using a callback
heatmap.invalidateValuesOnly( UpdateValueCallBack )
// Set a fillStyle to use for coloring the heatmap.
// Using a combination of PalettedFill and LUT allows coloring each cell
// depending on the data added.
heatmap.setFillStyle( new PalettedFill( { LUT } )

It is also possible to instead assign specific colors to each cell in the heatmap.

// Use invalidateColorsOnly to add color to the series and invalidate it.
// The colors should be given as a matrix of colors.
heatmap.invalidateColorsOnly( Matrix<Color> )
// Optionally, a callback can be used to change color of each cell.
heatmap.invalidateColorsOnly( UpdateColorCallback )
// Set the fillStyle of the heatmap to IndividualPointFill, so each cell
// can be properly colored.
heatmap.setFillStyle( new IndividualPointFill() )