SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Contours Series Type
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
  • 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.
  • 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