SciChart Android 2D Charts API > 2D Chart Types > The Uniform Heatmap Series Type
The Uniform Heatmap Series Type

Heatmap Series can be created using the FastUniformHeatmapRenderableSeries type.

Examples for the Impulse Series can be found in the SciChart Android Examples Suite

Heatmap Series Features

The FastUniformHeatmapRenderableSeries class is designed to display 2D array of data. Every item in the array is represented as a colored rectangle - a cell. The color depends on corresponding item’s ZValue.

All ZValues should fall into the range determined by the Minimum, Maximum values (they may go beyond it though). These values can be set via the setMinimum(), setMaximum() methods.

Also, FastUniformHeatmapRenderableSeries requires a ColorMap to be set. The ColorMap determines how a gradient color transition occurs. It uses the LinearGradient shader internally, so please refer to the Android documentation for more info. The ColorMap can be applied via the setColorMap() method.

Optionally, a PaletteProvider can be applied to a FastUniformHeatmapRenderableSeries to change the color for particular cells. Scroll down this article to the last section for more info.

Show Values for a Heatmap

Additionally, FastUniformHeatmapRenderableSeries allows to configure a heatmap to show ZValues in its cells. This option can be enabled via the setDrawTextInCell() method. Labels can be styled via the setCellTextStyle() method. It requires a FontStyle object to be passed in. More details about Brushes and Pens used in SciChart can be found in the articles under the Styling and Theming section.

Add a Legend onto a Heatmap Chart

There is a special view designed to be used in tandem with FastUniformHeatmapRenderableSeries called SciChartHeatmapColourMap. It is not required by a Heatmap and is fully optional. It can be placed anywhere on the layout.

Similarly to the FastUniformHeatmapRenderableSeries, the SciChartHeatmapColourMap type allows to set the Minimum, Maximum values and apply a ColorMap. All these can be assigned via the corresponding methods: setMinimum()setMaximum(), setColorMap(). The numeric labels can be formatted by apply TextFormatting to them via the setTextFormat() method.

Additionally, there is the setOrientation() method to specify whether the legend appears Horizontal or Vertical.

Create a Heatmap Series

To create a FastUniformHeatmapRenderableSeries instance, use the following code:

// Assume a surface has been created and configured somewhere
ISciChartSurface surface;

// Create a Heatmap Series
FastUniformHeatmapRenderableSeries heatmapRenderableSeries = new FastUniformHeatmapRenderableSeries<>();

// Specify ZValue range
heatmapRenderableSeries.setMinimum(0);
heatmapRenderableSeries.setMaximum(200);

// Create a ColorMap
ColorMap colorMap = new ColorMap(new int[]{DarkBlue, CornflowerBlue, DarkGreen, Chartreuse, Yellow, Red}, new float[]{0f, 0.2f, 0.4f, 0.6f, 0.8f, 1});

// Apply the ColorMap
 heatmapRenderableSeries.setColorMap(colorMap);

// Create a ColorMap Legend
// It requires to be added to the Layout somewhere
SciChartHeatmapColourMap colorMapView = new SciChartHeatmapColourMap(getActivity());

// Configure the ColorMap Legend
colorMapView.setColorMap(heatmapRenderableSeries.getColorMap());
colorMapView.setMinimum(heatmapRenderableSeries.getMinimum());
colorMapView.setMaximum(heatmapRenderableSeries.getMaximum());

// Create a DataSeries for the Heatmap
UniformHeatmapDataSeries<Integer, Integer, Double> dataSeries = new UniformHeatmapDataSeries<>(Integer.class, Integer.class, Double.class, WIDTH, HEIGHT);
// Assume some data has been added to the dataSeries here
// dataSeries.updateZValues(Double[] ZValues);

// Assign the dataSeries to the Heatmap
heatmapRenderableSeries.setDataSeries(dataSeries);

// Add the Heatmap to the RenderableSeriesCollection of the surface
Collections.addAll(surface.getRenderableSeries(), heatmapRenderableSeries);

The same can be achieved using Chart Builders:

// Assume a surface has been created and configured somewhere
ISciChartSurface surface;

// Create and configure a Heatmap Series
FastUniformHeatmapRenderableSeries heatmapRenderableSeries = sciChartBuilder.newUniformHeatmap()
        .withColorMap(new ColorMap(new int[]{DarkBlue, CornflowerBlue, DarkGreen, Chartreuse, Yellow, Red}, new float[]{0f, 0.2f, 0.4f, 0.6f, 0.8f, 1}))
        .withMinimum(0)
        .withMaximum(200)
        .withDataSeries(dataSeries)
        .build();

// Create a ColorMap Legend
// It requires to be added to the Layout somewhere
SciChartHeatmapColourMap colorMapView = new SciChartHeatmapColourMap(getActivity());

// Configure the ColorMap Legend
colorMapView.setColorMap(heatmapRenderableSeries.getColorMap());
colorMapView.setMinimum(heatmapRenderableSeries.getMinimum());
colorMapView.setMaximum(heatmapRenderableSeries.getMaximum());

// Create a DataSeries for the Heatmap
UniformHeatmapDataSeries<Integer, Integer, Double> dataSeries = new UniformHeatmapDataSeries<>(Integer.class, Integer.class, Double.class, WIDTH, HEIGHT);
// Assume some data has been added to the dataSeries here
// dataSeries.updateZValues(Double[] ZValues);

// Assign the dataSeries to the Heatmap
heatmapRenderableSeries.setDataSeries(dataSeries);

// Add the Heatmap to the RenderableSeriesCollection of the surface
Collections.addAll(surface.getRenderableSeries(), heatmapRenderableSeries);

The code above creates a Heatmap with a ColorMap that has gradient transitions between five colors and a SciChartHeatmapColourMap Legend for it.

Note:

In multi axis scenarios, a series has to be assigned to particular X and Y axes. This can be done passing the axes IDs to the setXAxisId(), setYAxisId() methods of the series.

Change Heatmap Colors With PaletteProviders

 

This can be achieved with the PaletteProvider API. It allows to change the color for any data point of a FastUniformHeatmapRenderableSeries object. To do this, a custom IUniformHeatmapPaletteProvider has to be passed in the setPaletteProvider() method:

// Create a PaletteProvider instance and assign it to the chart series
IPaletteProvider paletteProvider = new CustomUniformHeatMapProvider();
heatmapSeries.setPaletteProvider(paletteProvider);

Please refer to the PaletteProvider API article to learn more about this.

See Also