Zooming and Panning a 0,0 Centred Chart

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    37 posts
    Member since:
    Dec 2012

    Posted 17 Jul 2013 Link to this post

    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. 



  2. Rosko
    Rosko avatar
    137 posts

    Posted 22 Jul 2013 Link to this post

    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);

    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 >>
Back to Top