Cannot get Chart to Pan

[Stephan]

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.

[Rosy Topchiyska]

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

 

 

[Stephan]

Hi Rositsa,

exactly what I was looking for.

Thx