Recently I thought I would check out the charting controls in the Silverlight Toolkit. I’d been meaning to for awhile, but I was distracted by other tasks such as writing the documentation for the Silverlight 4 beta release. Well, those docs have gone out so I had some time on my hands. I fired up my machine with Silverlight 3 and the Toolkit for Silverlight 3 installed and got busy.

The Data

I thought I’d start with a pie chart, because everyone loves pie charts, right? Okay, maybe it’s pie that everyone loves, but I do enjoy a good pie chart as well. One of the things we are always looking at on the User Education team is what a particular writer owns compared with other writers. This is one of the pieces of data we use to determine who should own new features. A pie chart is an easy way to visualize this data. For example, let’s say we have three writers with the following type distribution that I want to represent in a chart:

Writer Types Owned
Chris Sells 114
Luka Albrus 225
Jim Hance 140

 

To  get started, I created a Silverlight project and added a very simple class to represent a writer and type ownership:

public class Writer
  {
      public Writer() { }
      public Writer(string writerName, int numOfTypes)
      {
          Name = writerName;
          Types = numOfTypes;
      }
      public string Name { get; set; }
      public int Types { get; set; }
  }

Next, in the constructor for my page, I created an ObservableCollection that contains the writers.

public MainPage()
{
    InitializeComponent();
    ObservableCollection<Writer> Team = new ObservableCollection<Writer>
    {
         new Writer("Chris Sells", 114),
         new Writer("Luka Abrus", 225),
         new Writer("Jim Hance", 140)
    };

}

Adding the Chart

A cool feature of the Toolkit for Silverlight 3 is the great designer support. The Toolkit controls display in the Visual Studio Toolbox so you can simply drag the desire controls onto the XAML editing surface. Doing so adds the necessary references, using statements and XAML namespace qualifiers to the XAML and code files.

There are a few key steps to adding a chart to your application.

First, drag a Chart control to the XAML editor. Here’s the Toolbox:

 

image

I set the chart’s name and title properties.

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
</chartingToolkit:Chart>

Then you’ll need to add a chartNameSeries control inside the Chart control. In this case, I’ll add a PieSeries by dragging it from the ToolBox to the XAML editor, inside the <Chart> tags.

image

I set the ItemsSource property to a {Binding}, the IndependentValue path to Name, which means my pie chart will have an entry for each writer name. and the DependentValuePath to Types so my pie chart will display the number of types that each writer is assigned as a portion of the pie.

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
        <chartingToolkit:PieSeries ItemsSource="{Binding}" IndependentValuePath="Name"
            DependentValuePath="Types">
        </chartingToolkit:PieSeries>
</chartingToolkit:Chart>

Lastly, in the code-behind file, I set the data context for MyPie to the collection of writers.

 MyPie.DataContext = Team;

 

I pressed F5 and look at the beautiful pie chart I got:

image

This chart is nice, and it was incredibly easy to create, but I decided I wanted to see this data in bar-chart format. I swapped my PieSeries for a BarSeries, keeping the same property settings (yes, I even left it named “MyPie” for now). Here’s the XAML:

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
       <chartingToolkit:BarSeries ItemsSource="{Binding}" IndependentValuePath="Name"
           DependentValuePath="Types">
       </chartingToolkit:BarSeries>
</chartingToolkit:Chart>

When I pressed F5, I got the this bar chart:

image

 

This bar chart is okay, but the default scale the data is presented in makes Chris look like a slacker. Since I know he’s not (for the record, these names are out of our fictitious names list), I wanted to change the scale a bit. Also the “Series 1” title isn’t very helpful.

Fixing the “Series 1” was easy…I added a title to my bar series.

<chartingToolkit:BarSeries Title="# of Types" ItemsSource="{Binding}" IndependentValuePath="Name"
            DependentValuePath="Types">
</chartingToolkit:BarSeries>

I discovered that in order to change the scale in which my data is displayed, I needed to add some Axes to my chart. A Chart object has an Axes property that you set to a collection of Axis objects. There are many different types of axis for displaying different kinds of data. These different types of axis all derive from Axis are generally named using the following convention: DescriptionOfFunctionAxis. For my chart I’ll use a LinearAxis since I am displaying numbers. I set the properties of my LinearAxis to the following values:

Property Value
Title Types Owned
Orientation X
Minimum 0
Maximum 300
Interval 50
ShowGridLines True
FontStyle Italic

With these settings I adjust the scale of the X-axis to 0-300, with intervals of 50. I also opted to show gridlines and decided to use an italic font.

Getting fancy now, I also added a CategoryAxis, used for displaying category information, with its Title property set to Writer, and an Orientation set to Y. This will add “Writer” along the Y-axis for clarity. When I was finished, my XAML looked like this (the newly added portion is in a bold font) :

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
      
<chartingToolkit:Chart.Axes>
           <chartingToolkit:CategoryAxis Title="Writer" Orientation="Y" />
           <chartingToolkit:LinearAxis Title="Types owned"  Orientation="X" Minimum="0" Maximum="300" 
                  Interval="50" ShowGridLines="True"  FontStyle='Italic'/>
       </chartingToolkit:Chart.Axes>
       <chartingToolkit:BarSeries Title="# of Types" ItemsSource="{Binding}" IndependentValuePath="Name" 
             DependentValuePath="Types">
       </chartingToolkit:BarSeries>
</chartingToolkit:Chart>

I pressed F5 and here’s what I got:

image

Yeah! Chris suddenly looks much more productive, and I’ve gotten started with charting!