Pre loader

Tag: HeatmapColorMap

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 votes
8k views

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!

1 vote
6k views

Hello,

I want my HeatmapColorMap to be part of my chart, so that when I export it, the HeatmapColorMap is visible on the PNG / XPS.
In order to this, I put the HeatmapColorMap inside a CustomAnnotation.
I can see it nicely on my Surface but when I try to export it as XPS or as PNG with some specific size, the numbers and ticks have disappeared, only leaving the rectangle with color gradient (see attached picture)
Is there a way to solve this ?

Thank you !

0 votes
6k views

Hi,

I tried to implement a colormap view next to the heatmap chart. But couldn’t figure out how to set it up. It seems like it won’t work this way.

SciChartHeatmapColourMap colorMapView = new SciChartHeatmapColourMap(this);
colorMapView.findViewById(R.id.colorMapView);

I don’t know how Bindview works in the example code. Could you tell me how to link SciChartHeatmapColourMap to the view in layout xml?

Thanks.

  • Gang Xu asked 4 years ago
  • last active 4 years ago
0 votes
4k views

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 !

0 votes
2k views

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 10 months ago
  • last active 10 months ago
1 vote
1k views

I am trying to add an axis annotation to a heatmap legend. When this annotation is dragged, the color mapping of the heatmap series and the heatmap legend will be changed. How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?

  • Quyen Sy asked 12 months ago
  • last active 12 months ago
1 vote
1k views

I have a color heatmap legend that need to update the yAxis range on the fly. The colorMap doesn’t update as expected. Here’s my codes to update the y axis and colorMap min/max of the heatmap legend:

const newRange = new NumberRange(newMin, newMax);
const yAxis = heatmapLegendRef.current.sciChartSurface.yAxes.items[0];
yAxis.majorDelta = newScale;
yAxis.minorDelta = newScale / 5;        
yAxis.visibleRange = newRange;
yAxis.visibleRangeLimit = newRange;
yAxis.zoomExtentsRange = newRange;

colorMapRef.current.minimum = newMin;
colorMapRef.current.maximum = newMax;
heatmapLegendRef.current.colorMap = colorMapRef.current;

The y axis range has been updated. But the colorMap didn’t. It seems that the colorMap of the heatmap legend cannot be changed. Is it true that I can only recreate the heatmap legend if I want to change the colorMap?

  • Quyen Sy asked 7 months ago
  • last active 6 months ago
Showing 7 results

Try SciChart Today

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

Start TrialCase Studies