Exit Editor

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
Rows determine the vertical resolution, or density of each cell vertically.
columns
Columns determine the horizontal resolution, or density of each cell horizontally.
start
The position from where the heatmap will be rendered from.
end
The position to where the heatmap will be rendered to.
pixelate
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;
type
Which type of IntensitySeries should be used for the heatmap.
xAxis
The Horizontal Axis the heatmap should be attached to.
yAxis
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() )

© Arction Ltd 2009-2020. All rights reserved.