JavaScript Heatmap Chart

1import {
2    HeatmapColorMap,
3    HeatmapLegend,
4    MouseWheelZoomModifier,
5    NumericAxis,
6    SciChartSurface,
7    UniformHeatmapDataSeries,
8    UniformHeatmapRenderableSeries,
9    zeroArray2D,
10    ZoomExtentsModifier,
11    ZoomPanModifier,
12} from "scichart";
13import { appTheme } from "../../../theme";
14
15const MAX_SERIES = 100;
16const WIDTH = 300;
17const HEIGHT = 200;
18
19// Draws a Heatmap chart in real-time
20export const drawExample = async (rootElement: string | HTMLDivElement) => {
21    // Create a SciChartSurface
22    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
23        theme: appTheme.SciChartJsTheme,
24    });
25
26    // Add XAxis and YAxis
27    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
28    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
29
30    // Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
31    const initialZValues: number[][] = generateExampleData(WIDTH, HEIGHT, 200, 20, MAX_SERIES);
32    const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, {
33        xStart: 0,
34        xStep: 1,
35        yStart: 0,
36        yStep: 1,
37        zValues: initialZValues,
38    });
39
40    // Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
41    // HeatmapDataSeries which correspond to gradient stops at 0..1
42    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
43        dataSeries: heatmapDataSeries,
44        useLinearTextureFiltering: false,
45        colorMap: new HeatmapColorMap({
46            minimum: 0,
47            maximum: 200,
48            gradientStops: [
49                { offset: 1, color: appTheme.VividPink },
50                { offset: 0.9, color: appTheme.VividOrange },
51                { offset: 0.7, color: appTheme.MutedRed },
52                { offset: 0.5, color: appTheme.VividGreen },
53                { offset: 0.3, color: appTheme.VividSkyBlue },
54                { offset: 0.2, color: appTheme.Indigo },
55                { offset: 0, color: appTheme.DarkIndigo },
56            ],
57        }),
58    });
59
60    // Add heatmap to the chart
61    sciChartSurface.renderableSeries.add(heatmapSeries);
62
63    // Add interaction
64    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
65    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
66    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
67
68    // Functions for running the example in real-time
69    let timerId: NodeJS.Timeout;
70    let updateIndex: number = 0;
71
72    const updateChart = () => {
73        // Cycle through pre-generated data on timer tick
74        const newZValues = generateExampleData(WIDTH, HEIGHT, 200, updateIndex++, MAX_SERIES);
75        // Update the heatmap z-values
76        heatmapDataSeries.setZValues(newZValues);
77        if (updateIndex >= MAX_SERIES) {
78            updateIndex = 0;
79        }
80        timerId = setTimeout(updateChart, 20);
81    };
82
83    const startUpdate = () => {
84        if (!timerId) {
85            updateChart();
86        }
87    };
88
89    const stopUpdate = () => {
90        clearTimeout(timerId);
91        timerId = undefined;
92    };
93
94    const subscribeToRenderStats = (callback: (stats: { xSize: number; ySize: number; fps: number }) => void) => {
95        // Handle drawing/updating FPS
96        let lastRendered = Date.now();
97        sciChartSurface.rendered.subscribe(() => {
98            const currentTime = Date.now();
99            const timeDiffSeconds = (currentTime - lastRendered) / 1000;
100            lastRendered = currentTime;
101            const fps = 1 / timeDiffSeconds;
102            callback({
103                xSize: heatmapDataSeries.arrayWidth,
104                ySize: heatmapDataSeries.arrayHeight,
105                fps,
106            });
107        });
108    };
109
110    return { sciChartSurface, subscribeToRenderStats, controls: { startUpdate, stopUpdate } };
111};
112
113// Draws a Heatmap legend over the <div id={divHeatmapLegend}></div>
114export const drawHeatmapLegend = async (rootElement: string | HTMLDivElement) => {
115    const { heatmapLegend, wasmContext } = await HeatmapLegend.create(rootElement, {
116        theme: {
117            ...appTheme.SciChartJsTheme,
118            sciChartBackground: appTheme.DarkIndigo + "BB",
119            loadingAnimationBackground: appTheme.DarkIndigo + "BB",
120        },
121        yAxisOptions: {
122            isInnerAxis: true,
123            labelStyle: {
124                fontSize: 12,
125                color: appTheme.ForegroundColor,
126            },
127            axisBorder: {
128                borderRight: 1,
129                color: appTheme.ForegroundColor + "77",
130            },
131            majorTickLineStyle: {
132                color: appTheme.ForegroundColor,
133                tickSize: 6,
134                strokeThickness: 1,
135            },
136            minorTickLineStyle: {
137                color: appTheme.ForegroundColor,
138                tickSize: 3,
139                strokeThickness: 1,
140            },
141        },
142        colorMap: {
143            minimum: 0,
144            maximum: 200,
145            gradientStops: [
146                { offset: 1, color: appTheme.VividPink },
147                { offset: 0.9, color: appTheme.VividOrange },
148                { offset: 0.7, color: appTheme.MutedRed },
149                { offset: 0.5, color: appTheme.VividGreen },
150                { offset: 0.3, color: appTheme.VividSkyBlue },
151                { offset: 0.2, color: appTheme.Indigo },
152                { offset: 0, color: appTheme.DarkIndigo },
153            ],
154        },
155    });
156
157    return { sciChartSurface: heatmapLegend.innerSciChartSurface.sciChartSurface };
158};
159
160// This function generates data for the heatmap series example
161// because data-generation is not trivial, we generate once before the example starts
162// so you can see the speed & power of SciChart.js
163function generateExampleData(
164    width: number,
165    height: number,
166    cpMax: number,
167    index: number,
168    maxIndex: number
169): number[][] {
170    // Returns a 2-dimensional javascript array [height (y)] [width (x)] size
171    const zValues = zeroArray2D([height, width]);
172
173    // math.round but to X digits
174    function roundTo(number: number, digits: number) {
175        return number;
176        // return parseFloat(number.toFixed(digits));
177    }
178
179    const angle = roundTo(Math.PI * 2 * index, 3) / maxIndex;
180
181    // When appending data to a 2D Array for the heatmap, the order of appending (X,Y) does not matter
182    // but when accessing the zValues[][] array, we set data [y] then [x]
183    for (let y = 0; y < height; y++) {
184        for (let x = 0; x < width; x++) {
185            const v =
186                (1 + roundTo(Math.sin(x * 0.04 + angle), 3)) * 50 +
187                (1 + roundTo(Math.sin(y * 0.1 + angle), 3)) * 50 * (1 + roundTo(Math.sin(angle * 2), 3));
188            const cx = width / 2;
189            const cy = height / 2;
190            const r = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
191            const exp = Math.max(0, 1 - r * 0.008);
192            const zValue = v * exp + Math.random() * 10;
193            zValues[y][x] = zValue > cpMax ? cpMax : zValue;
194        }
195    }
196    return zValues;
197}
198