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:telerik="http://schemas.telerik.com/2008/xaml/presentation" 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!
1 Answer, 1 is accepted
0
Hi Elena,
I reviewed your code and I noticed that have not set ElementName in your binding expressions. For example:
Greetings,
Tsvetie
the Telerik team
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 >>