Blog

Introduction to the Infragistics Sparkline Control

Atanas Dyulgerov / Monday, November 21, 2011

The 11.2 release of the XAML Data Visualization product gave birth to a new control. Its name is XamSparkline and it is a data-intense, design-simple graphic that allows end users to spot trends, variations and patterns in data in a clear and compact representation. It is still in CTP, so you can get a nice feel of what that new control will be.

The sparklines are like charts. These charts when displayed next to the data they are based on, make it easy for the user to analyze that data. Because the sparklines are very compact they are suitable to put in a XamGrid. If a sparkline is put next to the range of data on which it is plotted and displayed, it will occupy just a single cell.

There are four types of sparklines:

  • Line – Same as line chart
  • Area – Same as area chart
  • Column – Same as column or bar chart
  • Win/Loss – Similar to column chart. It only shows Boolean values like positive and negative instead of showing how high or low the values are. (the last sparkline in the next screenshot)

 

The main focus of the XamSparkline is to allow the end user to spot trends, variations and patters in the data behind the control. As you have seen here it is very similar to a normal chart. The difference is that one XamSparkline represents only one series of data. It is much simpler than the normal chart and easier to do what it was designed for – display a sequence of data in an easily analyzable way.

The XamSparkline has several important features that help you achieve the desired result that we mentioned earlier (easier analysis). The XamSparkline provides markers that are used to showcase key data points like Start Value, Finish value, highest value and lowest value. It also provides a range bar, that makes distinguishing safe values from bad values very easy. Another feature that comes built-in the XamSparkline is the Trendline, which is a straight or curved line to show trends and pattern on the data set – hugely useful in data analysis. There are a number of trend line types including averages, fits, deviations, etc.

This article will show you how to start using this awesome control and how to use the mentioned features.

Lets start by showing you how to create a basic XamSparkline out of a list of items, that have specific value. For the sake of the example we’ll create a collection that holds a number of items each of which having a value that we’ll plot in the spart line. Here is the code for that:

  1. public class Item
  2. {
  3.     public int Value { get; set; }
  4.     public Item(int value)
  5.     {
  6.         this.Value = value;
  7.     }
  8. }
  9.  
  10. public class ItemsCollection : List<Item>
  11. {
  12.     public ItemsCollection()
  13.     {
  14.         this.Add(new Item(1));
  15.         this.Add(new Item(2));
  16.         this.Add(new Item(3));
  17.         this.Add(new Item(4));
  18.         this.Add(new Item(5));
  19.         this.Add(new Item(4));
  20.         this.Add(new Item(-2));
  21.         this.Add(new Item(7));
  22.     }
  23. }

   

The collection’s constructor populates the list with some items just so we can have some data to show.

Before you add the control to your code you need to add the required assemblies to your project and add the namespace reference. Those assemblies are InfragisticsSL4.Controls.Charts.XamSparkline.v11.2 and InfragisticsSL4.v11.2. Here is the namespace you need to add too:

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

Now that the namespace reference and assemblies are added you can add the XamSparkline to your code. Here is how to create a basic spark that uses the data we mentioned above.

  1. <ig:XamSparkline DisplayType="Line"
  2.                  ItemsSource="{StaticResource dataSource}"
  3.                  ValueMemberPath="Value" />

The DisplayType property tells the control what type of line you want – Line, Area, Column or WinLoss. The ItemsSource is a reference to an instance of the ItemsCollection class that we have put in the Resources.

  1. <UserControl.Resources>
  2.     <local:ItemsCollection x:Key="dataSource" />
  3. </UserControl.Resources>

The ValueMemberPath property shows what is the name of the property in the item class that holds the data we want to plot. It might be a good idea to give the chart some size because it will stretch itself in all the available space. The result of those few lines of code is this:

Now that you have seen how to create a basic sparkline lets see how to use the other features. First we will put some markers on the same line that we just created. Before that however we need to know a little more about those markers. There are six types of markers – first and last marker, low and high marker, normal and negative marker. Each of them has a Visibility property that controls whether to show the marker or not, a Brush and Size properties that control how the markers should look. The following snippet will show you how to use those properties to show all the markers (We will be using the same data source with different numbers).

  1. <ig:XamSparkline DisplayType="Line"                  
  2.                  ItemsSource="{StaticResource dataSource}"    
  3.                  ValueMemberPath="Value"                   
  4.                  
  5.                  NegativeMarkerVisibility="Visible"        
  6.                  FirstMarkerVisibility="Visible"               
  7.                  LowMarkerVisibility="Visible"        
  8.                  MarkerVisibility="Visible"          
  9.                  HighMarkerVisibility="Visible"             
  10.                  LastMarkerVisibility="Visible"             
  11.                  
  12.                  Width="150"           
  13.                  Height="50"            
  14.                  Margin="20"   
  15.                  />

Notice that the normal marker visibility property is called just MarkerVisibility, not NormalMarkerVisibility.

By default each of the markers will have a unique color and the same default size.

The following example shows you how to set a red and big low marker and blue and small high marker.

  1. <ig:XamSparkline DisplayType="Line"          
  2.                  ItemsSource="{StaticResource dataSource}"    
  3.                  ValueMemberPath="Value"    
  4.                        
  5.                  LowMarkerVisibility="Visible"       
  6.                  LowMarkerBrush="Red"              
  7.                  LowMarkerSize="5"                 
  8.                  HighMarkerVisibility="Visible"        
  9.                  HighMarkerBrush="Blue"                
  10.                  HighMarkerSize="2"   
  11.                  
  12.                  Width="150"                 
  13.                  Height="50"                
  14.                  Margin="20"             
  15.                  />

Another thing to have in mind when you use the markers is that when you hover with the mouse over a marker you will get a tooltip that gives you more detail on it.

The next feature that I’ll show you is the range bar. The XamSparkline allows you to display an opaque band that shows the ranges of “safe” values. You can set the minimum and the maximum value and you will be able to spot very easily which values are outliers.

A tip on better readability of the sparkline is to use the markers in addition to the range bar as you can see from the screenshot above. In scenarios with sparsely distributed data points this might be a good idea.

Here are the properties you have to set in the code to use this feature (the example is the same as previously in the article).

  1. NormalRangeVisibility="Visible"       
  2. NormalRangeMinimum="1"       
  3. NormalRangeMaximum="5"

If you want the bar to have another color use the NormalRangeFill property.

The final feature I will show you how to use in this article is the trend line. Each spark line can have its own line that shows some type of trend. Here is a list with those types:

  • Linear, Quadratic, Cubic, Quartic, Quintic, Logarithmic, Exponential and PowerLaw fits
  • Simple, Exponential, Modified, Cumulative and Weighted averages
  • Standard deviation

 

Once you set the type of trend line you want, you can set its thickness and brush. Here is an example on how to use the CubicFit trend line with a column line spark.

  1. <ig:XamSparkline DisplayType="Column"  
  2.                  ItemsSource="{StaticResource dataSource}"
  3.                  ValueMemberPath="Value"  
  4.                  
  5.                  TrendLineType="CubicFit"
  6.                  TrendLineBrush="Red"   
  7.                  TrendLineThickness="2"
  8.                  />

The result of this code is this

If you change the cubic fit type to standard deviation the sparkline will look like this

I hope this has been useful and informative. Have a great day!