SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

0
0

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.

Version
4.1.0.8612
  • You must to post comments
0
0

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

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.