Chart Indicator Problem

[Eitan]

Hi,

I am trying to add an Indicator chart to an existing chart.

The chart is defined in below code.
Log is also defined below.

When the page is ran, I get an error: "Value does not fall within the expected range."

Any idea why I am getting this error?

Thanks,
Eitan Barazani

[DataContract]
public class Log
    {
    [DataMember]
    public LogTypes LogType { get; set; }

    [DataMember]
    public string Desc { get; set; }

    [DataMember]
    public string Name { get; set; }

    [DataMember]
    public ResultType Result { get; set; }

    [DataMember]
    public double Value1 { get; set; }

    [DataMember]
    public double Value2 { get; set; }

    [DataMember]
    public DateTime TimeStamp { get; set; }

    [DataMember]
    public string Note { get; set; }

    // Constructor
    public Log()
        {
        LogType = LogTypes.Appointment;
        Desc = string.Empty;
        Name = string.Empty;
        Result = ResultType.Normal;
        Value1 = 0.0;
        Value2 = 0.0;
        TimeStamp = DateTime.Now;
        Result = ResultType.Normal;
        Note = string.Empty;
        }

    // Constructor
    public Log( Log previousLog )
        {
        LogType = previousLog.LogType;
        Desc = previousLog.Desc;
        Name = previousLog.Name;
        Result = previousLog.Result;
        Value1 = previousLog.Value1;
        Value2 = previousLog.Value2;
        TimeStamp = previousLog.TimeStamp;
        Note = previousLog.Note;
        }

    // Constructor
    public Log( LogTypes type, string name, string desc, double value1, DateTime timeStamp, string note )
        {
        LogType = type;
        Name = name;
        Desc = desc;
        Value1 = value1;
        TimeStamp = timeStamp;
        Note = note;
        }
    }

using System;
using System.Diagnostics;
using System.Windows;
using System.Windows.Media;
using Microsoft.Phone.Controls;
using myHealth.Model;
using Telerik.Charting;
using Telerik.Windows.Controls;
using System.Windows.Navigation;
using System.Collections.ObjectModel;

namespace myHealth
    {
    public partial class Graph : PhoneApplicationPage
        {
        public App app = Application.Current as App;

        ObservableCollection<Log> _reportLogs = new ObservableCollection<Log>();

        private LineSeries _series0;
        private LineSeries _series1;

        public Graph()
            {
            InitializeComponent();
            }

        #region OnNavigateTo & OnNavigatedFrom
        protected override void OnNavigatedTo( NavigationEventArgs e )
            {
            base.OnNavigatedTo( e );

            if ( e.NavigationMode == NavigationMode.New )
                {
                _reportLogs = StateManager.LoadState<ObservableCollection<Log>>( "ReportLogs" );
                }
            else
                {
                // No need to do anything
                if ( State.ContainsKey( "ReportLogs" ) )
                    {
                    _reportLogs = State["ReportLogs"] as ObservableCollection<Log>;
                    }
                else
                    {
                    _reportLogs = new ObservableCollection<Log>();
                    }
                }

            IntializeChart();
            SetTrends();
            }


        protected override void OnNavigatedFrom( NavigationEventArgs e )
            {
            base.OnNavigatedFrom( e );

            State["ReportLogs"] = _reportLogs;

            if ( e.NavigationMode == NavigationMode.Back )
                {
                // No need to save state
                }
            else
                {
                // Save the View variable in the page's State dictionary
                }
            }
        #endregion

        private void IntializeChart()
            {
            Debug.WriteLine( "IntializeChart" );

            _series0 = chart.Series[ 0 ] as LineSeries;
            _series1 = chart.Series[ 1 ] as LineSeries;

            if ( ( _series0 == null ) ||
                 ( _series1 == null ) )
                {
                return;
                }

            _series0.DataPoints.Clear();
            _series1.DataPoints.Clear();

            double minimum0 = double.MaxValue;
            double maximum0 = double.MinValue;

            double minimum1 = double.MaxValue;
            double maximum1 = double.MinValue;

            foreach ( Log item in _reportLogs )
                {
                double value1 = item.Value1;
                double value2 = item.Value2;

                minimum0 = Math.Min( minimum0, value1 );
                minimum1 = Math.Min( minimum1, value2 );

                maximum0 = Math.Max( maximum0, value1 );
                maximum1 = Math.Max( maximum1, value2 );

                _series0.DataPoints.Add( new CategoricalDataPoint { Value = value1, Category = item.TimeStamp.Date } );
                _series1.DataPoints.Add( new CategoricalDataPoint { Value = value2, Category = item.TimeStamp.Date } );
                }


            if ( ( minimum1 == 0.0 ) &&
                 ( maximum1 == 0.0 ) )
                {
                ( chart.VerticalAxis as LinearAxis ).Minimum = minimum0;
                ( chart.VerticalAxis as LinearAxis ).Maximum = maximum0;
                }
            else
                {
                ( chart.VerticalAxis as LinearAxis ).Minimum = Math.Min( minimum0, minimum1 );
                ( chart.VerticalAxis as LinearAxis ).Maximum = Math.Max( maximum0, maximum1 );
                }

            Debug.WriteLine( "IntializeChart - Done" );
            }


#if never
            trendBase = new MovingAverageIndicator();
            trendBase = new ExponentialMovingAverageIndicator();
            trendBase = new ModifiedMovingAverageIndicator();
            trendBase = new ModifiedExponentialMovingAverageIndicator();
            trendBase = new WeightedMovingAverageIndicator();
            trendBase = new AdaptiveMovingAverageKaufmanIndicator();
#endif



        private void SetTrends()
            {
            ValuePeriodIndicatorBase trendBase;
            const int trendsIndex = 0;

            trendBase = new MovingAverageIndicator
                            {
                                CategoryBinding = new PropertyNameDataPointBinding { PropertyName = "Date" },
                                ValueBinding = new PropertyNameDataPointBinding { PropertyName = "Close" },
                                Stroke = new SolidColorBrush( Colors.Red ),
                                StrokeThickness = 1,
                                Period = 5,
                                ItemsSource = _series0.DataPoints
                            };

            chart.Indicators.Clear();
            chart.Indicators.Add( trendBase );
            }
        }
    }

               

<phone:PhoneApplicationPage x:Class="myHealth.Graph"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
                            xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            d:DesignHeight="768"
                            d:DesignWidth="480"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True"
                            SupportedOrientations="PortraitOrLandscape"
                            mc:Ignorable="d">

    <!--  LayoutRoot is the root grid where all page content is placed  -->
    <Grid x:Name="LayoutRoot">

        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1"
                                 StartPoint="0.5,0">
                <GradientStop Color="RoyalBlue" />

                <GradientStop Color="#FF1e90ff"
                              Offset="0.3" />
            </LinearGradientBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  TitlePanel contains the name of the application and page title  -->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle"
                       Style="{StaticResource PhoneTextNormalStyle}"
                       Text="myHealth" />

            <TextBlock x:Name="PageTitle"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}"
                       Text="Graph"
                       FontSize="60" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">

            <chart:RadCartesianChart x:Name="chart"
                                     Margin="0,0,17,25">

                <chart:RadCartesianChart.HorizontalAxis>

                    <chart:DateTimeCategoricalAxis x:Name="dateTimeContinuousAxis"
                                                   Foreground="White"
                                                   DateTimeComponent="DayOfYear"
                                                   LabelFitMode="Rotate"
                                                   LabelRotationAngle="315"
                                                   FontSize="12"
                                                   FontWeight="SemiBold"
                                                   LabelFormat="MMMdd"
                                                   PlotMode="OnTicks"
                                                   TickThickness="2" />
                </chart:RadCartesianChart.HorizontalAxis>

                <!--Zoom and Pan-->
                <chart:RadCartesianChart.Behaviors>
                    <chart:ChartPanAndZoomBehavior ZoomMode="Horizontal"
                                                   PanMode="Horizontal" />
                </chart:RadCartesianChart.Behaviors>

                <!--Grid-->
                <chart:RadCartesianChart.Grid>
                    <chart:CartesianChartGrid MajorLinesVisibility="XY"
                                              MajorXLinesRenderMode="All"
                                              Style="{StaticResource GridStyleDashedAll}">

                        <chart:CartesianChartGrid.MajorXLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Stroke"
                                        Value="{StaticResource SolidBlackBrush}" />
                            </Style>
                        </chart:CartesianChartGrid.MajorXLineStyle>

                        <chart:CartesianChartGrid.MajorYLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Stroke"
                                        Value="{StaticResource SolidBlackBrush}" />
                            </Style>
                        </chart:CartesianChartGrid.MajorYLineStyle>
                    </chart:CartesianChartGrid>

                </chart:RadCartesianChart.Grid>

                <!--Vertical Axis-->
                <chart:RadCartesianChart.VerticalAxis>
                    <chart:LinearAxis x:Name="verticalAxis"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Left"
                                      Foreground="White" />
                </chart:RadCartesianChart.VerticalAxis>

                <chart:RadCartesianChart.Series>
                    <chart:LineSeries Stroke="Orange"
                                      StrokeThickness="2"
                                      ClipToPlotArea="False" />

                    <chart:LineSeries Stroke="Red"
                                      StrokeThickness="2"
                                      ClipToPlotArea="False" />

                    <chart:LineSeries Stroke="Blue"
                                      StrokeThickness="2"
                                      ClipToPlotArea="False" />

                    <chart:LineSeries Stroke="DarkGreen"
                                      StrokeThickness="2"
                                      ClipToPlotArea="False" />

                </chart:RadCartesianChart.Series>

            </chart:RadCartesianChart>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

​

[Ves]

Hi Eitan,

The problem seems to be in the following lines:

trendBase = new MovingAverageIndicator
    {
    CategoryBinding = new PropertyNameDataPointBinding { PropertyName = "Date" },
    ValueBinding = new PropertyNameDataPointBinding { PropertyName = "Close" },
    Stroke = new SolidColorBrush( Colors.Red ),
    StrokeThickness = 1,
    Period = 5,
    ItemsSource = _series0.DataPoints
    };

The PropertyNameDataPointBinding makes the connection between the underlying datasource and the chart i.e. the Date property will be treated as category and the Close property will be treated as value. This is valid for both series and indicators. The ItemsSource of the trend contains object of type CategoricalDataPoint and these objects do not have properties like "Date" and "Close", hence the error. You can use "Category" and "Value" instead.

Best regards,
Ves
Telerik

 

 

[Eitan]

Thanks,
Eitan