This is a migrated thread and some comments may be shown as answers.

Sparkline and timebar

7 Answers 205 Views
TimeBar
This is a migrated thread and some comments may be shown as answers.
EM
Top achievements
Rank 1
EM asked on 07 May 2011, 12:43 PM
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.

7 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 10 May 2011, 08:28 AM
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
0
EM
Top achievements
Rank 1
answered on 10 May 2011, 01:37 PM
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.
0
Matt
Top achievements
Rank 1
answered on 10 May 2011, 07:41 PM
The TimeBar's PeriodStart and PeriodEnd must match the time frame you are trying to display in the sparkline.
0
Yavor
Telerik team
answered on 11 May 2011, 12:15 PM
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
0
EM
Top achievements
Rank 1
answered on 12 May 2011, 05:41 PM
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

0
Michael
Top achievements
Rank 1
answered on 08 Jun 2011, 07:17 PM
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.
0
Yavor
Telerik team
answered on 13 Jun 2011, 10:19 AM
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
Tags
TimeBar
Asked by
EM
Top achievements
Rank 1
Answers by
Yavor
Telerik team
EM
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Share this question
or