Sparkline columns not showed for correct time

[Mladen]

    Hi, I want to have RadTimeBar with different kind of content. So I have the following xaml (part of the user control):

<telerik:RadTimeBar Margin="3" x:Name="Timebar"
                           IsEnabled="{Binding IsTimeSelectionEnabled}"
                           Grid.Row="1"  VerticalAlignment="Top"
                           Height="90"
                           HorizontalAlignment="Stretch"
                           PeriodStart="{Binding PeriodStart, Mode=TwoWay}"
                           PeriodEnd="{Binding PeriodEnd, Mode=TwoWay}"
                           VisiblePeriodStart="{Binding VisiblePeriodStart, Mode=TwoWay}"
                           VisiblePeriodEnd="{Binding VisiblePeriodEnd, Mode=TwoWay}"
                           SelectionStart="{Binding SelectionStart, Mode=TwoWay}"
                           SelectionEnd="{Binding SelectionEnd, Mode=TwoWay}"
                           >

           <i:Interaction.Triggers>
               <i:EventTrigger EventName="SelectionChanged">
                   <i:InvokeCommandAction Command="{Binding ApplyPeriodCommand}"/>
               </i:EventTrigger>
           </i:Interaction.Triggers>
           <telerik:RadTimeBar.Intervals>
               <telerik:MonthInterval />
               <telerik:WeekInterval />
               <telerik:DayInterval />
               <telerik:HourInterval/>
           </telerik:RadTimeBar.Intervals>


       </telerik:RadTimeBar>

The content is set as follows in the code behind:

public FrameworkElement TimeBarContent
       {
           get { return this.Timebar.Content as FrameworkElement; }
           set
           {
               this.Timebar.Content = value;
           }
       }

       public TimeLineControl()
       {
           InitializeComponent();
           this.DataContextChanged += TimeLineControl_DataContextChanged;
       }

       void TimeLineControl_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
       {
           if (this.TimeBarContent == null) return;
           var timeLineViewModel = e.NewValue as TimeLineViewModel;
           if (timeLineViewModel != null)
               this.TimeBarContent.DataContext = timeLineViewModel.TimeBarContentDataContext;
       }

The SparkLine control, which is set as content of time line is:

<UserControl x:Class="Wave.Platform.PortalFramework.Infrastructure.Controls.Views.SparkLineControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
             xmlns:viewModels="clr-namespace:Wave.Platform.PortalFramework.Infrastructure.Controls.ViewModels"
             mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <d:DesignData.DataContext>
        <viewModels:SparklineControlViewModel/>
    </d:DesignData.DataContext>

    <telerik:RadColumnSparkline Name="SparkLine" ItemsSource="{Binding SparklineData}"
                                                    Margin="0,0,0,5"
                                                    ColumnWidthPercent="0.8"
                                                    XValuePath="Moment"
                                                    YValuePath="Value"
                                                    MaxYValue="{Binding Maximum}"
                                                    AutoRange="False" />
</UserControl>

The view model of the sparkline is as follows

[Export]
   [PartCreationPolicy(CreationPolicy.NonShared)]
   public class SparklineControlViewModel : NotificationObject, ITimeBarContentDataContext
   {
       private double _maximum;
       public double Maximum
       {
           get { return _maximum; }
           private set
           {
               _maximum = value;
               RaisePropertyChanged(()=>this.Maximum);
           }
       }

       private TimeSpan _groupingTimeSpan;
       public TimeSpan GroupingTimeSpan
       {
           get { return _groupingTimeSpan; }
           set
           {
               _groupingTimeSpan = value;
               RaisePropertyChanged(() => this.GroupingTimeSpan);
           }
       }

       private ObservableCollection<ColumnSparklineVM> _sparklineData = new ObservableCollection<ColumnSparklineVM>();
       public ObservableCollection<ColumnSparklineVM> SparklineData
       {
           get { return _sparklineData; }
           private set
           {
               _sparklineData = value;
               RaisePropertyChanged(()=>this.SparklineData);
           }
       }

       public SparklineControlViewModel()
       {

       }

       public void SetData(IEnumerable<IDataWithMoment> data)
       {
           this.SparklineData.Clear();
           var dataWithMoments = data as IList<IDataWithMoment> ?? data.ToList();
           if (!dataWithMoments.Any()) return;
           var groupedTimes = dataWithMoments.GroupBy(dt => dt.Moment.Ticks/this.GroupingTimeSpan.Ticks);
           this.SparklineData = groupedTimes.Select(g => new ColumnSparklineVM() { Moment = new DateTime(g.Key * GroupingTimeSpan.Ticks), Value = g.Count() }).ToObservable();
           SetMaximum();
       }

       public void SetData(IEnumerable<ColumnSparklineVM> data)
       {
           this.SparklineData = data.ToObservable();
           SetMaximum();
       }

       private void SetMaximum()
       {
           this.Maximum = Math.Max(Maximum, SparklineData.Max(s => s.Value));
       }

   }

   public class ColumnSparklineVM : NotificationObject
   {
       private double _value;
       public double Value
       {
           get { return _value; }
           set
           {
               _value = value;
               RaisePropertyChanged(()=>this.Value);
           }
       }

       private DateTime _moment;
       public DateTime Moment
       {
           get { return _moment; }
           set
           {
               _moment = value;
               RaisePropertyChanged(()=>this.Moment);
           }
       }
   }

   public interface IDataWithMoment
   {
       DateTime Moment { get; }
   }

Add some test data are inserted this way:

if (SparklineControlViewModel != null)
            {
                for (int i = 0; i < 1000; i++)
                {
                    ReportsBasic.Add(new DetailedReportBasic(){FirstLogicCause = new LogicCause(){ActivatedUtc = DateTime.Now.AddMinutes(-i)}});
                }
                SparklineControlViewModel.SetData(this.ReportsBasic);
            }

The TimeSpan of is set to One hour , wo when grouped the passed data to SetData() method create 17 SparklineData objects with moments - 17 hours which are added to the ItemsSource of the SparkLine control. However the columns drawn seems to be with completely different timestamps as you can see on the attached screen shot - the 17 columns spread for several days each...

Please tell me what am I missing? I guess it is some king syncronisation between the sparkline and the timebar, but no such is needed in some of the samples I can see in the telerik demos...  

Thank you in advance for your help!

[Pavel R. Pavlov]

Hello,

I was able to reproduce similar behavior with the RadTimeBar and the RadColumnSparkline controls. It appeared once the PeriodStart and PeriodEnd properties of the RadTimeBar are different from the dates set as start date and end date of the ItemsSource of the RadColumnSparkline.

This is why I suggest double checking if the period set as ItemsSource to the RadColumnSparkline is the same as the period set to the RadTimeBar control.

Please try to set exactly the same period to both controls and let us know if it works in your particular scenario.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Mladen]

Hi, it seems that not only start and end periods have to match, but also you have to have data in the items source for every moment possible, for example, if you have one month period and you want sparklne data for each day and if you have data only in two days within the month you have to add also data for each of the other days (Moment=day, Value=0). So i did this, also adding end and star moments of RadTimeBar as records in the ItmemsSpurce of the sparkline control. 

However there are still some problems - depending on the selected period - the bars in the sparkline are allways not at correct position (slightly missplaced - see attached). I guess that it is possible this has somenthing to do with the fact, that start date and end date are not exact day (for exampe 01.01.2014 12:31 ). I add start and end date both plus one record for each day (if it is grouping by day) - for example for 00:00:00 or 12:00:00 - experimented with both. Allays bars are missplaced. The situation is not improved by removing start and end date from the Sparkline Items source. Please advise me how to solve this.

[Pavel R. Pavlov]

Hello Mladen,

You are right that if the PeriodStart and the PeriodEnd properties are not exactly the same as the first and the last items of the RadColumnSparkline, the bars will be slightly misplaced. One way to solve this issue is to use one date for the PeriodStart and the first item of the RadColumnSparkline. Also, you can use this approach one more time for the PeriodEnd and the last item.

For your convenience I prepared a sample project demonstrating my point. Please take a look at it and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Mladen]

Hi, Pavel, thank you for your reply and project. I'm sorry that i obviously didn't make myself clear, but I add start and end date after your first post. Still there is missplacement. I tried different ways to mosify sparklines items source, but with no success and actually when i don't know what exactly is causing this strange behavour - they are shots in the dark. So I'm asking you if you have any ideas. I coudnt do this in your project but in mine the results can be seen on the attached screenshot and the data that causes them can be seen below. For example note that for the last day there are two records. Removing either of them does not improve the situation

 Here is some debug information about the start and end period of timebar and itemsource of the sparkine control:

Start Date: 01/09/2014 11:46:13 End Date04/10/2014 11:46:13

01/09/2014 11:46:13 0
01/10/2014 00:00:00 0
01/11/2014 00:00:00 0
01/12/2014 00:00:00 0
01/13/2014 00:00:00 0
01/14/2014 00:00:00 0
01/15/2014 00:00:00 0
01/16/2014 00:00:00 0
01/17/2014 00:00:00 0
01/18/2014 00:00:00 0
01/19/2014 00:00:00 0
01/20/2014 00:00:00 0
01/21/2014 00:00:00 0
01/22/2014 00:00:00 0
01/23/2014 00:00:00 0
01/24/2014 00:00:00 0
01/25/2014 00:00:00 0
01/26/2014 00:00:00 0
01/27/2014 00:00:00 0
01/28/2014 00:00:00 0
01/29/2014 00:00:00 0
01/30/2014 00:00:00 0
01/31/2014 00:00:00 0
02/01/2014 00:00:00 0
02/02/2014 00:00:00 0
02/03/2014 00:00:00 0
02/04/2014 00:00:00 0
02/05/2014 00:00:00 0
02/06/2014 00:00:00 0
02/07/2014 00:00:00 0
02/08/2014 00:00:00 0
02/09/2014 00:00:00 0
02/10/2014 00:00:00 0
02/11/2014 00:00:00 0
02/12/2014 00:00:00 0
02/13/2014 00:00:00 0
02/14/2014 00:00:00 0
02/15/2014 00:00:00 0
02/16/2014 00:00:00 0
02/17/2014 00:00:00 0
02/18/2014 00:00:00 0
02/19/2014 00:00:00 0
02/20/2014 00:00:00 0
02/21/2014 00:00:00 0
02/22/2014 00:00:00 0
02/23/2014 00:00:00 0
02/24/2014 00:00:00 0
02/25/2014 00:00:00 0
02/26/2014 00:00:00 0
02/27/2014 00:00:00 0
02/28/2014 00:00:00 0
03/01/2014 00:00:00 0
03/02/2014 00:00:00 0
03/03/2014 00:00:00 4
03/04/2014 00:00:00 1
03/05/2014 00:00:00 0
03/06/2014 00:00:00 0
03/07/2014 00:00:00 0
03/08/2014 00:00:00 0
03/09/2014 00:00:00 0
03/10/2014 00:00:00 0
03/11/2014 00:00:00 1
03/12/2014 00:00:00 2
03/13/2014 00:00:00 0
03/14/2014 00:00:00 0
03/15/2014 00:00:00 1
03/16/2014 00:00:00 0
03/17/2014 00:00:00 1
03/18/2014 00:00:00 0
03/19/2014 00:00:00 0
03/20/2014 00:00:00 0
03/21/2014 00:00:00 0
03/22/2014 00:00:00 0
03/23/2014 00:00:00 0
03/24/2014 00:00:00 0
03/25/2014 00:00:00 0
03/26/2014 00:00:00 0
03/27/2014 00:00:00 0
03/28/2014 00:00:00 0
03/29/2014 00:00:00 0
03/30/2014 00:00:00 0
03/31/2014 00:00:00 0
04/01/2014 00:00:00 0
04/02/2014 00:00:00 0
04/03/2014 00:00:00 0
04/04/2014 00:00:00 0
04/05/2014 00:00:00 0
04/06/2014 00:00:00 0
04/07/2014 00:00:00 25
04/08/2014 00:00:00 0
04/09/2014 00:00:00 0
04/10/2014 00:00:00 0
04/10/2014 11:46:13 0

[Mladen]

Clarification to the prevoius post (cant't find edit option, some time ago it was available i remember):

[quote]Mladen said: but I add start and end date after your first post. 
[/quote]

By that i meant that i am adding items in items source of the sparkline with exactly the same moment as Period Start and Period End of the time bar like you suggested at first

[Pavel R. Pavlov]

Hi Mladen,

The cause of this issue is the fact that the items of the RadTimebar are not as much as the items of the RadColumnSparkline. This is why the sparkline shifts its items a bit.
In order to overcome this issue, you can try setting the Telerik.Windows.Controls.Sparklines.ColumnLayoutMode.ColumnLayoutMode property to Telerik.Windows.Controls.Sparklines.ColumnLayoutMode.Normal. By doing so the RadTimebar will control where the RadColumnSparkline will render the bars. In such cases - at the exact second inside the items of the RadTimebar (intervals). This means that you will need to set not only the date, but also the exact hour, minute and second for each of the items of the sparkline.
When creating new DateTime instance, if you set only the date, the time will be automatically set to 00:00:00. In this case the RadColumnSparkline will render the corresponding item between two days. You will have to set the time to 12:00:00 and the column will be rendered in the middle of the corresponding RadTimebar interval.

Also, you may consider setting the MinYValue and MaxYValue properties of the RadColumnSparkline, by doing so the control will not automatically calculate those values. The default logic of the control will take the minimal value in the ItemsSource and will assign it to the MinYValue property and the biggest value to the MaxYValue property.

Please give this approach a try and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Mladen]

Hi, Pavel, thank you very much for your reply and I'm sorry for my very late reply.

I understand the reason for missplacing in the second case (post from 10 april). I've tried to set the properties as suggested (In order to overcome this issue, you can try setting the Telerik.Windows.Controls.Sparklines.ColumnLayoutMode.ColumnLayoutModeproperty to Telerik.Windows.Controls.Sparklines.ColumnLayoutMode.Normal.) with no any effect (by doing only this change).

But see what the problem is:
 - in the firstly presented case - the reason for missplacement is that the start and the end date of the Items Source of the sparkline is not exactly the same as the PeriodStart and End PeriodEnd of the TimeBar
- in the socond presented case where dummy items with exact same dates are added the reason for missplacement is that the items are more - they are of course more, because items are added to match the first condition.

Note , that there is no obligation the PeriodStart and PeriodEnd in TimeBar to start at 00:00:00 or 12:00:00 (period is selected by user) which is the only case where the two conditions above can be simultaniously met.

I understand that I can try many diffetent things like removing some of the items, and many things I've tried before to make this work but because I had no success I'm asking you to help - to tell me what would be the recipy for achieving the desired begaviour - which is :

I have Time Bar with selection with no limitation of the PeriodStart and PeriodEnd and properly placed sparklines in it.

Thank you in advance!

 
.

[Pavel R. Pavlov]

Hi Mladen,

I feel like we are getting in a loop. This is why I would like to start from the beginning and clarify the behavior of the RadTimeBar control.

Please have in mind that the RadTimeBar is a ContentControl and this is why it can host any content (including RadSpakline). Furthermore, it is not aware of the items of its content. This is why it does not synchronize its own items (the intervals) with them out-of-the-box. You should manually sync both items. In your particular case you need to make sure that the number of the items hosted by the RadSparkline control equals the number of days visualized by the RadTimeBar. This can be done when you bind both controls to the same properties exposed by your view model. 

This approach is demonstrated in the attached project. The public EndDate and StartDate properties are bound to the PeriodEnd and PeriodStart properties of the RadTimeBar control. Furthermore, the same properties are used to create the collection of business objects set as ItemsSource of the sparkline. Please take a look at it and try to implement the same approach in your real life application.

I hope this will help you out.

Regards,
Pavel R. Pavlov
Telerik