I have a simple need to display a horizontal heatmap based on values along the x-axis. So if value on x-axis is 1, color shown on the heatmap should be orange, if the next value is 2, red color bar appears to next the previous orange etc. Something like this (see attached graphic also):
Heatmap: [=orange=red=green]
values along x-axis: [22.05, 24.00, 30.00 ]
So the code I am trying is as follows:
export async function renderHeatMap(element)
{
const { sciChartSurface, wasmContext } = await SciChartSurface.create(element);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
var heatMapData = zeroArray2D([1, 5]);
heatMapData[0][0] = 22.05; //should appear as color1 in heatmap
heatMapData[0][1] = 24.00; //...
heatMapData[0][2] = 30.00; //should appear as color2 in heatmap
heatMapData[0][3] = 26.75;
heatMapData[0][4] = 30.00; //should appear as color3 in heatmap
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, heatMapData);
const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
dataSeries: heatmapDataSeries,
colorMap: new HeatmapColorMap({
minimum: 20, // min value in the zValues (data) to map to offset 0 in the colormap
maximum: 30, // max value in the zValues (data) to map to offset 1 in the colormap
gradientStops: [
{ offset: 0, color: "#00008B" },
{ offset: 0.3, color: "#7FFF00" },
{ offset: 0.7, color: "#FFFF00" },
{ offset: 1.0, color: "#FF0000" },
],
}),
});
sciChartSurface.renderableSeries.add(heatmapSeries);
}
But this only displays an empty grid. I don’t see a heatmap. Anyone can point out what may be wrong? Not even the axis is showing up correctly.
- Joel Roberts asked 2 years ago
- last active 3 months ago