ChartView - using the PanOffset info

3 posts, 1 answers
  1. Eyal Ellenbogen
    Eyal Ellenbogen avatar
    11 posts
    Member since:
    Jul 2009

    Posted 21 Jun 2012 Link to this post

    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. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 22 Jun 2012 Link to this post

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

  3. DevCraft banner
  4. Eyal Ellenbogen
    Eyal Ellenbogen avatar
    11 posts
    Member since:
    Jul 2009

    Posted 22 Jun 2012 Link to this post

    Thank you. I'm pretty sure that solves the problem although I haven't tried it yet.
Back to Top