or
<telerik:RadTimeBar Height="150" Margin="40,20,40,40" telerik:StyleManager.Theme="Windows7" PeriodStart="{Binding PeriodStart, Mode=TwoWay}" PeriodEnd="{Binding PeriodEnd, Mode=TwoWay}" VisiblePeriodStart="{Binding VisibleStart, Mode=TwoWay}" VisiblePeriodEnd="{Binding VisibleEnd, Mode=TwoWay}" SelectionStart="{Binding SelectionStart, Mode=TwoWay}" SelectionEnd="{Binding SelectionEnd, Mode=TwoWay}" > <telerik:RadTimeBar.Intervals> <telerik:YearInterval /> <telerik:MonthInterval /> <telerik:DayInterval /> </telerik:RadTimeBar.Intervals> <telerik:RadAreaSparkline ItemsSource="{Binding TimeBarData}" XValuePath="Date" YValuePath="Total" telerik:StyleManager.Theme="Windows7" AutoRange="False" /> </telerik:RadTimeBar>public class ViewModel { public ObservableCollection<DetailTimeBarModel> TimeBarData { get; private set; } public DateTime PeriodStart { get; set; } public DateTime PeriodEnd { get; set; } public DateTime VisibleStart { get; set; } public DateTime VisibleEnd { get; set; } public DateTime SelectionStart { get; set; } public DateTime SelectionEnd { get; set; } public ViewModel() { TimeBarData = new ObservableCollection<DetailTimeBarModel> { new DetailTimeBarModel {Date = DateTime.Now.AddDays(-20), Total = 5}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-18), Total = 1}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-16), Total = 3}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-14), Total = 7}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-12), Total = 6}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-10), Total = 3}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-8), Total = 12}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-6), Total = 6}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-4), Total = 3}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(-2), Total = 3}, new DetailTimeBarModel {Date = DateTime.Now.AddDays(0), Total = 2} }; PeriodStart = TimeBarData.Min(x => x.Date); PeriodEnd = TimeBarData.Max(x => x.Date); VisibleStart = PeriodEnd.AddDays(-10); VisibleEnd = PeriodEnd; SelectionStart = PeriodEnd.AddDays(-2); SelectionEnd = PeriodEnd; } } public class DetailTimeBarModel { public DateTime Date { get; set; } public int Total { get; set; } }this.StartDate = startDate;this.EndDate = endDate;this.StartDate = startDate;this.VisibleStartDate = startDate;this.VisibleEndDate = endDate;this.VisibleStartDate = startDate;<DataTemplate x:Key="MyTemplate"> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="200"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label Content="Driver" Grid.Row="0"/> <Label Content="Document Number" Grid.Row="1"/> <Label Content="Issue Date" Grid.Row="2"/> <Label Content="Expiry Date" Grid.Row="3"/> <Label Content="Place of Issue" Grid.Row="4"/> <Label Content="Document Type" Grid.Row="5"/> <Label Content="Remarks" Grid.Row="6"/> <telerik:RadAutoCompleteBox AutoCompleteMode="Suggest" TextSearchPath="FullName" ItemsSource="{Binding Drivers,ElementName=DriverDocumentView1}" Name="RadAutoCompleteBox" SearchTextChanged="RadAutoCompleteBox_SearchTextChanged" TextSearchMode="Contains" SelectionMode="Single" DisplayMemberPath="Name" SelectedItem="{Binding SelectedDriver,ElementName=DriverDocumentView1}" Grid.Column="1" Grid.Row="0"/> <TextBox Text="{Binding Document.DocumentNo}" Grid.Row="1" Grid.Column="1"/> <DatePicker SelectedDate="{Binding IssueDate}" Grid.Row="2" Grid.Column="1"/> <DatePicker SelectedDate="{Binding ExpiryDate}" Grid.Row="3" Grid.Column="1"/> <ComboBox ItemsSource="{Binding PlacesOfIssue,ElementName=DriverDocumentView1}" DisplayMemberPath="Text" SelectedValuePath="ID" SelectedValue="{Binding Document.PlaceOfIssueID}" Grid.Column="1" Grid.Row="4"/> <ComboBox ItemsSource="{Binding DocumentTypes,ElementName=DriverDocumentView1}" DisplayMemberPath="Name" SelectedValuePath="ID" SelectedValue="{Binding Document.DocumentTypeID}" Grid.Column="1" Grid.Row="5"/> <TextBox Text="{Binding Remarks}" Grid.Row="6" Grid.Column="1"/> </Grid> </DataTemplate>private Driver selectedDriver; public Driver SelectedDriver { get { return selectedDriver; } set { selectedDriver = value; NotifyPropertyChanged("SelectedDriver"); } }private void SaveBTN_Click(object sender, RoutedEventArgs e) { if (RadDataForm.ValidateItem()) { DriverDocument driverDocument = RadDataForm.CurrentItem.To<DriverDocument>(); driverDocument.Document.CreationDate = DateTime.Now; driverDocument.Document.EntryByID = 178; driverDocument.Driver = SelectedDriver; RadDataForm.SubmitChanges(); } }<telerik:RadChart Grid.Row="0" Grid.Column="0" x:Name="TimeRangeChart" ItemsSource="{Binding PhasingOptionList}" UseDefaultLayout="False" DataBound="TimeRangeChart_Loaded"> <telerik:RadChart.Resources> <Style x:Key="CustomAxisTitleStyle" TargetType="telerik:AxisTitle"> <Setter Property="FontWeight" Value="Normal" /> <Setter Property="Margin" Value="0,0,10,0" /> </Style> <Style x:Key="SeriesItemLabelStyle" TargetType="telerik:SeriesItemLabel"> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <Style x:Key="ItemLabelStyle" TargetType="TextBlock"> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="Visibility" Value="Collapsed"/> </Style> </telerik:RadChart.Resources> <telerik:RadChart.SeriesMappings> <telerik:SeriesMapping ChartAreaName="ChartArea" > <telerik:SeriesMapping.SeriesDefinition> <telerik:HorizontalRangeBarSeriesDefinition ShowItemLabels="True" ItemLabelFormat="#OptionName - #ColourDescr" ShowItemToolTips="True" SeriesItemLabelStyle="{StaticResource SeriesItemLabelStyle}"> <telerik:HorizontalRangeBarSeriesDefinition.InteractivitySettings> <telerik:InteractivitySettings SelectionMode="Single" SelectionScope="Item" HoverScope="Item" /> </telerik:HorizontalRangeBarSeriesDefinition.InteractivitySettings> </telerik:HorizontalRangeBarSeriesDefinition> </telerik:SeriesMapping.SeriesDefinition> <telerik:ItemMapping FieldName="ProposedSellTimeFromCodeNumeric" DataPointMember="Low" /> <telerik:ItemMapping FieldName="ProposedSellTimeToCodeNumeric" DataPointMember="High" /> <telerik:ItemMapping FieldName="OptionNo" DataPointMember="XCategory" /> </telerik:SeriesMapping> </telerik:RadChart.SeriesMappings> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> </Grid.RowDefinitions> <telerik:ChartArea Grid.Row="0" x:Name="ChartArea" NoDataString="" LabelFormatBehavior="None" ItemClick="ChartArea_ItemClick" ItemToolTipOpening="ChartArea_ItemToolTipOpening" PaletteBrushesRepeat="False" EnableAnimations="False" > <telerik:ChartArea.ZoomScrollSettingsX> <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom" MinZoomRange="0.005"/> </telerik:ChartArea.ZoomScrollSettingsX> <telerik:ChartArea.PaletteBrushes> <SolidColorBrush Color="#FF74A6E2"/> </telerik:ChartArea.PaletteBrushes> <telerik:ChartArea.AxisY> <telerik:AxisY Title="{Binding BottomTimePeriodDescription}" ExtendDirection="Up" DefaultLabelFormat="{Binding TimeValueLabelFormat}" MinValue="{Binding FromWeekNumeric}" MaxValue="{Binding ToWeekNumeric}" AutoRange="False" LabelRotationAngle="-45" MinorTicksVisibility="Hidden"> <telerik:AxisY.AxisStyles> <telerik:AxisStyles TitleStyle="{StaticResource CustomAxisTitleStyle}" ItemLabelStyle="{StaticResource ChartAxisTextStyle}" /> </telerik:AxisY.AxisStyles> </telerik:AxisY> </telerik:ChartArea.AxisY> <telerik:ChartArea.AxisX> <telerik:AxisX LayoutMode="Inside" MinorTicksVisibility="Collapsed" MajorTicksVisibility="Collapsed" > <telerik:AxisX.AxisStyles> <telerik:AxisStyles ItemLabelStyle="{StaticResource ItemLabelStyle}" /> </telerik:AxisX.AxisStyles> </telerik:AxisX> </telerik:ChartArea.AxisX> </telerik:ChartArea> </Grid> </telerik:RadChart>