The Contours Series Type
Contour maps or Contour-plots can be created using the UniformContoursRenderableSeries type.
The JavaScript Contours Chart Example can be found in the SciChart.Js Examples Suite on Github, or our live demo at demo.scichart.com
Create a Contours Plot
SciChart's Contour series is an extremely fast, lightweight chart types for rendering two dimensional data as a contour plot. The UniformContoursRenderableSeries type should be used in conjunction with a UniformHeatmapDataSeries when you simply want to specify a Step in the X,Y direction (each cell is the same size).
To create a Javascript Contours Chart with SciChart.js, use the following code:
| JavaScript Line Chart |
Copy Code
|
|---|---|
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { SciChartSurface } from "scichart";
import { UniformHeatmapDataSeries } from "scichart/Charting/Model/UniformHeatmapDataSeries";
import { UniformHeatmapRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/UniformHeatmapRenderableSeries";
import { HeatmapColorMap } from "scichart/Charting/Visuals/RenderableSeries/HeatmapColorMap";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { zeroArray2D } from "scichart/utils/zeroArray2D";
import {UniformContoursRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/UniformContoursRenderableSeries";
const divElementId = "chart";
const drawExample = async () => {
// Create a SciChartSurface with X,Y Axis
const {sciChartSurface, wasmContext} = await SciChartSurface.create(divElementId);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const heatmapWidth = 300;
const heatmapHeight = 200;
const colorPaletteMin = 0;
const colorPaletteMax = 200;
// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
const initialZValues: number[][] = createSeries( 3, heatmapWidth, heatmapHeight, colorPaletteMax);
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, initialZValues);
// Create a Contours RenderableSeries with the same data
const contourSeries = new UniformContoursRenderableSeries(wasmContext, {
dataSeries: heatmapDataSeries,
zMin: 20,
zMax: colorPaletteMax,
zStep: 20,
strokeThickness: 1,
stroke: "#C6E6FF",
});
// Add the contours to the chart
sciChartSurface.renderableSeries.add(contourSeries);
// Create a background heatmap series with the same data and add to the chart
const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
dataSeries: heatmapDataSeries,
useLinearTextureFiltering: false,
opacity: 0.8,
colorMap: new HeatmapColorMap({
minimum: colorPaletteMin,
maximum: colorPaletteMax,
gradientStops: [
{offset: 0, color: "#00008B"},
{offset: 0.2, color: "#6495ED"},
{offset: 0.4, color: "#006400"},
{offset: 0.6, color: "#7FFF00"},
{offset: 0.8, color: "#FFFF00"},
{offset: 1.0, color: "#FF0000"}
]
})
});
// Add heatmap to the chart
sciChartSurface.renderableSeries.add(heatmapSeries);
// Add interaction
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
return { sciChartSurface };
};
// This function generates data for the heatmap with contours series example
function createSeries(index: number, heatmapWidth: number, heatmapHeight: number, colorPaletteMax: number) {
const zValues = zeroArray2D([heatmapHeight, heatmapWidth]);
const angle = Math.PI * 2 * index / 30;
let smallValue = 0;
for (let x = 0; x < heatmapWidth; x++) {
for (let y = 0; y < heatmapHeight; y++) {
const v = (1 + Math.sin(x * 0.04 + angle)) * 50 +
(1 + Math.sin(y * 0.1 + angle)) * 50 * (1 + Math.sin(angle * 2));
const cx = heatmapWidth / 2;
const cy = heatmapHeight / 2;
const r = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
const exp = Math.max(0, 1 - r * 0.008);
const zValue = (v * exp);
zValues[y][x] = (zValue > colorPaletteMax) ? colorPaletteMax : zValue;
zValues[y][x] += smallValue;
}
smallValue += 0.001;
}
return zValues;
}
|
|
In the code above:
- We create an empty 2D array (number[][]) using the helper function zeroArray2D. This is filled with values in the generateData function
- A UniformHeatmapDataSeries instance is created with xStart, xStep, yStart, yStep values = 0, 1, 0, 1. This means the heatmap starts at X,Y = 0,0 and each cell is 1 on the axis.
- We set the contour Stroke and StrokeThickness.
- A UniformContoursRenderableSeries instance is created and added to the sciChartSurface.renderableSeries collection.
Updating Data in a Contour map
The contour map is supposed to be fully dynamic, enabling real-time graphics. The Contours Series however does not support append, insert, update, remove functions like other DataSeries do. You can however update the data and force a refresh simply by updating the data passed in. To do this, use the following code:
| Example Title |
Copy Code
|
|---|---|
import { UniformHeatmapDataSeries } from "scichart/Charting/Model/UniformHeatmapDataSeries";
import { zeroArray2D } from "scichart/utils/zeroArray2D";
// Create an empty 2D array of size height & width
const initialZValues: number[][] = zeroArray2D([height, width]);
// Create a Heatmap Data-series. Pass the heatValues as a number[][] to the UniformHeatmapDataSeries
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, initialZValues);
// ...
// Later, update the data
initialZValues[5][6] = 123.4;
// Tell SciChart the data has changed
heatmapDataSeries.notifyDataChanged()
// You can also load an entirely new array with the function UniformHeatmapDataSeries.setZValues
const newZValues: number[][];
heatmapDataSeries.setZValues(newZValues);
|
|
See Also