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

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

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.