Cannot get Chart to Pan

3 posts, 0 answers
  1. Stephan
    Stephan avatar
    71 posts
    Member since:
    Jul 2007

    Posted 27 Mar 2014 Link to this post

    Hi, just started on my first application for WP8 and want to use a chart, but I cannot get it to work how I want it to work.

    I have got a range for 1,5 hour build with 5 minutes intervals. The problem is all the values are plotted, but I want to make i.e. only the first 10 values visible and show the next 10 when I "move" (pan) the graph to the right. But I cannot get it to work. I studied the Stock.xaml you provide, and it seems to me I have the same kind of structure, but in my case it it not working. I'm overlooking something, but cannot see what.

    My Xaml-code looks like:
    <telerikChart:RadCartesianChart x:Name="RainChart" HorizontalAlignment="Left" VerticalAlignment="Top" Height="514" Width="456" Margin="0,-13,0,0">
                   <telerikChart:RadCartesianChart.Grid>
                       <telerikChart:CartesianChartGrid MajorYLineDashArray="3, 3" MajorLinesVisibility="Y">
                           <telerikChart:CartesianChartGrid.MajorYLineStyle>
                               <Style TargetType="Line">
                                   <Setter Property="Stroke" Value="Gray"/>
                               </Style>
                           </telerikChart:CartesianChartGrid.MajorYLineStyle>
                       </telerikChart:CartesianChartGrid>
                   </telerikChart:RadCartesianChart.Grid>
                   <telerikChart:RadCartesianChart.Behaviors>
                       <telerikChart:ChartPanAndZoomBehavior ZoomMode="None" PanMode="Horizontal" HandleDoubleTap="False"/>
                   </telerikChart:RadCartesianChart.Behaviors>
                   <telerikChart:RadCartesianChart.VerticalAxis>
                       <telerikChart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="1" Maximum="300"/>
                   </telerikChart:RadCartesianChart.VerticalAxis>
                   <telerikChart:RadCartesianChart.HorizontalAxis>
                       <telerikChart:DateTimeContinuousAxis LineStroke="{StaticResource PhoneDisabledBrush}"
                                                           LineThickness="1"
                                                           LabelFormat="HH:mm"                                                
                                                           PlotMode="OnTicks"
                                                           LabelFitMode="Rotate"
                                                           LabelRotationAngle="325"/>
                   </telerikChart:RadCartesianChart.HorizontalAxis>
                   <telerikChart:SplineAreaSeries>
                   </telerikChart:SplineAreaSeries>
               </telerikChart:RadCartesianChart>


    I fill the series using this cs-code:
    01.public partial class Page1 : PhoneApplicationPage
    02.   {
    03.       public Page1()
    04.       {
    05.           InitializeComponent();
    06. 
    07.           DateTime lastDate = DateTime.Now;
    08.           double lastVal = 20;
    09. 
    10.           List<ChartDataObject> dataSouce = new List<ChartDataObject>();
    11.           for (int i = 0; i < 20; ++i)
    12.           {
    13.               ChartDataObject obj = new ChartDataObject
    14.               {
    15.                   Time = lastDate.AddMinutes(5),
    16.                   Value = lastVal++
    17.               };
    18.               dataSouce.Add(obj);
    19.               lastDate = obj.Time;
    20.           }
    21.           SplineAreaSeries series = (SplineAreaSeries)this.RainChart.Series[0];
    22.           series.CategoryBinding = new PropertyNameDataPointBinding()
    23.           {
    24.               PropertyName = "Time"
    25.           };
    26.           series.ValueBinding = new PropertyNameDataPointBinding()
    27.           {
    28.               PropertyName = "Value"
    29.           };
    30. 
    31.           this.RainChart.PanOffset = new Point(0, 0);
    32.           series.ItemsSource = dataSouce;
    33. 
    34.       }
    35.   }


    Can you point me in the right direction.

    T.I.A.
  2. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 27 Mar 2014 Link to this post

    Hello Stephan,

    Thank you for contacting us.

    You will have to set the Zoom property of the RadCartesianChart to a proper value in order to display only a part of the data points.

    I hope this helps. Please, let us know if you have further questions.

    Regards,
    Rositsa Topchiyska
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. DevCraft banner
  4. Stephan
    Stephan avatar
    71 posts
    Member since:
    Jul 2007

    Posted 27 Mar 2014 in reply to Rosy Topchiyska Link to this post

    Hi Rositsa,

    exactly what I was looking for.

    Thx
Back to Top