Official Release of RadTimeBar for Silverlight and WPF

When we rolled out the Q1 2011 release, there was a surprise control that we included in the release as a Beta version – RadTimeBar.  This control is useful for scenarios where you require a birds-eye view of your time-based data, be it sales history, support volume, or any other statistic that you might want to track over a longer period of time.

The real value in the RadTimeBar control, however, is in the integration scenarios that it offers with other controls from RadControls for Silverlight and WPF.  By utilizing data-centric controls like RadGridView and RadChart with the RadTimeBar, your “birds-eye view” can easily translate into a quick way to qualify larger portions of data that you are looking for specific details about.

With the Q1 2011 SP1 release, RadTimeBar throws off the beta label and is now officially part of the suite.  Many thanks to the Telerik developer community for all of their feedback, we’ve been able to incorporate much of that into the SP1 release as well as address some usability scenarios that our customers brought to our attention, like having a built-in feature to snap the selection thumb to an interval, the brand new selection indicator, selection Min and Max constraints – and that is just to name a few of the new features!  Check out the Q1 2011 SP1 release notes for the full list. (Silverlight / WPF)

In honor of the official RadTimeBar release, we thought it would be a great time to present you with a quick walkthrough of how you would setup RadTimeBar in your applications, somewhat similar to the already awesome First Look demo, except taking advantage of a few of the new features as well as bringing in everyone’s favorite grid, RadGridView, to show off some of the integration capabilities that we have with RadTimeBar.

Step 1 - Making Some Data

Before diving into an example of how to work with our Xaml and get RadTimeBar all cooked up, lets take a look at what we’ll need for data.  Our First Look demo is using flight statistics, so that one is out, instead we’ll use something I’m very familiar with – internal sales information. :)

There are really two things that we need for any of these displays to work – a DateTime and any other value we can measure (so int, double, etc.).  In our scenario, we’re going to go ahead and add a few more items to the mix to make this a slightly more functional example:

And you’ll be able to see this in the code with the attached sample project, but I’m also going to generate some data to use for this which will go into the ViewModel so we can easily access the data, spanning from January 1st, 2011 until April 15th, 2011.  This will power the RadTimeBar we are about to build.

Step 2 - Making a RadTimeBar

When creating a RadTimeBar in our application, we have three basic requirements:

• Data with a DateTime element to it (otherwise why use a time bar?)
• Determine our interval(s) required as well as what range should be displayed
• Choose what RadSparkline(s) we need to display the intervals

The first step is covered with our SalesDataItem, so we know we have DateTime-based data to use and display along with some extra properties in the item for displaying in other controls.  The intervals and other settings on RadTimeBar, as well as the RadSparkline, may make a little more sense once we see the code:

To give you some insight into what we are doing here, let's run down the different properties we see set and go over what they are handling for us:

• PeriodStart / End - Determines the timespan that we are looking at overall in our RadTimeBar instance.
• VisiblePeriodStart / End - What we are actually seeing on screen.  This will change as we scroll and zoom within the control.
• SelectionStart / End - The time period selected in RadTimeBar.
• IsSnapToIntervalEnabled - New for SP1, this causes the selection box to snap to visible time periods with visual cues.

Then there are our intervals.  These determine the intervals that we are seeing on the top and bottom of the RadTimeBar when we are scrolling and zooming around.  Added benefit of the intervals on top and bottom is that they work as visual links to quickly select that time period.

The RadSparkline (in this case, a RadAreaSparkline), we use the main dataset for our ItemsSource, so all we really need to know is what value to use for which axis.  Simple, easy, and intuitive, making this a lot easier.  In fact, we can use multiple RadSparklines within this area, all we would need to do is throw them into a Grid panel.  Right now, we've got a fully functional RadTimeBar:

Step 3 - Integrating with Other RadControls

The most obvious companion to RadTimeBar is a RadChart, since RadTimeBar uses RadSparklines to give quick snapshots of data, RadChart can give us a much richer experience as far as drilling down more, taking advantage of zooming and scrolling, the ability to save screenshots of data for use later - the list goes on and on.  Thankfully, RadTimeBar and RadChart are developed by the same team, so integration only requires a single line in the below code, specifically the TimeBar property which is now on RadChart:

With this TimeBar property set, every time we change the range on our RadTimeBar that change gets automatically populated back to the RadChart, working as a type of filter as far as what data will get displayed. 

But I mentioned RadGridView, too, so what would that require?  Simple really, all it takes is a RadGridView definition which uses the same dataset:

Then since we are hooked up to the SelectionChanged event on RadTimeBar, we new up the composite filter that we are using for RadGridView, based on the SelectionStart and SelectionEnd properties of RadTimeBar:

Our end result?  RadTimeBar driving a zoom-and-scrollable RadChart and RadGridView:

Easy, right?  Be sure to check back here for some links to videos that are in production right now to walk you through this whole process step-by-step in Visual Studio.

Otherwise, feel free to download the source code for this project and see for yourself how well these controls integrate together to provide rich data visualizations for your line of business Silverlight applications.