Heatmap

Overview

Chart that displays data via colorizers to create a heatmap view.

Creating the Heatmap Component

The Heatmap extends the Spark DataGrid class. Therefore it can be added to any container that implements IVisualElementContainer.

Using the Heatmap Component

The Heatmap functions like a DataGrid. However, the biggest difference is that rather than defining an array of "columns" like a vanilla DataGrid, instead a single "seriesColumn" is defined, and an indeterminate number of "dataColumns" are defined.

The seriesColumn is a basic GridColumn and is defined exactly as a normal DataGrid column. This column will serve as the description for the data within the row.

The dataColumns are a new custom column: the HeatmapDataColumn class. Since the HeatmapDataColumn extends GridColumn, use the same techniques to setup the column, but add an Ardisia Colorizer to the "colorizer" property. The color of the cells in the column will be determined by the colorizer.

Item Renderers

The "seriesColumn" item renderer is defined in the skin as the item renderer for the Flex Grid class.

The item renderer for the HeatmapDataColumns defaults to the ardisia.charts.heatmap.themes.itemRenderers.DefaultHeatmapDataColumnRenderer class. To customize, either change the DefaultHeatmapDataColumnRenderer directly, or set a different renderer factory via the "itemRenderer" property on the defined HeatmapDataColumns.

Accessibility

Fully supports the accessibility features of the Spark DataGrid.

Themes & Skinning

Skins are provided for the Spark, London, and Stockholm themes.

Example

See the Heatmap demo application for example code.

Back To Top