Sparkline and timebar

[EM]

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.

[Yavor]

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

[EM]

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.

[Matt]

The TimeBar's PeriodStart and PeriodEnd must match the time frame you are trying to display in the sparkline.

[Yavor]

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

[EM]

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

[Michael]

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.

[Yavor]

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