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
Hello,
I am just checking if you got this worked out or you still require any assistance or clarification on the matter.
Thank you for your post. I have been looking into it and I created a sample project for you using your code with a little modification. Basically I set the line chart’s HorizontalZoomable Property to True in XAML, so the binding to the Zoom Bar could be initialized and then I set it back to false in code. Please let me know if this helps you or you need further assistance on this matter.
Looking forward for your reply.