How to set Zoom and PanOffset

[Rick Glos]

We have a client where we are showing a RadCartesianChart where the horizontal axis has a year's worth of weekly data (53 data points).

The client is wishing to model a feature present in a legacy application built against ChartFX where the user is able to click a button to a preset Zoom and PanOffest of a quarter's worth of data (13 datapoints).

I've created a spike where I'm displaying the Zoom and PanOffset, and where I can set the values as well - here's where I'm at now.  Problem is that depending on the monitor size or whether the application is maximized or windowed at some custom size, the PanOffset value can differ.

I'm assuming I somehow need to get the width of the chart, set the Zoom to (4,1) and the PanOffset would need to be calculated based upon the width of the chart or maybe just the chart axis?  HorizontalAxis.ActualWidth appears to be returning zero.

For example, in the view model command handler for clicking the Q2 button I have - but again - these hard-coded values don't work properly if the application is a different size.

#region PresetQuarter2Command
private readonly ICommand _PresetQuarter2Command;
/// <summary>
/// Command binding.
/// </summary>
public ICommand PresetQuarter2Command { get { return _PresetQuarter2Command; } }
/// <summary>
/// Action method.
/// </summary>
public void PresetQuarter2()
{
    var zoomSize = new Size(3.79, 1);
    var pointOffset = new Point(-1138.65, 0);
    this.Zoom = zoomSize;
    this.PanOffset = pointOffset;
}
/// <summary>
/// CanExecute method.
/// </summary>
/// <returns>True if the command can be executed, otherwise false.</returns>
public bool CanPresetQuarter2()
{
    return true;
    // Example of how to trigger the calling of this method
    //((DelegateCommand)PresetQuarter2Command).RaiseCanExecuteChanged();
}
#endregion

Can you give me some direction on this?

[Petar Marchev]

Hello Rick,

First I want to quickly explain the notion of zoom & pan offset. Image you have a line 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.

Ok, onto your question. If you are sure you have data for 53 weeks and you need to zoom in and pan to exactly some specific quarter, you need to do some calculations.  If the quarter in mind has 13 weeks, you need to set the zoom to 4.0769 (this is 53/13). Now you can calculate the virtual plot area width (PlotAreaClip.Width * Zoom.X). If you are zooming in the first Q - the PanOffset is 0. If you are zooming in the second Q, you need to calculate the proper pan offset, which heavily depends on the number of weeks. Say 14. So -virtualWidth*14/53. I think that's all of it. Let us know how it goes.

Regards,
Petar Marchev
Telerik