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

ChartView - using the PanOffset info

2 Answers 87 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Eyal Ellenbogen
Top achievements
Rank 1
Eyal Ellenbogen asked on 21 Jun 2012, 06:59 AM
Hi, 

I'm using the 2012 Q2 SL5 release and I would like to be able to know when the user scrolled to the end of the chart. I am trying to do that by binding the PanOffset value to a property on my VM. The problem is, the information I get is kind of useless... it is just a number. The range of the number grows when the zoom level grows. I am assuming it has something to do with the width of the scrollable panel inside the plot template. The problem is, I don't know how to access it.

How can I get this information from the chart?

Thanks,
Eyal

2 Answers, 1 is accepted

Sort by
0
Accepted
Giuseppe
Telerik team
answered on 22 Jun 2012, 10:22 AM
Hello Eyal,

You can use the information provided by the PanZoomBar.SelectionStart / SelectionEnd properties to achieve the desired effect (SelectionStart / SelectionEnd provide relative value between 0 and 1 that represents the position of the respective slider thumbs across the whole data range i.e. when SelectionEnd = 1 this means that the user has scrolled to the end).

In order to pass this information to the ViewModel, you can use implicit style targeting the PanZoomBar control and create two-way bindings between PanZoomBar.SelectionStart / SelectionEnd properties and properties in your ViewModel like this:
<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Style TargetType="telerik:PanZoomBar">
            <Setter Property="SelectionStart" Value="{Binding PanZoomBarSelectionStart, Mode=TwoWay}" />
            <Setter Property="SelectionEnd" Value="{Binding PanZoomBarSelectionEnd, Mode=TwoWay}" />
        </Style>
    </Grid.Resources>
 
    <telerik:RadCartesianChart x:Name="RadChart1">
        <telerik:RadCartesianChart.Behaviors>
            <telerik:ChartPanAndZoomBehavior />
        </telerik:RadCartesianChart.Behaviors>
 
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:DateTimeContinuousAxis LabelFitMode="MultiLine" LabelFormat="dd/MM/yyyy" />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.VerticalAxis>
 
        <telerik:LineSeries CategoryBinding="Date" ValueBinding="Value" ItemsSource="{Binding Data}" />
    </telerik:RadCartesianChart>
</Grid>

We have attached a runnable sample application demonstrating this approach as well.


Regards,
Giuseppe
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Eyal Ellenbogen
Top achievements
Rank 1
answered on 22 Jun 2012, 11:24 AM
Thank you. I'm pretty sure that solves the problem although I haven't tried it yet.
Tags
Chart
Asked by
Eyal Ellenbogen
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Eyal Ellenbogen
Top achievements
Rank 1
Share this question
or