JavaScript Heatmap Mesh Chart - Editor
This example shows a simple use-case scenario for mesh-based Heatmaps.
Heatmaps are a powerful tool for visualizing magnitude in two dimensions. This example focuses on the IntensityMesh-type Heatmap Series. The difference between grid and mesh types is apparent in the naming; whereas grid is always a rectangular shape, the mesh type allows users to modify the geometry of the shape.
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,
// Make sure we're using the Mesh IntensitySeriesType
type: IntensitySeriesTypes.Mesh
})
The Mesh IntensitySeriesType has the same API that is available with the Grid IntensitySeriesType, but in addition it has the invalidateGeometryOnly method:
// Use invalidateGeometryOnly to edit the geometry of the heatmap and invalidate it.
// This can be done by supplying a Matrix of Points to the method.
heatmap.invalidateGeometryOnly( vertices: Matrix<Point> )
// Optionally, the geometry can be modified by supplying the method with a callback
// which modifies each point.
heatmap.invalidateGeometryOnly( vertices: UpdateGeometryCallback )