Not that long ago I  demonstrated how you can integrate our Sparkline control inside the cross-platform XamGrid. Well it seems like that might be a thing of the past now – no, not the Sparkline integration, but the method itself. While it would still be possible to go that way, a new feature coming in 12.1 would be a dedicated Sparkline Column type available for the XamGrid! The Sparkline control is still the same compact, yet fully-functional chart that can provide valuable information at a glance right on the spot – inside the grid, next to your data. If you need a reminder of what kind of control this is - here’s how the end result from what’s will be shown below can look :

The improvement is that with the new column type, adding this ‘compressed’ chart has never been easier, so let’s see just how that goes!

Preparations

Now there are a few interesting changes with the XAML products as a whole – like the Silverlight assemblies being build against Silverlight 5 and the now combined packages for platforms( or soon to be anyway). So when you are referencing assemblies this time it won’t be the Silverlight base along with the Silverlight Data Visualization for the chart. The assemblies to add for this demo include:

• InfragisticsSL5.v12.1
• InfragisticsSL5.Controls.Grids.XamGrid.v12.1
• InfragisticsSL5.Controls.Grids.SparklineColumn.v12.1
• InfragisticsSL5.Controls.Charts.XamSparkline.v12.1

Or the equivalent for WPF (they have identical naming starting with InfragisticsWPF4 instead).

Data

The data source for this demo would be (you guessed it!) Northwind, of course. It’s Entity framework model looks like so in the designer:

Based on that model we will be using the Orders collection for each Customer as the data source for our Sparkline charts. The data context of the grid will be set to the resulting collection of Customers on the ‘Loaded’ event of the layout root container. Possibly one cool aspect of this control is that by using it you can ‘flatten’ (figuratively speaking) the UI for your hierarchical data by focusing on one of it’s significant properties – in our case if we are only interested in keeping an eye on the freight values for each customer’s set of orders, we can do that by displaying them in a Sparkline, rather than adding a child layout for just that one field.

The XAML

Of course, you can set up columns based on that, but just for the sake of getting this done very easily and fast we would let the XamGrid figure out the columns itself and only define the one we are interested in:

As this method adds Sparkline Charts using this new column and not the actual control itself it shouldn’t be a surprise the column itself exposes a plethora of column-specific setting and only the very essential ones for the XamSparkline. If you want to tweak the charts further – don’t worry, that is not ruled out. Simply create a style targeting the XamSparkline and and you can set all the properties you want – from default element ones like height or margins, show parts of the chart like axes, markers, normal range and trend line and styles for those and so on… Here’s one just a tiny bit overdone snippet with such a style:

 

 

Of course that style enables a whole bunch of extra features that appear on the UI and depending on your needs/taste you might only use some of them.

Conclusion

The very same data-intensive chart with the potential to really help you spot trends in your data right inside the grid. Plenty of ways to display your data and really make the important bits of it ‘pop’ – normal range, Win-Loss type chart type, minimum and maximum markers and normal range. Here's how the very same application can so dramatically change looks just by changing the sparkline type to column:

(Really manages to be the center of attention right? )

This awesome functionality now integrates seamlessly in the XamGrid via this new column type and provides for very rapid implementation of such features in your application.

The new release is very close, so soon a demo shall grace this blog along with the others :)