Sparkline and timebar

8 posts, 0 answers
  1. EM
    EM avatar
    21 posts
    Member since:
    Oct 2006

    Posted 07 May 2011 Link to this post

    Hello,

    Using the example on the documentation and blog of a sparkline inside the timebar to represent data trends, I'm having problems with lining up the data points.

    What's happening is the data on my sparkline appears compressed to about 80% of what it is really like - at any zoom level.

    I'm not specifying a size or scale constraint on the sparkline - the code is the same as with the example.

    Any ideas as to why the sparkline's horizonal scale would not match the timebar's and cause the trend line to be offset?

    E.
  2. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 10 May 2011 Link to this post

    Hello EM,

    It is possible for the sparkline to become shifted if the provided data is not regular. Can you please share your timebar and sparkline configuration and a sample of the data that the sparkline is bound to? If applicable, a runnable project can help us a lot in finding out what's wrong.

    Greetings,
    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. EM
    EM avatar
    21 posts
    Member since:
    Oct 2006

    Posted 10 May 2011 Link to this post

    Hello,

    the data is definitely not regular - it is time based on the X axis (DateTime) and varies quite a bit in fact, from no data per day (using the empty point behavior to "drop"), to several datapoints for a given day for different times the same day.   The only unique characteristic of the data is that there can only be one datapoint for a given datetime, but there is absolutely no regularity to it on the X axis.

    I was assuming the sparkline was plotting time data on a linear axis a bit more like a chart, in other words, computing the intervals based on the X value and spacing the points horizontaly accordingly.   Am I reading this correctly that the sparkline uses a fixed horizontal interval for the plot regardless of the X value of the data then?

    That would definitely explain why the line is compressed in the horizontal by having irregular intervals between time stamps.

    E.
  5. Matt
    Matt avatar
    10 posts
    Member since:
    Feb 2006

    Posted 10 May 2011 Link to this post

    The TimeBar's PeriodStart and PeriodEnd must match the time frame you are trying to display in the sparkline.
  6. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 11 May 2011 Link to this post

    Hello Matt,

    As mentioned in your support ticket, use two-way binding for setting PeriodStart / End. If someone else has similar problem here we have explained what is causing the problem and proposed several solutions.

    Kind regards,
    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. EM
    EM avatar
    21 posts
    Member since:
    Oct 2006

    Posted 12 May 2011 Link to this post

    Just an update.

    Binding PeriodStart and PeriodEnd two way (instead of one way) fixed the issue per recommendation from the support team.

    Without binding, another way to fix the issue was to re-create the timebar control in code behind every time the datasource for the sparkline changes.  So long as the PeriodEnd and PeriodStart are set in the BeginInit() and EndInit() calls, and the new sparkline added as content, all works.   Here's the sample code for that:

    void CreateTimeBar()
            {
                var sparkLine = new RadLinearSparkline();
                sparkLine.XValuePath = "reg_date"; // x value in the data source
                sparkLine.YValuePath = "reg_cnt_dly_tot"; // y value in the data source
                sparkLine.LineStroke = new SolidColorBrush(Colors.Blue);
                sparkLine.ItemsSource = _viewModel.RegistrationCounts;
     
                var sparkArea = new RadAreaSparkline();
                sparkArea.XValuePath = "reg_date"; // x value in the data source
                sparkArea.YValuePath = "reg_cnt_cum_tot"// y value in the data source
                sparkArea.PositiveAreaFill = new SolidColorBrush(Colors.Orange);
                sparkArea.Opacity = 0.5d;
                sparkArea.ItemsSource = _viewModel.RegistrationCounts;
                 
     
                var  timebar = new RadTimeBar();
                timebar.BeginInit();
                timebar.PeriodStart = _viewModel.RegistrationPeriodStart;
                timebar.PeriodEnd = _viewModel.RegistrationPeriodEnd;
                timebar.VisiblePeriodStart = _viewModel.RegistrationPeriodStart;
                timebar.VisiblePeriodEnd = _viewModel.RegistrationPeriodEnd;
                timebar.SelectionStart = _viewModel.RegistrationPeriodStart;
                timebar.SelectionEnd = _viewModel.RegistrationPeriodEnd;
                timebar.Intervals.Add(new MonthInterval());
                timebar.Intervals.Add(new WeekInterval());
                timebar.Intervals.Add(new DayInterval());
                timebar.EndInit();
     
                // add the trend lines to the control
                var grid = new Grid();
                grid.Children.Add(sparkArea);
                grid.Children.Add(sparkLine);
                timebar.Content = grid;
     
     
                timebar.MinZoomRange = TimeSpan.FromDays(1);
                timebar.MinSelectionRange = TimeSpan.FromDays(1);
                timebar.IsSnapToIntervalEnabled = true;
                //timebar.VisiblePeriodChanged += HandleVisiblePeriodChanged;
                timebar.SelectionChanged += OnTimebarSelectionChanged;
     
                 
     
                gridTimebar.Children.Clear();
                gridTimebar.Children.Add(timebar);
     
                _timeBar = timebar;
            }


    regards,

    EM

  8. Michael
    Michael avatar
    24 posts
    Member since:
    Sep 2010

    Posted 08 Jun 2011 Link to this post

    Using two-way binding solves the runtime problem, but the control shows no data on a design surface (tried both VS and Blend).  So as I'm trying to debug problems quickly this solution is not helpful because I need to run the app and fetch data every time rather than just tweaking it on a design surface.  I'm using the 2011.01.0606 build.
  9. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 13 Jun 2011 Link to this post

    Hello Michael,

    We created a test project in Expression Blend and added a timebar to it that is databound to a view model. When the binding is TwoWay the control appears as normal and can be configured freely in the designer. You can find the project we used attached to this post.

    Hope this helps!

    Best wishes,
    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner