TimeBar and Chart SelectionChanged

[Elena]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    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!

Отменить изменения

[Tsvetie]

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