Integrating Rich Data Visualization into your Applications with Telerik RadControls for Silverlight

Posted by: Evan Hutnick , on 4/16/2011, in Category Product Articles
Views: 56169
Abstract: In working with Line-of-Business (LOB) applications, one of the key things that needs to be taken into consideration is exactly how data will be visualized for the end user. There are many ways to do this, but one of the core display mechanisms for any LOB application is to utilize a datagrid. The Telerik RadControls for Silverlight control suite indeed provides us with RadGridView, a powerful control with a custom data engine that enables UI virtualization, grouping, sorting, and excel-like filtering right out of the box.

This article provides useful information about the Telerik RadGridView Silverlight Control

In working with Line-of-Business (LOB) applications, one of the key things that needs to be taken into consideration is exactly how data will be visualized for the end user. There are many ways to do this, but one of the core display mechanisms for any LOB application is to utilize a DataGrid. The Telerik RadControls for Silverlight control suite indeed provides us with RadGridView, a powerful control with a custom data engine that enables UI virtualization, grouping, sorting, and excel-like filtering right out of the box. But a datagrid, even with all this functionality, still only displays raw data to the user, which at times can be a bit overwhelming as well as offering difficulty with quickly identifying trends in the data.

Download Trial or See Demo

This is where data visualization comes into play. In the broadest sense, data visualization represents any way of displaying data to a user, so while our RadGridView does accomplish this in a sense, we can do better, as we can immediately see that from just binding data to the control, no control can immediately interpret what we would like to do with a collection that exists in the data item:

gridwithdata

One of the huge advantages of using a control suite like RadControls for Silverlight is that it includes not only powerful controls like the RadGridView but also a variety of data visualization controls, providing us with the ability to either go the older route of just providing child tables, or in our case utilizing some of the other controls in the suite for a more concise and understandable view of the data. In some scenarios, users might opt to just use RadChart with support for drill-down, zooming and scrolling, or the ability to utilize rich tooltips with sub-charts. In our scenario, however, we still need to utilize the datagrid for the sorting, filtering, and grouping capabilities, but the suite also includes two controls that offer quick, lightweight visualizations that can be utilized with RadGridView – the RadSparklines suite and RadBulletGraph.

sparklinesbulletgraphexample

To see how easy the integration is between these controls, we can look at some code to see what it would take to move from a standard implementation of RadGridView to one that includes these rich data visualizations.

For starters, every LOB application is based on some type of data. For the sake of this article, we are going to be using the following class as the basis for the collection that we will be working with:

classdiagram

With a collection of this class, we know that using Silverlight it will be as easy as setting the ItemsSource on the control to the collection and the control will do the work of auto-generating columns, creating our layout, and adding all of the extra features like the grouping bar, filtering, and sorting integrated into the header bar of the grid. This runs us into the scenario we described before, however, so instead of relying on the auto-generation of columns, we will define them manually, allowing us to integrate data visualizations into the grid itself, providing a richer experience for our end users.

Working with RadGridView in this manner we will need to work with the Columns collection in Xaml. The column of choice for this demo will be the GridViewDataColumn, allowing us to utilize the sorting, grouping, and filtering features along with control over the template used to display the data. By default, RadGridView will simply display the direct data being used in the DataMemberBinding property, which is default behavior for any grid control. We can also utilize other column types, like the GridViewComboBoxColumn, when editing our records, but our focus is on consuming this information in a quick and readable way, so that is a topic for another day.

Here is what the Xaml will look like at this point, recreating the effect of auto-generation of columns but instead defining them ourselves:

regulargridxaml

As you can see, by taking a few minutes to write out the code for our columns, we have the ability to put a format on our DateTime value, add spacing and capitalization to our headers, and open our RadGridView up for the inclusion of some data visualization controls in-line with our other data.

Since ‘salesfigures’ is still not entirely displaying the way we would like, we should target this for our first control. This is technically a List<SalesMonthData>, so a great candidate for using one of the RadSparklines controls. One thing to mention, I keep using the term RadSparklines, but we actually use this to refer to a suite of five controls – RadLinearSparkline, RadScatterSparkline, RadAreaSparkline, RadWinLossSparkline, and RadColumnSparkline. For this example, we’ll be using the RadLinearSparkline, as it will allow us to display sales data for a twelve month period with only a little code.

To start, we remove the DataMemberBinding line, since we’ll be handling the binding manually within our Sparkline, then we override the CellTemplate with our own DataTemplate, telling the control that we will be handling the display ourselves:

sparklineprep

Now we can go about setting up our Sparkline. As mentioned about, we are going to use a RadLinearSparkline, but there are some additional settings that we will enable to make the visualization of data a bit easier, as seen in our Xaml below:

sparkcolumn

To begin, we set width and height to ensure that a consistent view is displayed in all rows, followed by some margin to give some space between the edge of the control and the grid cell container. Then we set our ItemsSource to ‘salesfigures’ – remember, previously we used the DataMemberBinding on the GridViewDataColumn to accomplish this. Once we have the source for our sparkline data set, we then opt to show the axis as well as the low and high indicators for a quick view on where in our year we saw the highest and lowest sales. Lastly, since RadSparklines are based on simple yet quick rendering, we need to let the control know which properties from our class are to be used for the X and Y-axis respectively, so we set YValuePath and XValuePath. The end result? A much nicer visualization than auto-generating a column with a description of the collection (or going the route of adding 12-row child grids):

gridwithsparklinesadded

Now that is some progress! But we have one more control that can make our display even more compelling, all while reducing the overall number of columns being displayed. That control is the RadBulletGraph – a quick visual meant to show progress between measured values. Since we are already familiar with how to override the CellTemplate we won’t repeat that code, but I do want to note that we are effectively combining the final three columns (lastyearsales, currentyeargoal, and projectedsales) into a single column, since we can display all three values within our RadBulletGraph. Here is what the Xaml will look like:

bulletcolumn

We see some similar elements immediately – we’re keeping the same width and height as the RadSparkline column we did previously, except this time we put some extra margin on the left and right since we have text labels displaying the X-Axis values. With the RadBulletGraph you will also normally set both Minimum and Maximum since there is a certain view you want on the data, however this can also be set dynamically of utilize bound values. The next three values are FeaturedMeasure, ComparativeMeasure, and ProjectedValue, for which we can utilize the three values from our object that previously existed in separate columns. One last thing – normally when using DataMemberBinding or auto-generated columns, the data member that is used for sorting, filtering, and grouping is inferred since we are only using one value. In this scenario where we are utilizing multiple values inside of one template column, we set the UniqueName property of the GridViewDataColumn to one of our values, so when we sort, we’re sorting by the projected sales for the year (which is also visible thanks to our RadBulletGraph implementation).

The end result of these customizations can be seen below:

gridendresult

In summary, we can see that while a datagrid like RadGridView is normally the de facto standard for displaying data to a user in LOB applications, there are definitely ways that you can enhance that display of data to make it more readable and easier to digest for your end users. Controls like the RadSparklines suite and RadBulletGraph, both found in the Telerik RadControls for Silverlight control suite, allow us to quickly take collections and groups of data and display them in a more human readable and easier to understand format than just numbers in a grid. The entire source code of this article can be downloaded over here

Download Trial or See Demo

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel