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

Cannot get Chart to Pan

2 Answers 90 Views

Chart

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

This question is locked. New answers and comments are not allowed.

Stephan asked on 27 Mar 2014, 08:23 AM

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.

Cannot get Chart to Pan

2 Answers, 1 is accepted