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

Customize ChartPanAndZoomBehavior for RadCartesianChart

4 Answers 186 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 1
Markus asked on 04 Sep 2013, 12:47 PM
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

 

4 Answers, 1 is accepted

Sort by
0
Petar Kirov
Telerik team
answered on 09 Sep 2013, 10:37 AM
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
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 >>

0
Was
Top achievements
Rank 1
answered on 14 Apr 2014, 01:38 PM
Hi, how to set background for selection rectangle, which is shown while selecting the range?
0
Sia
Telerik team
answered on 15 Apr 2014, 04:16 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Was
Top achievements
Rank 1
answered on 16 Apr 2014, 12:50 PM
Thanks a lot, Markus, i've chosen the second way
Tags
Chart
Asked by
Markus
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Was
Top achievements
Rank 1
Sia
Telerik team
Share this question
or