RadChart X-Axis not Synchronized with RadTimeBar ViewPort

3 posts, 0 answers
  1. Twinkle
    Twinkle avatar
    4 posts
    Member since:
    Jun 2013

    Posted 19 Jan 2014 Link to this post

    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
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 22 Jan 2014 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft banner
  4. Twinkle
    Twinkle avatar
    4 posts
    Member since:
    Jun 2013

    Posted 30 Jan 2014 in reply to Tsvetie Link to this post

    Thanks for your support.
Back to Top