ColumnSparkline not aligned with TimeBar

[Matteo]

Hi, I have a strange issue with the TimeBar control:

if I put a RadLinearSparkline inside of it everything works as exected, but if I try replacing the RadLinearSparkline with a RadColumnSparkline, the content doesn't match the timeline anymore. Looks like there's some kind of margin that keeps accomulating until the columns are represented between two days.

The image I've attached best represents the situation, I've also attached the code so that you can see that I'm not doing anything different when using the two controls.

I really need to use the RadColumnSparkline, what can I do to make sure everything is aligned properly?

Thanks in advance,

Matteo

[Stefan]

Hello Matteo,

Thanks for the images provided.

Since you clarified that the RadTimeBar is working as expected with RadLinearSparkline, I assume that the PeriodStart and PeriodEnd properties of RadTimeBar are synchronized with the start and end properties of the source of RadSparkline. If this is the case, you can try setting the ColumnLayoutMode property of RadColumnSparkline to Normal. Thus, the RadTimeBar should be controlling where the bars of the RadColumnSparkline will be positioned. The topic is discussed in details in the Sparkline columns not showed for correct time forum thread. Can you please check it out?

Best Regards,
Stefan X1
Progress Telerik

[Tulio]

I am having exactly the same problem, but setting the ColumnLayoutMode to Normal didn't help.

 

I made sure that the PeriodStart and the first X value are equal (same with the PeriodEnd and last X value), however the intervals and columns are still not aligned.

[Tulio]

Just to add a bit more information, my columns go exactly in the middle of the timeranges.

I've attached a screenshot and this is my xaml.  By the way, I am already making sure the PeriodStart/End are the same as the first and last X value of my data. I am also adding empty points every 5 minutes. The plot works perfectly if I use ScatterPoints instead of columns (the point is exactly at the beginning of the interval.

 

 

 <telerik:RadTimeBar
                Grid.Column="1"
                    EnableSparklineVirtualization="True"
                x:Name="TimeBar"
                PeriodStart="{Binding AppearanceSearchOverview.PeriodStart}"
                PeriodEnd="{Binding AppearanceSearchOverview.PeriodEnd}"
                Selection="{Binding Path=TimeRange, Converter={StaticResource TelerikTimeRangeConverter}, Mode=TwoWay}"
                SelectionThumbStyle="{StaticResource SelectionThumbWithoutTimeRangeHeaderStyle}"
                MinSelectionRange="00:01:00"
                MaxSelectionRange="72:00:00"
                MinZoomRange="00:05:00"
                VisiblePeriodStart="{Binding AppearanceSearchOverview.VisiblePeriodStart, Converter={StaticResource DateTimeToLocalTimeConverter}}"
                VisiblePeriodEnd="{Binding AppearanceSearchOverview.VisiblePeriodEnd, Converter={StaticResource DateTimeToLocalTimeConverter}}"
                Background="{StaticResource PanelBackgroundBrush}"
                SelectionTitleFormatString="{Binding Converter={StaticResource TelerikTimeRangeFormatConverter}, Mode=OneTime}"
                BorderThickness="0 0 0 1">

                  <telerik:RadTimeBar.Resources>
                    <Conv:HourFormatterProvider x:Key="HourFormatterProvider"/>
                  </telerik:RadTimeBar.Resources>
                  <telerik:RadTimeBar.Intervals>
                    <telerik:DayInterval />
                    <telerik:HourInterval IntervalSpans="1, 6" FormatterProvider="{StaticResource HourFormatterProvider}" />
                    <telerik:MinuteInterval IntervalSpans="1, 5" />
                  </telerik:RadTimeBar.Intervals>

                  <telerik:RadColumnSparkline
                  AutoRange="False"
                  ItemFill="#3D6F99"
                  ColumnLayoutMode="Normal"
                  HighPointBrush="Orange"
                  ShowHighPointIndicators="True"
                  ItemsSource="{Binding AppearanceSearchOverview.Results}"
                  XValuePath="X"
                  MinYValue="{Binding AppearanceSearchOverview.MinValue}"
                  MaxYValue="{Binding AppearanceSearchOverview.MaxValue}"
                  MinXValue="{Binding ElementName=TimeBar, Path=PeriodStart.Ticks}"
                  MaxXValue="{Binding ElementName=TimeBar, Path=PeriodEnd.Ticks}"
                  YValuePath="Y">
                  </telerik:RadColumnSparkline>

                </telerik:RadTimeBar>

 

[Martin Ivanov]

Hello Matteo,

This happens because of the default columns layout strategy. Basically, the column is positioned between two data points. In order to change this and show the column on the data point you can set the ColumnLayoutMode property of the RadColumnSparkline to Normal.

<telerik:RadColumnSparkline ColumnLayoutMode="Normal"/>

Regards,
Martin Ivanov
Progress Telerik

[Tulio]

Hi! 

 

As you can see in my xaml, columnLayout is already set to normal. What else should I do.

[Martin Ivanov]

Hello Tulio,

I missed the property setting. Please excuse me for that. I attached the project I used for testing this but everything seems to work properly on my side. Can you give it a try and let me know if I am missing something?

Also, you can consider replacing the sparkline with a RadCartesianChart with BarSeries. You can see an example showing integration between RadTimeBar and RadCartesianChart in our SDK repository.

Regards,
Martin Ivanov
Progress Telerik