RadTimeBar & RadSparkLine not correcty sized at first load

[Michele]

Hello,
I've moved from RadChart to RadSparkLine btw the first time the RadTimeBar shows it's not in the correct scale..

I have to show on the X a datetime and on the Y a double... In the timebar I have DateStart and a DateEnd, but the data are not to start at DataStart...

Consider this scenario
DateStart = 8:00 AM
DateEnd = 11:00 PM

Data starts from 9:00 ... the first time the timebar shows I've the RadSparkLine scale that strech on whole RadTimeBar.. when I change the selected item (from a radgridview) then return back, the data are correcly sized...

Here's my XAML

<UserControl.Resources>
        <ResourceDictionary>
            <conv:DateTimeToOADateConverter x:Key="DateTimeToOADateConverter"></conv:DateTimeToOADateConverter>
            <conv:DateConverterTimeBar x:Key="t1"></conv:DateConverterTimeBar>
        </ResourceDictionary>
        <DataTemplate x:Key="test123">
            <TextBlock Text="TooltipExaple"></TextBlock>
        </DataTemplate>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" ></RowDefinition>
        </Grid.RowDefinitions>

        <telerik:RadTimeBar Name="timeBar1" Grid.Row="0" Width="1200" Background="{x:Null}"
                PeriodStart="{Binding DashBoard.SelectedDataItem.DataRiferimentoStart,Mode=TwoWay,Converter={StaticResource t1}}"
                PeriodEnd="{Binding DashBoard.SelectedDataItem.DataRiferimentoEnd,Mode=TwoWay,Converter={StaticResource t1},ConverterParameter=next_day}"
                VisiblePeriodStart="{Binding DashBoard.SelectedDataItem.FirstTS,Mode=TwoWay,Converter={StaticResource t1}}"
                VisiblePeriodEnd="{Binding DashBoard.SelectedDataItem.LastTS,Mode=TwoWay,Converter={StaticResource t1},ConverterParameter=next_day}"
                SelectionStart="{Binding DashBoard.SelectionDateStart,Mode=OneWay}"
                SelectionEnd="{Binding DashBoard.SelectionDateEnd,Mode=OneWay}"
                SelectionTitleFormatString="{}{0:HH:mm:ss} - {1:HH:mm:ss}"
                BorderBrush="{x:Null}" BorderThickness="0" Foreground="{StaticResource text}"
                FontFamily="{Binding Source={StaticResource paletteManager}, Path=Palette.font,Mode=TwoWay}" >

            <telerik:RadTimeBar.Intervals>
                <telerik:DayInterval></telerik:DayInterval>
                <telerik:HourInterval IntervalSpans="1"/>
                <telerik:MinuteInterval IntervalSpans="1,5,10,15,30"/>
                <telerik:SecondInterval IntervalSpans="10,15,30,60" />
            </telerik:RadTimeBar.Intervals>

            <telerik:RadLinearSparkline AutoRange="True" LineStroke="{StaticResource AccentBrush}"
                                        MinXValue="{Binding DashBoard.SelectedDataItem.DataRiferimentoStart,Mode=OneWay,Converter={StaticResource DateTimeToOADateConverter}}"
                                        MaxXValue="{Binding DashBoard.SelectedDataItem.DataRiferimentoEnd,Mode=OneWay,Converter={StaticResource DateTimeToOADateConverter}}"

                                        ItemsSource="{Binding DashBoard.SelectedDataItem.SNAPSHOTs,Mode=TwoWay}" XValuePath="DT_TS" YValuePath="VALORE"
    EmptyPointBehavior="ShowAsZero">
            </telerik:RadLinearSparkline>

            <!--<telerik:RadCartesianChart x:Name="RadChart1"  Grid.Row="1" Margin="10,0,0,10" >
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeCategoricalAxis  LabelFormat="HH:mm\h" LabelInterval="2" PlotMode="OnTicksPadded"   >

                    </telerik:DateTimeCategoricalAxis>
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis MajorStep="20"  />
                </telerik:RadCartesianChart.VerticalAxis>

                <telerik:LineSeries    CategoryBinding="DT_TS" ValueBinding="VALORE" ItemsSource="{Binding DashBoard.SelectedDataItem.SNAPSHOTs,Mode=TwoWay}"/>

            </telerik:RadCartesianChart>-->

        </telerik:RadTimeBar>

What can I check? with RadChart it was ok...
Thanks

[Petar Kirov]

Hello Paolo,

There were two problems I found in your code:

• The AutoRange property of the RadLinearSparkline was set to True (you should set it to false when using manual range)
• MinXValue and MaxXValue should be bound to the Ticks property of the DateTime objects that are set to the DashBoard.SelectedDataItem.DataRiferimentoStart and DashBoard.SelectedDataItem.DataRiferimentoEnd properties (instead of using a converter to get the DateTime in OA format. 

I hope this helps.

Greetings,
Petar Kirov
the Telerik team

[Michele]

Excuse me Petar,
can you please provide me a sample where I use a RadChartesianChart instead of RadSparkLine? I've seen no way of sizine to the range of FirstTS LastTS,
Thanks

[Petar Kirov]

Hello Paolo,

First of all, could you tell me if you have tried the suggestions from my last post and if they helped? Is there any other problem you are experiencing with the RadSparkline?

Generally speaking, it is possible to use RadCartesianChart inside a Timebar. However you would need to sync the chart x-axis with the TimeBar axis and take into account the width of the vertical axis so you can correctly offset the PeriodStart/PeriodEnd properties. 

That said, I believe that using RadSparkline would be a better choice because it is more lightweight and easier to set-up.

All the best,
Petar Kirov
the Telerik team