[Solved] RadChart X-Axis not Synchronized with RadTimeBar ViewPort

[Twinkle]

Hi
The Telerik Team.

I need RadChart inside the RadTimeBar instead of RadSparkline. I have attached screen shots and my dummy implementation  with this thread. The viewport of the RadTimeBar not property matching with the chart's X-Axis.
Main issue:
1. The last hour of Time Bar not matching with chart ( more cleared in screen shot named showing12hronchart.jpg)
2. for more then 1 days also ( see screen shot formorethen1days-2ndimagefor11pm.png)
 

please note i only need to show hourly data.

Main.xaml

<Grid x:Name="LayoutRoot" Background="White">
       <telerik:RadTimeBar Name="timeBar1" Grid.Row="1"  Width="1200" Height="200"
                     PeriodStart="2011-01-01" PeriodEnd="2011-01-03" <!-- please change to one day -->
                     IsSnapToIntervalEnabled="True">
           <telerik:RadTimeBar.Intervals>
               <telerik:HourInterval/>
               <telerik:DayInterval/>
           </telerik:RadTimeBar.Intervals>

           <Grid Margin="0,10,0, 10">
               <telerik:RadChart ItemsSource="{Binding Items}" >
                   <telerik:RadChart.DefaultView>
                       <telerik:ChartDefaultView>
                           <telerik:ChartDefaultView.ChartLegend>
                               <telerik:ChartLegend Visibility="Collapsed"></telerik:ChartLegend>
                           </telerik:ChartDefaultView.ChartLegend>
                           <telerik:ChartDefaultView.ChartArea>
                               <telerik:ChartArea Margin="0 0 0 0" Padding="0 0 0 0">
                                   <telerik:ChartArea.AxisY>
                                       <telerik:AxisY Visibility="Collapsed" />
                                   </telerik:ChartArea.AxisY>
                                   <telerik:ChartArea.AxisX>
                                       <telerik:AxisX DefaultLabelFormat="hh" />
                                   </telerik:ChartArea.AxisX>
                               </telerik:ChartArea>
                           </telerik:ChartDefaultView.ChartArea>
                       </telerik:ChartDefaultView>
                   </telerik:RadChart.DefaultView>

                   <telerik:RadChart.SeriesMappings>
                       <telerik:SeriesMapping>
                           <telerik:SeriesMapping.SeriesDefinition>
                               <telerik:BarSeriesDefinition  />
                           </telerik:SeriesMapping.SeriesDefinition>
                           <telerik:SeriesMapping.ItemMappings>
                               <telerik:ItemMapping FieldName="DateTimeStamp" DataPointMember="XValue" />
                               <telerik:ItemMapping FieldName="Data" DataPointMember="YValue" />
                           </telerik:SeriesMapping.ItemMappings>
                       </telerik:SeriesMapping>
                   </telerik:RadChart.SeriesMappings>
               </telerik:RadChart>
           </Grid>
       </telerik:RadTimeBar>
   </Grid>

 Main.cs

namespace timebar
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            this.DataContext = this;
            InitializeComponent();

        }

        public List<Item> Items
        {
            get
            {
                List<Item> items = new List<Item>();
                Random r = new Random();

                for (DateTime date = timeBar1.PeriodStart; date < timeBar1.PeriodEnd; date = date.AddHours(1))
                {
                    items.Add(new Item() { Data = r.Next(10, 100), DateTimeStamp = date });
                }

                return items;
            }
        }
    }

    public class Item
    {
        public int Data
        {
            get;
            set;
        }
        public DateTime DateTimeStamp
        {
            get;
            set;
        }
    }
}

Thanks
Twinkle Bhumra

[Tsvetie]

Hello Twinkle Bhumra,

In order to make sure that the axis of the chart matches the axis of the timeBar control, you need to manually synchronize them. In order to do so, you can use the AutoRange, Step, MinValue, MaxValue properties of the chart axis.

For example:

<telerik:AxisX x:Name="HorizontalAxis" DefaultLabelFormat="hh"
    AutoRange="False"
    Step="{Binding CurrentItemInterval, ElementName=timeBar1, Converter={StaticResource timeConverter}}"
    MinValue="{Binding PeriodStart, ElementName=timeBar1, Converter={StaticResource dateConverter}, ConverterParameter=0}"
    MaxValue="{Binding PeriodEnd, ElementName=timeBar1, Converter={StaticResource dateConverter}, ConverterParameter=-1}"/>

I have attached my test code for your reference.

Regards,
Tsvetie
Telerik

[Twinkle]

Thanks for your support.