Pre loader

Got color mapping problem when create non-uniform 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

0
0

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.

Version
3.1.333
Images
  • You must to post comments
0
0

Hi Quyen

Reverse the colormap, e.g. this

  const colorMap = new HeatmapColorMap({
        minimum: -200,
        maximum: -50,
        gradientStops: [
            { offset: 0, color: "Transparent" },
            { offset: 0.01, color: COLORS.DARK_BLUE },
            { offset: 0.4, color: COLORS.BLUE },
            { offset: 0.5, color: COLORS.GREEN },
            { offset: 0.6, color: COLORS.YELLOW },
            { offset: 0.8, color: COLORS.RED },
            { offset: 1, color: COLORS.DARK_RED },                                                                        
        ]
    });

not this

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" },
    ]
});

I’ve logged this as a bug in our issue tracker. HeatmapColorMap for non-uniform seems to require the gradient stops are sorted offset=0 to offset=1 whereas Uniform series handles this sorted automatically.

Best regards
Andrew

  • You must to post comments
0
0

I can plot data on the non-uniform heatmap now with the sample codes above. However, I found that the live update doesn’t work. I keep updating the zValues with live data but the chart just show 1 row of data. If I resize the chart (my heatmap is inside a resizable container), I can see the updated data (i.e. Each time I resize the chart, the chart updated and show updated data). Below are my codes to update the zValues:

Reset zValues when number of data point changed:

                spectrogramZValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newWidth).fill(-200));
            heatmapSeries.dataSeries.setZValues(spectrogramZValues);
            sciChartSurface.zoomExtents();

Update the zValues array when there is new data (I tried to add call zoomExtens() after notifyDataChanged but still didn’t work):

            spectrogramZValues.shift();
        spectrogramZValues.push(newData);
        heatmapSeries.current.dataSeries.notifyDataChanged();

Is it the correct way to do live update in non-uniform heatmap? Do you have any example of live updated non-uniform heatmap?

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies