Pre loader

Failed to update the zValues size of UniformHeatmapDataSeries in heatmap.

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
1
0

I am implementing a heatmap. The data size of the heatmap would be changed. When the data size changed, I will replace the zValues of the UniformHeatmapDataSeries with an updated array. But it doesn’t work for me. The heatmap data cannot be plotted after I updated the zValues array. Below are my codes to create the heatmap and update the zValues array.

Draw heatmap:

    const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");
    let xAxisNumberRange = new NumberRange(minFreq/maxFreq);

    spectrogram_xAxis.current = 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"
        },
        visibleRange: xAxisNumberRange,
        visibleRangeLimit: xAxisNumberRange,
        zoomExtentsRange: xAxisNumberRange,
        labelFormat: ENumericFormat.Decimal,
        labelPrecision: 2,
        cursorLabelFormat: ENumericFormat.Decimal,
        cursorLabelPrecision: 2,
        drawMajorBands: false,
    });

    // Add XAxis and YAxis
    sciChartSurface.xAxes.add(spectrogram_xAxis.current);
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));

    // Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
    spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));
    heatmapDataSeries.current = new UniformHeatmapDataSeries(wasmContext, {
        xStart: 0,
        xStep: 1,
        yStart: 0,
        yStep: 1,
        zValues: spectrogramZValues.current
    });

    colorMap.current = new HeatmapColorMap({
        minimum: -200,
        maximum: -50,
        gradientStops: gradientStopsArr.current
    });

    // Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
    // HeatmapDataSeries which correspond to gradient stops at 0..1
    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: heatmapDataSeries.current,
        useLinearTextureFiltering: true,
        isSorted: true, 
        isEvenlySpaced: true, 
        containsNaN: false,
        colorMap: colorMap.current
    });

    // Add heatmap to the chart
    sciChartSurface.renderableSeries.add(heatmapSeries);

Update heatmap data:

        // Update the chart x-axis
        if (xAxisUpdateRequired) {
            let xAxisNumberRange = new NumberRange(newStartFreq, newStopFreq);
            spectrogram_xAxis.current.visibleRange = xAxisNumberRange;
            spectrogram_xAxis.current.visibleRangeLimit = xAxisNumberRange;
            spectrogram_xAxis.current.zoomExtentsRange = xAxisNumberRange;  

            // Reset the heatmap zValues
            heatmapDataSeries.current.clear();
            spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newSampleSize).fill(-200));
            heatmapDataSeries.current.setZValues(spectrogramZValues.current);
        }
        // Update heatmap data
        spectrogramZValues.current.shift();
        spectrogramZValues.current.push(newSpecData);
        heatmapDataSeries.current.notifyDataChanged();
Version
3.1.333
  • You must to post comments
Best Answer
0
0

Hi Quyen

This topic is covered in the updated documentation which has been improved in the SciChart.js v3.1 release. There is a working embedded code sample in the above page which has a dynamically updated heatmap.

To update the heatmap values, you can updated part, or all of the zValues array e.g.

// Create an empty 2D array of size height & width
const initialZValues = zeroArray2D([height, width]);
// Create a Heatmap Data-series. Pass the heatValues as a number[][] to the UniformHeatmapDataSeries
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, {
    xStart: 100,
    xStep: 1,
    yStart: 100,
    yStep: 1,
    zValues: 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 // type number[][]
heatmapDataSeries.setZValues(newZValues);

However, changing the size, or XStep, XStart, YStep, YStart are not supported.

This workaround can also be applied to your use-case.

The UniformHeatmapDataSeries doesn’t have a way to modify or change the xStart, xStep, yStart, yStep properties after construction. However, the heatmap simply wraps a 2d array so the overhead to create a new UniformHeatmapDataSeries and assign it to the RenderableSeries is quite low.

I suggest simply calling the constructor on heatmap dataseries passing in your new updated size zValues and assign to UniformHeatmapRenderableSeries.dataSeries property

const zValues: number[][] = ...

const heatmapData = new UniformHeatmapDataSeries(webAssemblyContext, { 
    xStart: 0,
    xStep: 1,
    yStart: 0,
    yStep: 1,
    zValues
});

const heatmapRenderSeries = new UniformHeatmapRenderableSeries(webAssemblyContext, { dataSeries: heatmapData });

// Later, you want to update either xStart, xStep, yStart, yStep or resize zValues you can do this 
heatmapRenderSeries.dataSeries = new UniformHeatmapDataSeries(webAssemblyContext, {
    xStart: 100,
    xStep: 1,
    yStart: 100,
    yStep: 1,
    zValues
}); 

Read the forum question for more details.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.