RadCartesianChart synchronize scrolling

[Alberto]

Hi,

I have a view with ​two different RadCartesianChart controls, with one scrollbar (on X-axis) for each chart. (see attached image)

I would like to synchronize the scrolling ​between the ​2 charts: for example when I scroll chart​​1, I would also like that in the same time also chart​0 ​is automatically scrolled. ​The two charts have the same settings and values for X axis.

I'm using a solution like the following:

private void SynchronizeChartsPan(object sender, Telerik.Windows.Controls.ChartView.ChartPanOffsetChangedEventArgs e)
{
Chart0.DetailsChart.PanOffsetChanged -= SynchronizeAnalyticDetailsChartsPan;
Chart1.DetailsChart.PanOffsetChanged -= SynchronizeAnalyticDetailsChartsPan;

if (sender != Chart0.DetailsChart) Chart0.DetailsChart.PanOffset = new Point(e.NewPanOffset.X, 0);
if (sender != Chart1.DetailsChart) Chart1.DetailsChart.PanOffset = new Point(e.NewPanOffset.X, 0);


Chart0.DetailsChart.PanOffsetChanged += SynchronizeAnalyticDetailsChartsPan;
Chart1.DetailsChart.PanOffsetChanged += SynchronizeAnalyticDetailsChartsPan;
}

 

The problem with this solution is that the synchronize scrolling does not bring all of the charts at the end at the same time: when I reach the end for chart1, I'm not at the end in the other chart. This seems to be related to a different "PlotAreaClip" in the ​two charts:  Y-Axis have different values and different sizes and this impact on the "PlotAreaClip" size.

What I would expect is that, since I have the same X-Axis in all the charts, when I scroll to the end on X-axis of chart1 I should reach the end also in other chart (regardless of Y-Axis)

How could I get this behaviour?

 Thanks and regards

[Anna]

Hello Alberto,

Thank you for the detailed explanation and the screenshot.

You are absolutely correct about the behavior you've observed and its cause. The plot area is different in the two charts and regardless of them having the same settings for the X-axis, the resulting two axes have different lengths.

I believe it would be better if you used the properties HorizontalZoomRangeStart and HorizontalZoomRangeEnd of the RadCartesianChart. You will be able to bind the respective properties of the two charts and this way you will not need any code behind logic.

<telerik:RadCartesianChart x:Name="chart0"
HorizontalZoomRangeStart="{Binding ElementName=chart1, Path=HorizontalZoomRangeStart, Mode=TwoWay}"
HorizontalZoomRangeEnd="{Binding ElementName=chart1, Path=HorizontalZoomRangeEnd, Mode=TwoWay}">

Please, let me know if you have any questions or concerns.

Regards,
Anna
Telerik

[Alberto]

Hi Anna,

thank you very much for your suggestion.

Now the scrolling seems to work correctly.

Regards,

Alberto