This is a migrated thread and some comments may be shown as answers.
RadChart X-Axis not Synchronized with RadTimeBar ViewPort
2 Answers 10 Views
This is a migrated thread and some comments may be shown as answers.
Twinkle
Top achievements
Rank 1
Twinkle asked on 19 Jan 2014, 12:45 PM
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 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 22 Jan 2014, 04:37 PM
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 >>
0
Twinkle
Top achievements
Rank 1
answered on 30 Jan 2014, 08:19 AM
Thanks for your support.
Asked by
Twinkle
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Twinkle
Top achievements
Rank 1
Share this question
or