Damyan Petev's Blog : Trendline, 11.2

Sparkline integrated in WPF Data Grid

[Infragistics] Damyan Petev — Wed, 22 Feb 2012 08:02:00 GMT

This post is kind of a follow up, part two if you will, on integrating the XamSparkline – a XAML cross-platform control part of both NetAdvantage for WPF and Silverlight Data Visualization packages – into Infragistics grids’ cells.

If this is your first meeting with this neatly fitting, data-intensive control - make sure you start with Atanas Dyulgerov’s Introduction to the Infragistics Sparkline Control blog post. And if you missed my first post, you can click to read about integrating the Sparkline in a XamGrid.

With that said, you should be aware it’s no pain to incorporate the XamSparkline in a XamGrid which made for a quite easy implementation with code that is even easier to transfer between platforms. And even so, this is far from enough. We now turn attention to those who went “But we already have a huge project with the XamDataGrid instead!” or “We just like the other grid better, have you forgotten about it?”. And we hear you – as it will now be demonstrated it’s not much of an issue to use the Sparkline in the WPF-Only data grid, too.

Seeing as this is the second blog post on that subject I would like to remind of our little scenario – the goal is display hierarchical data, but in the same time provide extremely important information from the child records in the parent row for very quick reference and to do that we settled on using visual representation (the XamSparkline) to provide the users with the ability to instantly spot odd values or trends. And again there is a teaser screenshot:

This time we would provide freight expenses for each customer with the idea that the user should be able to see any too sudden changes in their orders.

Preparations

Once more - no difference when it comes to the products – a combination of NetAdvantage for WPF Line of Business and Data Visualization, which essentially means you will need at least trial versions of both.

In terms of data, as the finer points of the XamDataGrid and not the focus of this post, we can again rely of the Help Topics to provide fast-starter solution with the SampleDataUtil class. You can pick between C# and VB.NET implementations of this class and it will give you easy data access, only assuming you have the Northwind sample database. Should a different method be required or just better suits your taste, you can always find information on Accessing Data using the XamDataGrid Help Topics.

As always a list of assemblies and namespaces to be added to your project. In you XAML add the following namespaces:

  xmlns:ig="http://schemas.infragistics.com/xaml"  
 xmlns:igDP="http://infragistics.com/DataPresenter"
 

First one is where all the shared XAML controls from Infragistics are (including the XamSparkline) and the second one as it’s name suggests – is for the XamDataGrid, which is a part of the xamDataPresenter™ control family.

Then come the assemblies to reference - starting with the base InfragisticsWPF4.v11.2.dll, then InfragisticsWPF4.Editors.v11.2.dll and InfragisticsWPF4.DataPresenter.v11.2.dll required by the data Grid and finally the InfragisticsWPF4.Controls.Charts.XamSparkline.v11.2.dll for the sparkline itself.

When that is done you are ready to add a XamDataGrid to your XAML and also add a handle for the Windows’s Loaded event while at it:

 <Window Loaded="Window_Loaded"
        <!--...-->
 

 <igDP:XamDataGrid x:Name="XamDataGrid" InitializeRecord="XamDataGrid_InitializeRecord">
     <!--To do: Add Field Layout-->
 </igDP:XamDataGrid>
 

Now in the code behind once the Window is loaded we will provide data to the grid using the functionality provided for us by the data access class mentioned earlier. Since I have Northwind on my SQLExpress instance, the parameter to pass would be set to that with the standard “.\” which is the equivalent of localhost:

 private void Window_Loaded(object sender, RoutedEventArgs e)
{
    //Create a DataSet from Northwind's Customers and Orders:
    System.Data.DataSet customerDS = SampleDataUtil.GetCustomersOrders(".\\SQLExpress");
    if (customerDS.Tables["Customers"] != null)
    {
        //and if available set it as data source to the grid
        this.XamDataGrid.DataSource = customerDS.Tables["Customers"].DefaultView;
    }
}
 

Now to we would need to add a custom column for our sparklines and of course provide them with data. In my case the data doesn’t have a field with a value collection so I will make myself one, but in case you have data that is already fit to be presented by the chart control – by all means, feel free to skip the next part.

As you may have noticed in the definition above there is a handle defined for the InitializeRecord event. We will use that to go through the records and provide data for the cells where the sparkline would be. But first we will add that custom column to the XamDataGrid, which in our case would be an Unbound Field added to the grid’s layouts :

 <igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout >
        <igDP:FieldLayout.Fields>
            <!--Unbound field definition:-->
            <igDP:UnboundField Name="Chart" Label="Freight expenses"/>
            <!--End of Unbound field definition-->
            <!--
            Below column definitions are optional as they match the data set and can be 
            auto-generated in case you skip them. Leaving them makes for better custom labels.
            -->
            <igDP:Field  Name="CustomerID" Label="Customer ID" />
            <igDP:Field  Name="CompanyName" Label="Company Name" />
            <igDP:Field  Name="ContactName" Label="Contact Name" />
            <igDP:Field  Name="Address" Label="Address" />
            <igDP:Field  Name="City" Label="City" />
            <igDP:Field  Name="Region" Label="Region" />
            <igDP:Field  Name="PostalCode" Label="Postal Code" />
            <igDP:Field  Name="Country" Label="Country" />
            <igDP:Field  Name="Phone" Label="Phone" />
            <igDP:Field  Name="Fax" Label="Fax" />
            <igDP:Field  Name="ContactTitle" Label="Contact Title" />
        </igDP:FieldLayout.Fields>
    </igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
 

The name of the field is ‘Chart’ and we can now use that to set its data in code upon row initializations:

 private void XamDataGrid_InitializeRecord(object sender, InitializeRecordEventArgs e)
{
    if (e.Record is DataRecord)
    {
        //get the data record and verify it is a parent row:
        DataRecord dr = (DataRecord)e.Record;
        if (dr.HasExpandableFieldRecords)
        {
            List<int> values = new List<int>();
            foreach (ExpandableFieldRecord row in dr.ChildRecords)
            {
                RecordCollectionBase recColBase = row.ChildRecords;
                //go through all the child records
                foreach (Record childRec in recColBase)
                {
                    //and build value collections with Freight expenses for each:
                    values.Add((int)double.Parse((childRec as DataRecord).Cells["Freight"].Value.ToString()));
                }
                //build nice parsable string with the values:
                StringBuilder sb = new StringBuilder();
                values.ForEach( delegate(int value) { sb.Append(value.ToString() + " "); });
                // set that string as value of the parent's Chart cell
                dr.Cells["Chart"].Value = sb.ToString();
            }
        }
    }
}
 

At this point you should have an application with hierarchical XamDataGrid with an extra column in the parent rows containing a set of freight values. Now what is left to do is to turn those cells into XamSparkline controls!

Adding the Sparkline

The basic idea behind this is that the values for each cell have display objects called Cell Value Presenters and you can override their template. What would then be left is to set it to a Control Template with a Sparkline and bind it to the cell’s value. That of course might require a converter, so you can start by adding that in a new class implementing the IValueConverter interface. In it we’ll parse the string values to integers and return a list with their values. This is how the code for that looks like:

 class SourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        //skip the first (header) cell
        if ((value as CellValuePresenter).Record.DataItemIndex != -1)
        {
            //get the value, split it and parse each to int
            string values = (string)(value as CellValuePresenter).Record.Cells["Chart"].Value;
            List<int> convertedValues = new List<int>();
            List<string> separates = values.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries).ToList();
            convertedValues = separates.ConvertAll(x => int.Parse(x));
            //return the list with int values:
            return convertedValues;
        }
        return null;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
 

And the next logical step would be to add that as a resource in a proper scope in your XAML, like so:

 <local:SourceConverter x:Key="sourceConverter" />
 

The Item source of the XamSparkline will be bound to its templated parent which in our case is the Cell Value Presenter and this is why the passed value to the converter above is treated as such. It’s all very convenient as it not only provides a Record object, whose index we can check in order to skip the header (-1) row, but also exposes a Cells collection for us to grab values from.

Now once you have that final piece in place you can override the presenter’s template. You can do that by defining the style as a resource or within the Unbound field definition, that is up to you and here is the general outline of the style itself – just remember to add a key if you define it as a resource:

 <Style TargetType="{x:Type igDP:CellValuePresenter}">
      <Setter Property="OverridesDefaultStyle" Value="True"/>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                  <ig:XamSparkline 
                      ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                               Converter={StaticResource sourceConverter}}"
                      NormalRangeVisibility="Visible"
                      NormalRangeMinimum="0"
                      NormalRangeMaximum="50"
                      NormalRangeFill="GreenYellow"
                      HighMarkerVisibility="Visible"
                      LowMarkerVisibility="Visible"
                      ValueMemberPath=""
                      Width="150"           
                      Height="40"
                      />
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
 

This is the full code for the XamDataGrid with all the changes so far (points of interest are marked with comments):

 <igDP:XamDataGrid x:Name="XamDataGrid" InitializeRecord="XamDataGrid_InitializeRecord">
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout >
            <igDP:FieldLayout.Fields>
            <!--Unbound field definition:-->
            <igDP:UnboundField Name="Chart" Label="Freight expenses">
                <igDP:UnboundField.Settings>
                    <igDP:FieldSettings>
                        <igDP:FieldSettings.CellValuePresenterStyle>
                            <!--Style template definition:-->
                            <Style TargetType="{x:Type igDP:CellValuePresenter}">
                                <Setter Property="OverridesDefaultStyle" Value="True"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                                            <ig:XamSparkline 
                                                ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                                                            Converter={StaticResource sourceConverter}}"
                                                NormalRangeVisibility="Visible"
                                                NormalRangeMinimum="0"
                                                NormalRangeMaximum="50"
                                                NormalRangeFill="GreenYellow"
                                                HighMarkerVisibility="Visible"
                                                LowMarkerVisibility="Visible"
                                                ValueMemberPath=""
                                                Width="150"           
                                                Height="40"
                                                />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                            <!--End of Style template definition-->
                        </igDP:FieldSettings.CellValuePresenterStyle>
                    </igDP:FieldSettings>
                </igDP:UnboundField.Settings>
            </igDP:UnboundField>
            <!--End of Unbound field definition-->
                <!--
                Below column definitions are optional as they match the data set and can be 
                auto-generated in case you skip them. Leaving them makes for better custom labels.
                -->
                <igDP:Field  Name="CustomerID" Label="Customer ID" />
                <igDP:Field  Name="CompanyName" Label="Company Name" />
                <igDP:Field  Name="ContactName" Label="Contact Name" />
                <igDP:Field  Name="Address" Label="Address" />
                <igDP:Field  Name="City" Label="City" />
                <igDP:Field  Name="Region" Label="Region" />
                <igDP:Field  Name="PostalCode" Label="Postal Code" />
                <igDP:Field  Name="Country" Label="Country" />
                <igDP:Field  Name="Phone" Label="Phone" />
                <igDP:Field  Name="Fax" Label="Fax" />
                <igDP:Field  Name="ContactTitle" Label="Contact Title" />
            </igDP:FieldLayout.Fields>
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>
 

And the end result looks like this:

We have a normal range of up to 50 for freight expenses and you can easily tell that while some hold their values close or even below, there are users such as ‘BERGS’ that have very high values that might need some further investigation.

Conclusion

Again how you define the XamSparkline in the template is up to you – all you need in the proper data, a field to set the template of and an optional converter (depending on your data). Simple as that, you have now seen how to integrate the this control in both the cross-platform XamGrid and the WPF specific XamDataGrid with limited effort and tremendous outcome!

The obligatory calling - check out the Silverlight Data Visualization Samples online or download the local WPF Samples. Also download the demo project where you will find another style setup available(with columns as display type and the nice blue trendline) and since curiosity is such a nice thing to appeal to, here a teaser screenshot for that one too:

The solution has been cleaned, so make sure assembly references are all in check and build.

Our Spakline integrated in a Grid

[Infragistics] Damyan Petev — Tue, 21 Feb 2012 07:37:00 GMT

With 11.2 we introduced the XamSparkline control, which is in essence a fully-functional chart but with the major addition of being extremely compact. This is so important as it is intended to fit inside a grid cell. While this control is still CTP in the current release, there’s nothing stopping you from experimenting and making use of its functionality right now. And just in case you missed – get to know this minimalistic control starting with the Introduction to the Infragistics Sparkline Control blog post by Atanas Dyulgerov. In it you can learn the basics of the control – while simple is yet another description you can give this XAML control, you will find it doesn’t really leave you wanting more – it is feature rich as well. The XamSparkline can display numeric and date entries in four different chart types, it can display a range bar which basically visualizes the area with acceptable or goal values. Then there’s also the array of highly customizable markers the Sparkline supports out of the box and a trend line with multiple calculation methods. And, yes, all that can fit in very limited space (e.g. inside a grid) and prove to have extremely high information per pixel ratio

At this point, if you have been looking at our Silverlight Data Visualization Samples or the downloadable WPF version, you might be saying “Yes, I understand it’s meant to fit inside a grid and you keep saying that but I don’t see it anywhere!”. Not to worry – this is exactly what will be shown in this article.

Imagine a scenario where you have hierarchical data displayed effortlessly by a XamGrid, but consider this – what if your rows have 20 or more child entries and you need to find just some that have some sort of an issue? How would you get the required data fast, how can you analyse those entries fast? The natural answer for the latter is usually a visual representation - i.e a chart and in our case that would be a XamSparkline without a doubt. And since it is part of both Data Visualization products and because our XamGrid is now also cross-platform, this is done very easily and is also portable between the platforms. Here is the end result we are after:

As you can see in the child entries the values from the last two columns (the one that is a bit cut is the UnitsOnOrder, sorry about that) are presented by the chart as follows: 39, –23, 20. This makes spotting negative values very easy.

Setting up

First things first, taking into account this is a combination of Line of Business (LoB) and Data Visualization (DV) controls means you will need one of each – either a combination of NetAdvantage for WPF LoB and DV or NetAdvantage for Silverlight LoB plus DV, but then again trial packages will also do.

You will also need data. Following the scenario from above you would need hierarchical data of some kind. For simplicity's sake in my example I will use the DataUtil class that is available from our Help Topics in both Visual Basic and C#. Speaking of which you can as always find tons of useful information in the XamGrid Online Help for Silverlight or WPF, even though it’s a shared XAML control, so those links are somewhat just to indulge your preferences.

Grab the preferred version of the DataUtil class and add it to your project – keep in mind the namespace when copying, which I’d suggest to change to your project’s namespace. When that is done link the namespace to your XAML page/window:

  xmlns:local="clr-namespace:SparklineInXamGrid"
 

In that case ‘SparklineInXamGrid’ is the namespace of my project. Then you can also add the Infragistics namespace:

 xmlns:ig="http://schemas.infragistics.com/xaml"
 

This namespace is the only needed for this case in Silverlight and WPF because both the XamSparkline and the XamGrid are shared XAML controls for both platforms. There are also references to a few assemblies required - InfragisticsSL4.v11.2.dll, InfragisticsSL4.Controls.Grids.XamGrid.v11.2.dll, InfragisticsSL4.Controls.Menus.XamMenu.v11.2.dll for Silverlight as thier naming suggests. The assemblies for WPF follow the same model - InfragisticsWPF4.v11.2.dll, InfragisticsWPF4.Controls.Grids.XamGrid.v11.2.dll, InfragisticsWPF4.Controls.Menu.XamMenu.v11.2.dll, with the addition of InfragisticsWPF4.DataManager.v11.2.dll.

At this point you have a project set up to start building, so begin by adding the DataUtil as a resource in a scope you see fit:

  <local:DataUtil x:Key="data"/>
 

Now you can add the XamGrid control and bind it to the data’s hierarchical collection – the file provides a combination of Categories and Products we can use:

 <ig:XamGrid 
    ItemsSource="{Binding Source={StaticResource data},Path=CategoriesAndProducts}" 
    Margin="20" 
    Name="xamGrid"/>
 

The XamGrid will generate the columns based on the data and we can rely on that for this demo, as our goal is not fine-tuning the grid, for which you can again refer to the Help docs.

So far you should have a working application with hierarchical grid.

Adding the Sparkline

Again let’s go back to our scenario – you can now see in a relatively small scale ( the DataUtil is only a small data sample) how we can take advantage of compressed data. Say we want to manage easily the balance of products we have in stock and on order. That means a few values per category in our small scale example, but... imagine if you had 50 products in a category and you need to find those with low amounts in stock yet many on order so you can replenish their numbers in some way. This is where our Sparkline will come – to provide this crucial info for each category.

For that goal we can create an Unbound Column in our grid to hold the values to be displayed by XamSparkline controls. And to have those values we will set them using the converter we have to implement for the Unbound Column. So add a class to your project that would implement the IValueConverter Interface:

 namespace SparklineInXamGrid
{
    public class SourceConverter : IValueConverter
    {
 
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            List<int> convertedValues = new List<int>();
            foreach (Product prod in (value as Category).Products)
            {
                convertedValues.Add(prod.UnitsInStock - prod.UnitsOnOrder);
            }
            return convertedValues;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}
 

And add that as a resource to your XAML (now you see why we changed the namespace of the DataUtil):

 <local:SourceConverter x:Key="SourceConverter"></local:SourceConverter>
 

As you might have noticed already the value passed to the Convert method is used as an instance of the class Category, which is defined in our DataUtil class. And of course, the value this converter will receive would be from the context of the current row, which without a doubt would be the Category from the CategoryAndProducts collection. And better yet, it exposes a collection of products with their UnitsInStock and UnitsOnOrder properties we would use to calculate the balance and create a collection from – in this case a List, but a simple array of integers would do too. The returned values would become the ‘Value’ property of the Unbound Column. Now for the column itself:

 <ig:UnboundColumn Key="Balance" 
                  ValueConverter="{StaticResource SourceConverter}"
                  IsSortable="False" 
                  IsSummable="False"/>
 

IsSortable and IsSummable are false by default as additional efforts on your side are required for those to work with Unbound Columns, so this above is just to remind and stress you might not need those in our case but you also don’t get them by default either. As you can see the Value converter is set for the whole column so we now have the values for each cell. What is left to do is define an Item template for the column that would consist of our XamSparkline and the finished code looks like so:

 <Grid x:Name="LayoutRoot" Background="White">
    <ig:XamGrid ItemsSource="{Binding Source={StaticResource data},Path=CategoriesAndProducts}" 
                Margin="20" Name="xamGrid">
        <ig:XamGrid.Columns>
            <ig:UnboundColumn Key="Balance" ValueConverter="{StaticResource SourceConverter}"
                              IsSortable="False" IsSummable="False">
                <ig:UnboundColumn.ItemTemplate>
                    <DataTemplate>
                        <ig:XamSparkline ItemsSource="{Binding Value}" 
                                         ValueMemberPath=""
                                         TrendLineType="LogarithmicFit"
                                         TrendLineBrush="#FF14AAE2"
                                         DisplayType="Column"
                                         Width="200"                
                                         Height="60"/>
                    </DataTemplate>
                </ig:UnboundColumn.ItemTemplate>
            </ig:UnboundColumn>
        </ig:XamGrid.Columns>
    </ig:XamGrid>
</Grid>
 

The ItemSource of the control is bound to the Value property of the Unbound Column as explained above and since it’s a simple collection we don’t have a ValueMemberPath so we leave that one empty. The rest is up to you – we have columns with a nice blue trend line. This is the template used in the screenshot from the start of the blog and here’s yet another one using the Line chart type along with a Normal range defined from –5 to 30 ( I made that up naturally) and some nice High and Low markers.

Using normal range is only useful if the data points don’t have huge variations as you are setting one range for all charts and on some due to their values it just might not be visible, so use with caution. Anyway, it does look nice (the green-ish area) and it can really help spot some odd fluctuations in your values:

And the temple for that is:

 <ig:UnboundColumn.ItemTemplate>
    <DataTemplate>
        <ig:XamSparkline ItemsSource="{Binding Value}" 
                         ValueMemberPath=""
                         DisplayType="Line"
                         NormalRangeVisibility="Visible"
                         NormalRangeFill="GreenYellow"
                         NormalRangeMinimum="-5"
                         NormalRangeMaximum="30"
                         LowMarkerVisibility="Visible"
                         HighMarkerVisibility="Visible"
                         Width="200"                
                         Height="60"/>
    </DataTemplate>
</ig:UnboundColumn.ItemTemplate>
 

Conclusion

The XamSparkline might be miniature but it’s built with fitting small areas in mind while still being very data-intensive. It makes a great combination with the XamGrid and since they are both shared across XAML product lines, the code for the latter can be easily moved back and forth. And such cooperation is surprisingly easy to get going – a single Unbound Column, a converter and an item template holding the Sparkline. And don’t be fooled by the few data points – this control is well capable of displaying a lot more in that same limited space:

And this is ‘just’ 30 data points and.. well, there’s clearly room for more

Yet again, check out the Silverlight Data Visualization Samples online or download the local WPF Samples.

As always you can download the demo project for this blog – this time containing both Silverlight and WPF projects. The solution has been cleaned, so make sure assembly references are all in check and build.