Tag: HeatmapColorMap

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.

Hello,

This question is related to this discussion :
https://www.scichart.com/questions/wpf/export-chart-with-heatmapcolormap

I want to export a chart as XPS and have the HeatmapColorMap on the XPS. I put the HeatmapColorMap inside a CustomAnnotation. I had an issue with the ticks and labels not appearing on the printed XPS so I was advised to use a workaround :

public class SciChartSurfaceEx : SciChartSurface
{
    protected override SciChartSurfaceBase CreateCloneOfSurfaceInMemory(Size newSize)
    {
        // Grab custom annotation that stores HeatmapColormap on a real chart
        var originalColormapAnnotation = (CustomAnnotation)this.Annotations.Where(x => x.GetType() == typeof(CustomAnnotation)).FirstOrDefault();
        var originalColorMap = originalColormapAnnotation.Content as HeatmapColorMap;

        // Perform exporting functionality(serializing\deserializing)
        var cloned = (SciChartSurface)base.CreateCloneOfSurfaceInMemory(newSize);

        var newWindow = new Window();
        newWindow.Content = cloned;
        newWindow.Show();
        newWindow.Close();

        return cloned;
    }
}

Opening a new window is a workaround to prevent the HeatmapColorMap from disappearing after exporting, because it disappears otherwise.
This works fine when exporting a PNG at non-default size but it does not work when exporting as XPS. I get the following exception :

System.InvalidOperationException: ‘Specified element is already the logical child of another element. Disconnect it first.’

Why do I have this exception ? Is there any way around it ?
There are quite a few bugs when exporting charts, it would be nice to have them fixed.

Thank you in advance !

Hello!

I am trying to programmatically set a range for HeatmapColorPalette and attached HeatmapColorMap to min and max of my data.

Binding HeatmapColorPalette.Maximum to a property in my View Model works well. However, when I add HeatmapColorMap everything breaks, the heat map no longer responds to changes in View Model.

What am I doing wrong?

Here is my View:

<Window x:Class="SciChartHeatMap.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SciChartHeatMap"
    xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
    d:DataContext="{d:DesignInstance Type=local:HeatMapViewModel, IsDesignTimeCreatable=True}"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>
    <Grid.Resources>
        <s:GradientStopsToLinearGradientBrushConverter x:Key="ColorsToLinearGradientBrushConverter"/>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <s:SciChartSurface Grid.Row="0" Grid.RowSpan="2">
        <s:SciChartSurface.RenderableSeries>
        <s:FastUniformHeatmapRenderableSeries x:Name="HeatMapSeries" DataSeries="{Binding Data}" Opacity="0.9">
            <s:FastUniformHeatmapRenderableSeries.ColorMap>
                <s:HeatmapColorPalette Maximum="{Binding ColorMaximum}">
                    <s:HeatmapColorPalette.GradientStops>
                        <GradientStop Offset="0" Color="DarkBlue"/>
                        <GradientStop Offset="0.2" Color="CornflowerBlue"/>
                        <GradientStop Offset="0.4" Color="DarkGreen"/>
                        <GradientStop Offset="0.6" Color="Chartreuse"/>
                        <GradientStop Offset="0.8" Color="Yellow"/>
                        <GradientStop Offset="1" Color="Red"/>
                    </s:HeatmapColorPalette.GradientStops>
                </s:HeatmapColorPalette>
            </s:FastUniformHeatmapRenderableSeries.ColorMap>
        </s:FastUniformHeatmapRenderableSeries>
        </s:SciChartSurface.RenderableSeries>
        <s:SciChartSurface.XAxis>
            <s:NumericAxis 
                FlipCoordinates="False" 
                ScientificNotation="None" 
                AutoTicks="False"
                MajorDelta="1"
                MinorDelta="0.5"
                AxisAlignment="Top"/>
        </s:SciChartSurface.XAxis>
        <s:SciChartSurface.YAxis>
            <s:NumericAxis 
                FlipCoordinates="True" 
                ScientificNotation="None"
                AxisAlignment="Left"/>
        </s:SciChartSurface.YAxis>
    </s:SciChartSurface>

    <!-- Enabling this will break the program
    <s:HeatmapColorMap
        Grid.Column="1"
        Grid.Row="0"
        Grid.RowSpan="2"
        Margin="5,0,5,0"
        HorizontalAlignment="Right"
        VerticalAlignment="Stretch"
        DataContext="{Binding Source={x:Reference Name=HeatMapSeries}, Mode=OneWay}"
        ColorMap="{Binding ColorMap.GradientStops, Converter={StaticResource ColorsToLinearGradientBrushConverter}}"
        Maximum="{Binding ColorMap.Maximum}"
        Orientation="Vertical">
    </s:HeatmapColorMap>
    -->

    <Label 
        Grid.Row="0" 
        Grid.Column="2" 
        Content="{Binding ColorMaximum}" 
        Width="50" 
        HorizontalContentAlignment="Center"/>
    <Slider 
        Grid.Column="2" 
        Grid.Row="1" 
        Orientation="Vertical" 
        Minimum="0" 
        Maximum="10" 
        HorizontalAlignment="Center"
        Value="{Binding ColorMaximum}"/>
</Grid>

The idea in this small example is for slider to control both HeatmapColorPalette.Maximum and s:HeatmapColorMap.Maximum

The code in my View Model is pretty simple:

private double mColorMax;

public double ColorMaximum
    {
        get => mColorMax;

        set
        {
            mColorMax = value;
            OnPropertyChanged();
        }
    }

My View Model implements INotifyPropertyChanged

I will appreciate any suggestions.

Thank you in advance!