TimeBar and Chart SelectionChanged

2 posts, 0 answers
  1. Elena
    Elena avatar
    7 posts
    Member since:
    Apr 2011

    Posted 11 Mar 2012 Link to this post

    Hi!

    I have not found an example of the implementation documentation article Populating TimeBar from WCF service with LINQ to SQL.
    As in the example RadTimeBar First Lookup I want to use a bunch of TimeBar and Chart.

    As I get data for the initial period and then the selected period changed I load data for the corresponding period of service.
    Ie the need to alter the example RadTimeBar First Lookup  to retrieve data only a selected period of timebar.

    This ViewModel

    public class ExampleViewModel: FrameworkElement, INotifyPropertyChanged
    {
        private IEnumerable<FlightStats> flightStats;
        private IEnumerable<FlightReport> reports;
     
        public ExampleViewModel()
        {
            PeriodStart = DateTime.Parse("01.10.2010 12:00:00");
            PeriodEnd = DateTime.Parse("01.04.2011 12:11:00");
     
            VisiblePeriodStart = DateTime.Parse("01.12.2010 00:00:00");
            VisiblePeriodEnd = DateTime.Parse("15.01.2011 00:00:00");
     
            SelectionStart = DateTime.Parse("20.12.2010 12:03:00");
            SelectionEnd = DateTime.Parse("27.12.2010 12:04:00");
     
            GenerateData();
        }
     
        public event PropertyChangedEventHandler PropertyChanged;
     
        public Color ForegroundColor
        {
            get
            {
                if (StyleManager.ApplicationTheme is VistaTheme)
                    return Color.FromArgb(255, 219, 233, 238);
                else if (StyleManager.ApplicationTheme is Windows7Theme)
                    return Color.FromArgb(255, 82, 98, 119);
                else if (StyleManager.ApplicationTheme is Expression_DarkTheme)
                    return Color.FromArgb(255, 0, 0, 0);
     
                return Color.FromArgb(255, 72, 72, 72);
            }
        }
     
        public Color HighlightColor
        {
            get
            {
                if (StyleManager.ApplicationTheme is VistaTheme)
                    return Color.FromArgb(255, 255, 255, 255);
                else if (StyleManager.ApplicationTheme is Windows7Theme)
                    return Color.FromArgb(255, 30, 57, 91);
                else if (StyleManager.ApplicationTheme is Expression_DarkTheme)
                    return Color.FromArgb(255, 221, 221, 221);
     
                return Color.FromArgb(255, 0, 0, 0);
            }
        }
     
     
        public void SelectionPeriodChanged()
        {
            GenerateData();
        }
     
     
        public IEnumerable<FlightStats> FlightStats
        {
            get
            {
                return this.flightStats;
            }
            private set
            {
                if (this.flightStats == value)
                    return;
     
                this.flightStats = value;
                this.OnPropertyChanged("FlightStats");
            }
        }
     
        public IEnumerable<FlightReport> FlightReports
        {
            get
            {
                return this.reports;
            }
            private set
            {
                if (this.reports == value)
                    return;
     
                this.reports = value;
                this.OnPropertyChanged("FlightReports");
            }
        }
     
        #region PeriodStart
        private DateTime periodStart;
        [TypeConverter(typeof(DateTimeTypeConverter))]
        public DateTime PeriodStart
        {
            get
            {
                return this.periodStart;
            }
            set
            {
                if (this.periodStart == value)
                    return;
     
                this.periodStart = value;
                this.OnPropertyChanged("PeriodStart");
            }
        }
        #endregion
     
        #region PeriodEnd
        private DateTime periodEnd;
        [TypeConverter(typeof(DateTimeTypeConverter))]
        public DateTime PeriodEnd
        {
            get
            {
                return this.periodEnd;
            }
            set
            {
                if (this.periodEnd == value)
                    return;
     
                this.periodEnd = value;
                this.OnPropertyChanged("PeriodEnd");
            }
        }
        #endregion
     
        #region VisiblePeriodStart
        private DateTime visiblePeriodStart;
        //[TypeConverter(typeof(DateTimeTypeConverter))]
        public DateTime VisiblePeriodStart
        {
            get
            {
                return this.visiblePeriodStart;
            }
            set
            {
                if (this.visiblePeriodStart == value)
                    return;
     
                this.visiblePeriodStart = value;
                this.OnPropertyChanged("VisiblePeriodStart");
            }
        }
        #endregion
     
        #region VisibleperiodEnd
        private DateTime visiblePeriodEnd;
        //[TypeConverter(typeof(DateTimeTypeConverter))]
        public DateTime VisiblePeriodEnd
        {
            get
            {
                return this.visiblePeriodEnd;
            }
            set
            {
                if (this.visiblePeriodEnd == value)
                    return;
     
                this.visiblePeriodEnd = value;
                this.OnPropertyChanged("VisiblePeriodEnd");
            }
        }
        #endregion
     
        #region SelectionStart
        private DateTime _selectionStart = DateTime.MinValue;
        public DateTime SelectionStart
        {
            get
            {
                return _selectionStart;
            }
            set
            {
     
                if (this._selectionStart == value)
                    return;
     
                this._selectionStart = value;
                this.OnPropertyChanged("SelectionStart");
            }
        }
        #endregion
     
        #region SelectionEnd
        private DateTime _selectionEnd = DateTime.MinValue;
        public DateTime SelectionEnd
        {
            get
            {
                return _selectionEnd;
            }
            set
            {
     
                if (this._selectionEnd == value)
                    return;
     
                this._selectionEnd = value;
                this.OnPropertyChanged("SelectionEnd");
            }
        }
        #endregion
     
     
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
     
        private void GenerateData()
        {
            List<FlightStats> data = new List<FlightStats>();
            List<FlightReport> reports = new List<FlightReport>();
            Random r = new Random();
     
            for (DateTime currentDate = SelectionStart; currentDate <= SelectionEnd; currentDate = currentDate.AddDays(1))
            {
                int arrivals = r.Next(0, 100);
                int departures = r.Next(0, 100);
                data.Add(new FlightStats(currentDate, FlightType.Arrivals, arrivals));
                data.Add(new FlightStats(currentDate, FlightType.Departures, departures));
                reports.Add(new FlightReport(currentDate, arrivals + departures));
            }
     
            this.FlightStats = data;
            this.FlightReports = reports;
        }
    }



    <UserControl x:Class="Chart_TimeBar.MainPage"
        xmlns:example="clr-namespace:Chart_TimeBar.ViewModels"
        xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
        xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
        xmlns:charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
        mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800" xml:lang="en-US">
        <UserControl.Resources>
            <example:ExampleViewModel x:Key="ViewModel" />
     
            <example:EndDayConverter x:Key="EndDayConverter" />
     
            <SolidColorBrush x:Key="TextColor" Color="{Binding Source={StaticResource ViewModel}, Path=ForegroundColor}" />
            <SolidColorBrush x:Key="HighlightTextColor" Color="{Binding Source={StaticResource ViewModel}, Path=HighlightColor}" />
        </UserControl.Resources>
     
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.Resources>
                <Style x:Key="TransitionControlStyle" TargetType="telerik:RadTransitionControl">
                    <Setter Property="Transition">
                        <Setter.Value>
                            <telerik:FadeTransition />
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>
     
            <Border telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True" />
            <Grid Margin="6">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <example:ExampleViewModel x:Name="viewModel" />
                <Grid Grid.Row="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="150" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                     
                    <telerik:RadTimeBar Name="timeBar1" Grid.Row="0"
                                        PeriodStart="{Binding PeriodStart, Mode=TwoWay}"
                                        PeriodEnd="{Binding PeriodEnd, Mode=TwoWay}"
                                        VisiblePeriodStart="{Binding VisiblePeriodStart, Mode=TwoWay}"
                                        VisiblePeriodEnd="{Binding VisiblePeriodEnd, Mode=TwoWay}"
                                        SelectionStart="{Binding SelectionStart, Mode=TwoWay}"
                                        SelectionEnd="{Binding SelectionEnd, Mode=TwoWay}"                                   
                                        IsSnapToIntervalEnabled="True"
                                        MinSelectionRange="7.00:00:00"
                                        MaxSelectionRange="31.00:00:00">
                         
                        <telerik:RadTimeBar.Intervals>
                            <telerik:QuarterInterval />
                            <telerik:MonthInterval />
                            <telerik:WeekInterval />
                            <telerik:DayInterval />
                            <telerik:HourInterval/>
                        </telerik:RadTimeBar.Intervals>
                         
                        <telerik:RadLinearSparkline LineStroke="#FF767676" ItemsSource="{Binding FlightReports, ElementName=viewModel}" XValuePath="TimeStamp" YValuePath="FlightCount" />
     
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <ei:CallMethodAction MethodName="SelectionPeriodChanged" TargetObject="{Binding}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
     
     
                    </telerik:RadTimeBar>
                    <Border Grid.Row="1">
                        <StackPanel Margin="3,2" Orientation="Horizontal" VerticalAlignment="Center">
                            <StackPanel.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="FontSize" Value="10" />
                                </Style>
                            </StackPanel.Resources>
                            <TextBlock Text="Current selection: "
                                       Foreground="{StaticResource TextColor}" />
                            <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionStart}"
                                       Foreground="{StaticResource HighlightTextColor}" />
                            <TextBlock Text=" - "
                                       Foreground="{StaticResource TextColor}" />
                            <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionEnd, Converter={StaticResource EndDayConverter}}"
                                       Foreground="{StaticResource HighlightTextColor}"  />
                            <TextBlock Text="Min selection: " Margin="10,0,0,0"
                                       Foreground="{StaticResource TextColor}" />
                            <TextBlock Text="3 days"
                                       Foreground="{StaticResource HighlightTextColor}"  />
                            <TextBlock Text="Max selection: " Margin="10,0,0,0"
                                       Foreground="{StaticResource TextColor}" />
                            <TextBlock Text="14 days"
                                       Foreground="{StaticResource HighlightTextColor}"  />
                        </StackPanel>
                    </Border>
                </Grid>
                <Grid Grid.Row="1" Margin="0,20,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="463*" />
                        <ColumnDefinition Width="311*" />
                    </Grid.ColumnDefinitions>
     
                    <chart:RadChart BorderThickness="1">
                        <chart:RadChart.SeriesMappings>
                            <charting:SeriesMapping>
                                <charting:SeriesMapping.SeriesDefinition>
                                    <charting:LineSeriesDefinition />
                                </charting:SeriesMapping.SeriesDefinition>
                                <charting:SeriesMapping.ItemMappings>
                                    <charting:ItemMapping FieldName="TimeStamp" DataPointMember="XCategory" />
                                    <charting:ItemMapping FieldName="FlightCount" DataPointMember="YValue" />
                                </charting:SeriesMapping.ItemMappings>
                            </charting:SeriesMapping>
                        </chart:RadChart.SeriesMappings>
     
                        <chart:RadChart.DefaultView>
                            <charting:ChartDefaultView>
                                <charting:ChartDefaultView.ChartLegend >
                                    <charting:ChartLegend Name="legend" Visibility="Collapsed" />
                                </charting:ChartDefaultView.ChartLegend>
                                <charting:ChartDefaultView.ChartArea>
                                    <charting:ChartArea LegendName="legend"
                                                       EnableAnimations="False"
                                                       EnableTransitionAnimations="True"
                                                       TransitionControlStyle="{StaticResource TransitionControlStyle}">
                                        <charting:ChartArea.AxisY>
                                            <charting:AxisY Title="Number of Flights" StripLinesVisibility="Collapsed" MajorGridLinesVisibility="Visible" IsZeroBased="True" />
                                        </charting:ChartArea.AxisY>
                                        <charting:ChartArea.AxisX>
                                            <charting:AxisX Title="Date" IsDateTime="True" DefaultLabelFormat="#VAL{dd.MM.yyyy HH:mm:ss}" />
                                        </charting:ChartArea.AxisX>
                                    </charting:ChartArea>
                                </charting:ChartDefaultView.ChartArea>
                                <charting:ChartDefaultView.ChartTitle>
                                    <charting:ChartTitle FontWeight="Normal">
                                        <StackPanel Orientation="Vertical">
                                            <TextBlock Text="Flight statistics for the selected period " FontSize="14" />
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                                <StackPanel.Resources>
                                                    <Style TargetType="TextBlock">
                                                        <Setter Property="FontSize" Value="10" />
                                                    </Style>
                                                </StackPanel.Resources>
                                                <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionStart, StringFormat='MMMM dd, yyyy'}" />
                                                <TextBlock Text=" - " />
                                                <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionEnd, Converter={StaticResource EndDayConverter}, StringFormat='MMMM dd, yyyy'}" />
                                            </StackPanel>
                                        </StackPanel>
                                    </charting:ChartTitle>
                                </charting:ChartDefaultView.ChartTitle>
                            </charting:ChartDefaultView>
                        </chart:RadChart.DefaultView>
                        <chart:RadChart.TimeBar>
                            <Binding ElementName="timeBar1" />
                        </chart:RadChart.TimeBar>
                        <chart:RadChart.ItemsSource>
                            <Binding ElementName="viewModel" Path="FlightReports" />
                        </chart:RadChart.ItemsSource>
                    </chart:RadChart>
     
                    <chart:RadChart Grid.Column="1" BorderThickness="0,1,1,1">
                        <chart:RadChart.SeriesMappings>
                            <charting:SeriesMapping>
                                <charting:SeriesMapping.SeriesDefinition>
                                    <charting:PieSeriesDefinition StartAngle="90" LabelOffset="1.2" />
                                </charting:SeriesMapping.SeriesDefinition>
                                <charting:SeriesMapping.ItemMappings>
                                    <charting:ItemMapping FieldName="TimeStamp" DataPointMember="XCategory" />
                                    <charting:ItemMapping FieldName="FlightCount" AggregateFunction="Sum" DataPointMember="YValue" />
                                    <charting:ItemMapping FieldName="Type" DataPointMember="LegendLabel" />
                                </charting:SeriesMapping.ItemMappings>
                                <charting:SeriesMapping.GroupingSettings>
                                    <charting:GroupingSettings ShouldFlattenSeries="True">
                                        <charting:GroupingSettings.GroupDescriptors>
                                            <charting:ChartGroupDescriptor Member="Type" />
                                        </charting:GroupingSettings.GroupDescriptors>
                                    </charting:GroupingSettings>
                                </charting:SeriesMapping.GroupingSettings>
                            </charting:SeriesMapping>
                        </chart:RadChart.SeriesMappings>
     
                        <chart:RadChart.DefaultView>
                            <charting:ChartDefaultView>
                                <charting:ChartDefaultView.ChartLegend >
                                    <charting:ChartLegend Name="legend2" />
                                </charting:ChartDefaultView.ChartLegend>
                                <charting:ChartDefaultView.ChartArea>
                                    <charting:ChartArea LegendName="legend2"
                                                       EnableAnimations="False"
                                                       EnableTransitionAnimations="True"
                                                       TransitionControlStyle="{StaticResource TransitionControlStyle}"
                                                       Padding="10,5,10,45"/>
                                </charting:ChartDefaultView.ChartArea>
                                <charting:ChartDefaultView.ChartTitle>
                                    <charting:ChartTitle FontWeight="Normal">
                                        <StackPanel Orientation="Vertical">
                                            <TextBlock Text="Arrivals and Departures statistics " FontSize="14" />
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                                <StackPanel.Resources>
                                                    <Style TargetType="TextBlock">
                                                        <Setter Property="FontSize" Value="10" />
                                                    </Style>
                                                </StackPanel.Resources>
                                                <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionStart, StringFormat='MMMM dd, yyyy'}" />
                                                <TextBlock Text=" - " />
                                                <TextBlock Text="{Binding ElementName=timeBar1, Path=SelectionEnd, Converter={StaticResource EndDayConverter}, StringFormat='MMMM dd, yyyy'}" />
                                            </StackPanel>
                                        </StackPanel>
                                    </charting:ChartTitle>
                                </charting:ChartDefaultView.ChartTitle>
                            </charting:ChartDefaultView>
                        </chart:RadChart.DefaultView>
                        <chart:RadChart.TimeBar>
                            <Binding ElementName="timeBar1" />
                        </chart:RadChart.TimeBar>
                        <chart:RadChart.ItemsSource>
                            <Binding ElementName="viewModel" Path="FlightStats" />
                        </chart:RadChart.ItemsSource>
                    </chart:RadChart>
                </Grid>
            </Grid>
        </Grid>
     
        <telerikQuickStart:QuickStart.ExampleHeader>
            <TextBlock Text="Flight statistics" Margin="8" />
        </telerikQuickStart:QuickStart.ExampleHeader>
    </UserControl>

     

    Unfortunately the data do not show

    Any advice would be appreciated!



  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 15 Mar 2012 Link to this post

    Hi Elena,

    I reviewed your code and I noticed that have not set ElementName in your binding expressions. For example:
    <telerik:RadTimeBar Name="timeBar1" Grid.Row="0"
                        PeriodStart="{Binding PeriodStart, Mode=TwoWay, ElementName=viewModel}"
                        PeriodEnd="{Binding PeriodEnd, Mode=TwoWay, ElementName=viewModel}"
                        VisiblePeriodStart="{Binding VisiblePeriodStart, Mode=TwoWay, ElementName=viewModel}"
                        VisiblePeriodEnd="{Binding VisiblePeriodEnd, Mode=TwoWay, ElementName=viewModel}"
                        SelectionStart="{Binding SelectionStart, Mode=TwoWay, ElementName=viewModel}"
                        SelectionEnd="{Binding SelectionEnd, Mode=TwoWay, ElementName=viewModel}"                                  
                        IsSnapToIntervalEnabled="True"
                        MinSelectionRange="7.00:00:00"
                        MaxSelectionRange="31.00:00:00">


    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <ei:CallMethodAction MethodName="SelectionPeriodChanged" TargetObject="{Binding ElementName=viewModel}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>

    Greetings,
    Tsvetie
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
Back to Top