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 3 weeks ago
- last active 3 weeks ago
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 3 months ago
- last active 3 months ago
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 !
- Renaud Danniau asked 1 year ago
- last active 2 months ago
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 !
- Renaud Danniau asked 1 year ago
- last active 7 months ago
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 3 years ago
- last active 3 years ago
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!
- Alexander Gdalevich asked 4 years ago
- last active 4 years ago