Customize ChartPanAndZoomBehavior for RadCartesianChart

[Markus]

Hi,

I have 3x RadCartesianChart using LinearAxis (Y) and DateTimeContinuousAxis (X).
The zoom & pans shall be synchronized on X, but not Y - right now they are synchronized, but all axes.
The zoom control beside and underneath the axis shall be visible. DragMode shall be Zoom, but only on horizontally - right now I either can zoom only horizontally and only have the horizontal zoom control below OR I can zoom by selection horizontally & vertically and have both zoom controls.

Any path on how to achieve this?

Thanks,
Markus

 

[Petar Kirov]

Hi Markus,

1. In order synchronize only the horizontal pan/zoom across several charts, you can use the following approach:

• Introduce two INotifyPropertyChanged properties like these: double HorizontalStart, double HorizontalEnd.
• Set them in the VM constructor to 0.0 and 1.0, respectively.
• Add the following implicit style to the resources of the horizontal axes of the chart that you want to be synchronized:

<telerik:DateTimeContinuousAxis.Resources>
  <Style TargetType="telerik:PanZoomBar">
    <Setter Property="SelectionStart"
              Value="{Binding HorizontalRangeStart, Mode=TwoWay}"/>
    <Setter Property="SelectionEnd"
              Value="{Binding HorizontalRangeEnd, Mode=TwoWay}"/>
  </Style>

This style binds the Zoom control associated with the axis to the properties in your ViewModel and that way the horizontal synchronization is achieved. 

2. To make the Drag-to-Zoom rectangle work in horizontal mode only, you can set the ChartPanAndZoomBehavior .ZoomMode and .PanMode to Horizontal. 

To enable the per-chart vertical zooming and panning you will need to add an external range slider next to each chart, hook to its Selection Start/End properties and update the Zoom and PanOffset properties manually. We are planning to introduce bind-able Horizontal/Vertical Range Start/End properties to make this easier with our Q3 release, but for the time being, you will need to manually calculate the Zoom and PanOffset values.

I have attached two sample projects illustrating the two parts of your question.

I hope this helps!
 

Regards,
Petar Kirov
Telerik

[Was]

Hi, how to set background for selection rectangle, which is shown while selecting the range?

[Sia]

Hello Was,

If you use implicit styling you can define the following implicit style in your application resources (the commented line is the original brush that we use):

<Style TargetType="telerik:RadCartesianChart" BasedOn="{StaticResource RadChartBaseStyle}">
    <Setter Property="DragZoomBorderStyle">
        <Setter.Value>
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="#FF828282" />
                <Setter Property="BorderThickness" Value="1" />
                <!--<Setter Property="Background" Value="#40FFFFFF" />-->
                <Setter Property="Background" Value="Red" />
            </Style>
        </Setter.Value>
    </Setter>
</Style>

If you want to style specific RadCartesianChart, you need to set the style on control's level as follows:

<telerik:RadCartesianChart
HorizontalZoomRangeStart="{Binding SelectionStart, Mode=TwoWay}"
HorizontalZoomRangeEnd="{Binding SelectionEnd, Mode=TwoWay}">
    <telerik:RadCartesianChart.DragZoomBorderStyle>
        <Style TargetType="Border">
            <Setter Property="BorderBrush" Value="#FF828282" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Background" Value="Red" />
        </Style>
    </telerik:RadCartesianChart.DragZoomBorderStyle>
....
</telerik:RadCartesianChart>

Please try one of the mentioned approached and let me know how it works on your end.

Regards,
Sia
Telerik

 

 

[Was]

Thanks a lot, Markus, i've chosen the second way