Hi,
I’m trying to create Multi-Pane Heatmaps by using your example for multi-pane stock charts. I need to have one colormap per viewmodel and I think this should be bound to one HeatmapColourMap each to display the values of color.
So the ItemSource of SciChartGroup is ChartPaneViewModels which contains x number of Viewmodels where I add HeatMapRenderableSeriesViewModel with dataseries to ObservableCollection. Is this possible? I’m having some trouble displaying the correct colors for the data.
- Oistein Hurum asked 8 years ago
- You must login to post comments
Hi Oistein,
Sorry about the late reply! I would actually suggest in your case not using SciChartGroup (as this was designed for multi pane stock charts) but instead using a WPF ItemsControl.
SciChartGroup inherits ItemsControl so what I’m about to tell you applies to both.
You need to define an ItemsTemplate for each ‘chart pane’ and bind ItemsControl.ItemSource to a collection of ChartViewModels. Each ‘ItemTemplate’ effectively binds to one ChartViewModel.
The ItemTemplate should contain enough XAML to instantiate a chart, bind to properties for RenderableSeries, configuration of the chart. You can also include a HeatmapColorMap control inside the ItemTemplate if you wish.
So a code sample might look like this:
<ItemsControl ItemsSource="{Binding ChartViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<s:SciChartSurface x:Name="sciChart" Padding="0" BorderThickness="0">
<s:SciChartSurface.RenderableSeries>
<s:FastHeatMapRenderableSeries x:Name="heatmapSeries"
Opacity="0.5"
Maximum="200"
DataSeries="{Binding DataSeriesInViewModel}">
<s:FastHeatMapRenderableSeries.ColorMap>
<LinearGradientBrush>
<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" />
</LinearGradientBrush>
</s:FastHeatMapRenderableSeries.ColorMap>
</s:FastHeatMapRenderableSeries>
</s:SciChartSurface.RenderableSeries>
<s:SciChartSurface.XAxis>
<s:NumericAxis DrawMajorBands="True" />
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis DrawMajorBands="True" />
</s:SciChartSurface.YAxis>
<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
<s:RolloverModifier ShowTooltipOn="Always" UseInterpolation="True" ReceiveHandledEvents="True"/>
<s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton" />
<s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>
</s:SciChartSurface>
<s:HeatmapColourMap Margin="10,10,60,40"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="{Binding ElementName=sciChart, Path=Background}"
Foreground="White"
ColorMap="{Binding ElementName=heatmapSeries, Path=ColorMap}"
Minimum="{Binding ElementName=heatmapSeries, Path=Minimum}"
Maximum="{Binding ElementName=heatmapSeries, Path=Maximum}"
TextFormatting="0.00"
Opacity="0.8"
BorderBrush="#777"
BorderThickness="1"
Orientation="Vertical" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Bindings you should make?
Well you need a ViewModel containing ObservableCollection of ChartViewModels at the top level. This is what ItemsControl.ItemsSource should bind to.
Now each ChartViewModel should contain a Heatmap2DArrayDataSeries property. I’ve named it DataSeriesInViewModel but of course feel free to rename it.
This should display multiple heat maps one above another and allow you to dynamically add/remove them by adding removing ChartViewModels.
Let me know if it helps!
Best regards,
Andrew
- Andrew Burnett-Thompson answered 8 years ago
- You must login to post comments
Please login first to submit.