Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
200
Synchronizing grids with the XamZoombar?
posted

Hi,

I´m having some problems understanding the synchronization of a couple of charts to the XamZoombar.

This is my xaml:

<Grid Background="{DynamicResource ChartBackground}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="5*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
 
                <ig:XamDataChart x:Name="chart"                                 
                                 CrosshairVisibility="Visible"
                                 UseLayoutRounding="False" 
                                 MinHeight="50"
                                 MinWidth="50"
                                 Grid.Row="0"
                                 VerticalAlignment="Stretch"
                                 HorizontalAlignment="Stretch"
                                 HorizontalZoomable="False" VerticalZoomable="False"
                                 VerticalZoombarVisibility="Collapsed"
                                 HorizontalZoombarVisibility="Collapsed"
                                 MouseDoubleClick="chart_MouseDoubleClick"
                                 Background="{DynamicResource ChartBackground}"
                                 Foreground="{DynamicResource ChartForeground}"
                                 MouseMove="chart_MouseMove"                                 
                                 SeriesMouseLeftButtonUp="chart_SeriesMouseLeftButtonUp">
                    <ig:SyncManager.SyncSettings>
                        <ig:SyncSettings SyncChannel="syncGroup1"
                                              SynchronizeHorizontally="True"
                                              SynchronizeVertically="False" />
                    </ig:SyncManager.SyncSettings>
                    <ig:XamDataChart.Axes>
                        <ig:CategoryXAxis x:Name="dateXAxis"                                         
                                          ItemsSource="{Binding}"
                                          Label="{}{Date:MM/yyyy}" Visibility="Collapsed">
                            <ig:CategoryXAxis.LabelSettings>
                                <ig:AxisLabelSettings Visibility="Collapsed"/>
                            </ig:CategoryXAxis.LabelSettings>
                        </ig:CategoryXAxis>
                        <ig:NumericYAxis x:Name="priceYAxis">
                            <ig:NumericYAxis.LabelSettings>
                                <ig:AxisLabelSettings Location="OutsideLeft"
                                                      Extent="60" />
                            </ig:NumericYAxis.LabelSettings>
                        </ig:NumericYAxis>
                    </ig:XamDataChart.Axes>
                    <ig:XamDataChart.ContextMenu>
                        <ContextMenu>
                            <ContextMenu.Items>
                                <MenuItem Header="{Binding ViewModel.SelectedSeries}" IsEnabled="False"/>
                                <MenuItem Header="Delete" Click="MenuItem_Click"/>
                            </ContextMenu.Items>
                        </ContextMenu>
                    </ig:XamDataChart.ContextMenu>
                </ig:XamDataChart>
                <ig:XamDataChart x:Name="volChart"
                                 UseLayoutRounding="False" 
                                 MinHeight="50"
                                 MinWidth="50"
                                 Grid.Row="1"
                                 VerticalAlignment="Stretch"
                                 HorizontalAlignment="Stretch"
                               
                                 MouseDoubleClick="chart_MouseDoubleClick"
                                 Background="{DynamicResource ChartBackground}"
                                 Foreground="{DynamicResource ChartForeground}">
                        <ig:SyncManager.SyncSettings>
                            <ig:SyncSettings SyncChannel="syncGroup1"
                                              SynchronizeHorizontally="True"
                                              SynchronizeVertically="False" />
                        </ig:SyncManager.SyncSettings>
                        <ig:XamDataChart.Axes>
                        <ig:CategoryXAxis x:Name="commonXAxis"                                         
                                          ItemsSource="{Binding}"
                                          Label="{}{Date:MM/yyyy}"/>
                        <ig:NumericYAxis x:Name="volumeYAxis">
                            <ig:NumericYAxis.LabelSettings>
                                <ig:AxisLabelSettings Location="OutsideLeft"
                                                      Extent="60"/>
                            </ig:NumericYAxis.LabelSettings>
                        </ig:NumericYAxis>
                    </ig:XamDataChart.Axes>
                </ig:XamDataChart>
                <ig:XamZoombar x:Name="xmZoombar"
                            Grid.Row="2"
                            Margin="56,0,5,5"                               
                            Background="Transparent">
                    <ig:XamZoombar.HorizontalPreviewContent>
                        <ig:XamDataChart x:Name="xmPreviewDataChart"
                                      Margin="4,0,4,0"
                                      VerticalZoombarVisibility="Collapsed"
                                      HorizontalZoombarVisibility="Collapsed"
                                      IsHitTestVisible="False"
                                      IsTabStop="False">
                            <ig:XamDataChart.Axes>
                                <ig:CategoryXAxis x:Name="xmPreviewXAxis" ItemsSource="{Binding}" Label="{}{Date:MM/yyyy}">
                                    <ig:CategoryXAxis.LabelSettings>
                                        <ig:AxisLabelSettings Location="OutsideBottom" HorizontalAlignment="Center" Visibility="Collapsed" />
                                    </ig:CategoryXAxis.LabelSettings>
                                </ig:CategoryXAxis>
                                <ig:NumericYAxis x:Name="xmPreviewYAxis">
                                    <ig:NumericYAxis.LabelSettings>
                                        <ig:AxisLabelSettings Location="OutsideRight" HorizontalAlignment="Center" Visibility="Collapsed" />
                                    </ig:NumericYAxis.LabelSettings>
                                </ig:NumericYAxis>
                            </ig:XamDataChart.Axes>
                        </ig:XamDataChart>
                    </ig:XamZoombar.HorizontalPreviewContent>
                </ig:XamZoombar>

In the code behind I do this when loading the control:
        void ChartControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (xmZoombar != null && this.chart != null)
            {
                Binding binding = new Binding
                {
                    Source = this.chart,
                    Path = new PropertyPath("HorizontalZoombar.Range"),
                    Mode = BindingMode.TwoWay
                };                
                xmZoombar.SetBinding(XamZoombar.RangeProperty, binding);                
                xmZoombar.Range = new Range { Minimum = 0.3, Maximum = 1 };
            }
 }

This is how I add my series:
private void AddToChart(Series series)
        {
            LineSeries newSer = new LineSeries();
            newSer.MarkerType = MarkerType.None;
            newSer.ItemsSource = series.Data;
            newSer.ValueMemberPath = "Price";
            newSer.Title = series.Symbol;
            newSer.XAxis = commonXAxis;
            newSer.YAxis = priceYAxis;
            chart.Series.Add(newSer);
 
            ColumnSeries volSer = new ColumnSeries();
            volSer.MarkerType = MarkerType.None;
            volSer.ItemsSource = series.Data;
            volSer.ValueMemberPath = "Volume";
            volSer.Title = series.Symbol + "Volume";
            volSer.XAxis = commonXAxis;
            volSer.YAxis = volumeYAxis;
            volSer.XAxis.ItemsSource = series.Data;
            volChart.Series.Add(volSer);
 
            LineSeries previewSeries = new LineSeries();
            previewSeries.MarkerType = MarkerType.None;
            previewSeries.ItemsSource = series.Data;
            previewSeries.ValueMemberPath = "Price";
            previewSeries.Title = series.Symbol;
            previewSeries.XAxis = xmPreviewXAxis;
            previewSeries.YAxis = xmPreviewYAxis;
            previewSeries.XAxis.ItemsSource = series.Data;
            xmPreviewDataChart.Series.Add(previewSeries);              
        }

The issues I´m having is that only one of the charts follows the zoombar while the other just sits there.
What am I missing?
I would also like to be able to set the range of the zoombar to a date range but due to the limits of the DateTimeAxis all of the series need the same number of points so I´m stuck with categoryAxis.

Thanks
Parents
No Data
Reply
  • 138253
    Offline posted

    Hello,

     

    I am just checking if you got this worked out or you still require any assistance or clarification on the matter.

Children
No Data