I am trying to create a live updated non-uniform heatmap with uniform xStep but non-uniform yStep. But I got color mapping problem when I tried to create the non-uniform heatmap. The color showing in the chart doesn’t map with the ColorMap value. Below are my codes:
Draw the non-uniform heatmap:
const SPECTROGRAM_HEIGHT = 256;
const SPECTROGRAM_WIDTH = 100;
const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");
const xAxis = new NumericAxis(wasmContext, {
axisTitle: "Frequency",
axisTitleStyle: {
fontSize: CHART_STYLE.AXIS_FONT_SIZE,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: CHART_STYLE.LABEL_FONT_SIZE,
fontFamily: "sans-serif"
},
labelFormat: ENumericFormat.Decimal,
labelPrecision: 6,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 6,
drawMajorBands: false,
});
const yAxis = new NumericAxis(wasmContext, {
axisTitle: "Time",
axisTitleStyle: {
fontSize: CHART_STYLE.AXIS_FONT_SIZE,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: CHART_STYLE.LABEL_FONT_SIZE,
fontFamily: "sans-serif"
},
drawMajorBands: false,
});
// Add XAxis and YAxis
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
const colorMap = new HeatmapColorMap({
minimum: -200,
maximum: -50,
gradientStops: [
{ offset: 1, color: COLORS.DARK_RED },
{ offset: 0.8, color: COLORS.RED },
{ offset: 0.6, color: COLORS.YELLOW },
{ offset: 0.5, color: COLORS.GREEN },
{ offset: 0.4, color: COLORS.BLUE },
{ offset: 0.01, color: COLORS.DARK_BLUE },
{ offset: 0, color: "Transparent" },
]
});
// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
zValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));
const heatmapSeries = new NonUniformHeatmapRenderableSeries(wasmContext, {
dataSeries: new NonUniformHeatmapDataSeries(wasmContext, { zValues: zValues, xCellOffsets: getHeatmapXOffset, yCellOffsets: getHeatmapYOffset }),
colorMap: colorMap,
useLinearTextureFiltering: true,
fillValuesOutOfRange: true,
});
// Add heatmap to the chart
sciChartSurface.renderableSeries.add(heatmapSeries);
I simply return the index for testing in the getHeatmapXOffset and getHeatmapYOffset functions:
const getHeatmapXOffset = (index) => {
return index;
};
const getHeatmapYOffset = (index) => {
return index;
};
I fill the zValues array with the minimum value -200, but the data displayed in the chart is COLORS.YELLOW. I don’t understand what’s wrong.
- Quyen Sy asked 2 weeks ago
- last active 2 weeks ago