This is a migrated thread and some comments may be shown as answers.

Zooming and Panning a 0,0 Centred Chart

1 Answer 151 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 17 Jul 2013, 10:42 AM
I have a series of square XY Scatter Charts which all range from +Value to -Value with 0 in the centre in both axis. (I have attached a picture of one of these charts to better illustrate what I mean). 

I need to be able to zoom in on all of these charts at once using a slider bar placed elsewhere on the form. I can easily tie the zoom level of the chart to the slider bar by using: 

chart.Zoom = new Size(zoomSlider.Value, zoomSlider.Value);

which zooms into both axis at the same rate. However by default this seems to zoom in to left most point on the X axis and the top most point on the Y. The behaviour I need is to zoom into the centre of each chart so that point 0, 0 is always at the centre (The two charts in the picture illustrate this. The Zoom/Pan bars are only there to illustrate what I mean and will not be there in the final product).

I'm fairly certain that I need to use PanOffset to achieve this but I am unsure how to calculate the point to pass to it. 

Any help would be appreciated. 

Thanks, 

Andy.



1 Answer, 1 is accepted

Sort by
0
Rosko
Telerik team
answered on 22 Jul 2013, 08:38 AM
Hello Andrew,

First I want to quickly explain the notion of zoom & pan offset. Image you have a chart. The chart has an actual width of 500. However, the left vertical axis has an actual width of 80 and the last tick of the horizontal axis is 20 pixels inside the chart. The 20 pixels are needed so that the last label is shown and is not clipped, and also it is centered relative to the last tick. This leaves 400 pixels for the plot area. This is what we call plot area width. You get this from the RadChart.PlotAreaClip.Width.

Now, when you zoom in (3, 1), naturally the virtual plot area would increase 3 times and if you want to show the middle part, you need to set an offset of (-400, 0). Now, when you check the PlotAreaClip - it still shows width 400, because this is the visible part of the plot area. So, to your question, all you need to do is shown in the code snippet below:

private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    chart.Zoom = new Size(e.NewValue, 1);
    var plotAreaWidth = chart.PlotAreaClip.Width;
    var virtualWidth = plotAreaWidth * e.NewValue;
    var centerPanOffset = (virtualWidth - plotAreaWidth) / 2;
    chart.PanOffset = new Point(-centerPanOffset, 0);
}


Regards,
Rosko
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
ChartView
Asked by
Andrew
Top achievements
Rank 1
Answers by
Rosko
Telerik team
Share this question
or