JavaScript Heatmap Chart With Contours Example

1import {
2    HeatmapColorMap,
3    HeatmapLegend,
4    MouseWheelZoomModifier,
5    NumericAxis,
6    SciChartSurface,
7    UniformContoursRenderableSeries,
8    UniformHeatmapDataSeries,
9    UniformHeatmapRenderableSeries,
10    zeroArray2D,
11    ZoomExtentsModifier,
12    ZoomPanModifier,
13} from "scichart";
14import { appTheme } from "../../../theme";
15
16export const drawExample = async (rootElement: string | HTMLDivElement) => {
17    // Create a SciChartSurface
18    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
19        theme: appTheme.SciChartJsTheme,
20    });
21
22    // Create an X & Y Axis
23    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
24    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
25
26    const heatmapWidth = 300;
27    const heatmapHeight = 200;
28
29    const colorPaletteMin = 0;
30    const colorPaletteMax = 200;
31
32    // Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
33    const initialZValues = generateExampleData(3, heatmapWidth, heatmapHeight, colorPaletteMax);
34    const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, {
35        zValues: initialZValues,
36        xStart: 0,
37        xStep: 1,
38        yStart: 0,
39        yStep: 1,
40    });
41
42    // Add the contours series and add to the chart
43    sciChartSurface.renderableSeries.add(
44        new UniformContoursRenderableSeries(wasmContext, {
45            dataSeries: heatmapDataSeries,
46            zMin: 20,
47            zMax: colorPaletteMax,
48            zStep: 20,
49            zOffset: 1,
50            strokeThickness: 1,
51            stroke: appTheme.PaleSkyBlue,
52        })
53    );
54
55    // Create a background heatmap series with the same data and add to the chart
56    sciChartSurface.renderableSeries.add(
57        new UniformHeatmapRenderableSeries(wasmContext, {
58            dataSeries: heatmapDataSeries,
59            useLinearTextureFiltering: false,
60            opacity: 0.5,
61            colorMap: new HeatmapColorMap({
62                minimum: colorPaletteMin,
63                maximum: colorPaletteMax,
64                gradientStops: [
65                    { offset: 1, color: appTheme.VividPink },
66                    { offset: 0.9, color: appTheme.VividOrange },
67                    { offset: 0.7, color: appTheme.MutedRed },
68                    { offset: 0.5, color: appTheme.VividGreen },
69                    { offset: 0.3, color: appTheme.VividSkyBlue },
70                    { offset: 0.2, color: appTheme.Indigo },
71                    { offset: 0, color: appTheme.DarkIndigo },
72                ],
73            }),
74        })
75    );
76
77    // Add interaction
78    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
79    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
80    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
81
82    return { sciChartSurface };
83};
84
85export const drawHeatmapLegend = async (rootElement: string | HTMLDivElement) => {
86    const { heatmapLegend, wasmContext } = await HeatmapLegend.create(rootElement, {
87        theme: {
88            ...appTheme.SciChartJsTheme,
89            sciChartBackground: appTheme.DarkIndigo + "BB",
90            loadingAnimationBackground: appTheme.DarkIndigo + "BB",
91        },
92        yAxisOptions: {
93            isInnerAxis: true,
94            labelStyle: {
95                fontSize: 12,
96                color: appTheme.ForegroundColor,
97            },
98            axisBorder: {
99                borderRight: 1,
100                color: appTheme.ForegroundColor + "77",
101            },
102            majorTickLineStyle: {
103                color: appTheme.ForegroundColor,
104                tickSize: 6,
105                strokeThickness: 1,
106            },
107            minorTickLineStyle: {
108                color: appTheme.ForegroundColor,
109                tickSize: 3,
110                strokeThickness: 1,
111            },
112        },
113        colorMap: {
114            minimum: 0,
115            maximum: 200,
116            gradientStops: [
117                { offset: 1, color: appTheme.VividPink },
118                { offset: 0.9, color: appTheme.VividOrange },
119                { offset: 0.7, color: appTheme.MutedRed },
120                { offset: 0.5, color: appTheme.VividGreen },
121                { offset: 0.3, color: appTheme.VividSkyBlue },
122                { offset: 0.2, color: appTheme.Indigo },
123                { offset: 0, color: appTheme.DarkIndigo },
124            ],
125        },
126    });
127
128    return { sciChartSurface: heatmapLegend.innerSciChartSurface.sciChartSurface };
129};
130
131// This function generates data for the heatmap with contours series example
132function generateExampleData(index: number, heatmapWidth: number, heatmapHeight: number, colorPaletteMax: number) {
133    const zValues = zeroArray2D([heatmapHeight, heatmapWidth]);
134
135    const angle = (Math.PI * 2 * index) / 30;
136    let smallValue = 0;
137    for (let x = 0; x < heatmapWidth; x++) {
138        for (let y = 0; y < heatmapHeight; y++) {
139            const v =
140                (1 + Math.sin(x * 0.04 + angle)) * 50 +
141                (1 + Math.sin(y * 0.1 + angle)) * 50 * (1 + Math.sin(angle * 2));
142            const cx = heatmapWidth / 2;
143            const cy = heatmapHeight / 2;
144            const r = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
145            const exp = Math.max(0, 1 - r * 0.008);
146            const zValue = v * exp;
147            zValues[y][x] = zValue > colorPaletteMax ? colorPaletteMax : zValue;
148            zValues[y][x] += smallValue;
149        }
150
151        smallValue += 0.001;
152    }
153
154    return zValues;
155}
156