Day #15: Silverlight Charting

Today is Day #15 of the 31 Days of Silverlight, and today we are going to cover creating a Pie Chart and a Bar Chart, two of the many items in the Silverlight Toolkit. We will spend the next couple of days covering some of the important features of the Silverlight Toolkit.

Charting

In general, charting has become of those things that we all dread as developers. In today’s demo, you’re going to see how easy it is to create some robust charts with very little effort. Let’s get started.

Creating some data

The first thing we need to do when creating a chart is to have some data to populate it with. I have created a simple class, City, that has two properties: Name, and Population. We are going to be charting a list of cities by their populations in the 2008 U.S. Census. Here’s the code for my class:


namespace SilverlightPieChart
{
public class City
{
public string Name { get; set; }
public int Population { get; set; }
}
}

Next, in our code-behind, I have created a simple list of Cities, with their appropriate data. This list of objects could have been populated from anywhere, but for the focus of this demo, we’ll just have them populated manually. Here’s our list:

        List<City> cities = new List<City>{
new City { Name="Cleveland, OH", Population=2250871},
new City { Name="Columbus, OH", Population=1773120},
new City { Name="Cincinnati, OH", Population=2155137},
new City { Name="Detroit, MI", Population=4425110},
new City { Name="Grand Rapids, MI", Population=1324516},
new City { Name="Lansing, MI", Population=454044},
new City { Name="Ann Arbor, MI", Population=341847},
new City { Name="Louisville, KY", Population=1268323},
new City { Name="Lexington, KY", Population=436684},
new City { Name="Memphis, TN", Population=1280533},
new City { Name="Nashville, TN", Population=1521437},
new City { Name="Chattanooga, TN", Population=518441},
new City { Name="Knoxville, TN", Population=1029155}};

Creating our chart

(I am assuming you have downloaded and installed the Silverlight Toolkit at this point. If you haven’t, I’ll wait while you get that done.)

OK, we’re back. Now let’s discuss what we’re creating before we actually create it. When creating charts in Silverlight, we need to create a Chart control, and inside that control, we can create Pie, Bar, Bubble, and more charts. The Chart holds things like the Title of the chart, design elements, sizes, etc. In our first example, our “PieSeries” control will create a pie chart based on our list of cities above. What’s incredibly awesome about these controls is that they do all of the work for you. I am going to bind a set of data to our PieSeries, and it figures out the total population of all of the cities in our list, the percentage that each city makes up, and even chooses different colors for each slice. It also creates a legend for our pie chart, so that each slice is labeled. Please also notice that we have to add an additional namespace for these controls: System.Windows.Controls.DataVisualization.Charting. Here’s our XAML:

<UserControl xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"  x:Class="SilverlightPieChart.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<
Canvas x:Name="LayoutRoot">
<
chartingToolkit:Chart x:Name="pieChart" Title="Cities In The Heartland"
BorderBrush="Gray"
Margin="1"
Canvas.Top="100" Canvas.Left="100" Width="400" Height="300">
<
chartingToolkit:PieSeries
IndependentValueBinding="{Binding Path=Name}"
DependentValueBinding="{Binding Path=Population}" />
</
chartingToolkit:Chart>
</
Canvas>
</
UserControl>

You’ll notice that while we bound two values to our PieSeries control, we didn’t actually define the source of the data. We’ll do that in our code-behind. In case it’s not clear, the IndependentValueBinding is the name of each slice of the pie, and the DependentValueBinding is the one that will cause the representation of the slice. This is because the Pie Chart is “dependent” on the values that you provide in this property.

Our final PieSeries code

Because of our nested containers (Chart > PieSeries), we are going to bind our data in code. In the two relevant lines in our MainPage() method, we initialize a reference to our PieSlice element, and in the second, we set the ItemsSource of that element. You’ll see that we have to refer to it as a PieSeries control, and this will change when we change this to a BarSeries. Here’s the code:

using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;

namespace SilverlightPieChart
{
public partial class MainPage : UserControl
{
List<City> cities = new List<City>{
new City { Name="Cleveland, OH", Population=2250871},
new City { Name="Columbus, OH", Population=1773120},
new City { Name="Cincinnati, OH", Population=2155137},
new City { Name="Detroit, MI", Population=4425110},
new City { Name="Grand Rapids, MI", Population=1324516},
new City { Name="Lansing, MI", Population=454044},
new City { Name="Ann Arbor, MI", Population=341847},
new City { Name="Louisville, KY", Population=1268323},
new City { Name="Lexington, KY", Population=436684},
new City { Name="Memphis, TN", Population=1280533},
new City { Name="Nashville, TN", Population=1521437},
new City { Name="Chattanooga, TN", Population=518441},
new City { Name="Knoxville, TN", Population=1029155}};

public MainPage()
{
InitializeComponent();
PieSeries pieSlice = ourChart.Series[0] as PieSeries;
pieSlice.ItemsSource = cities;
}
}
}

Here’s what it looks like (you can also click to see the Silverlight Pie Chart here):

What?! Someone changed their mind???

I’m sure this never happens on your software projects, but after I showed the pie chart to my manager, he decided we had too many data points for a pie chart to be effective. Then he dropped the question:

Would it be hard to make this a Bar Chart instead?

Answer: “I should be able to finish it by the end of the day…” You can make 2 minutes of changes to your code, and then go back to working on the Toughest Developer Puzzle Ever with all of your free time. We have 3 small changes to make, specifically, and those are just changing the word PieSeries to BarSeries. I also added a Title property to the BarSeries control, but this is certainly not necessary. It just populates the legend that is created for us. You could also change the name of our variable “pieSlice,” but it’s also not going to affect how this chart functions. Below is the XAML and C# for the BarSeries example:

XAML

<UserControl xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"  x:Class="SilverlightPieChart.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<
Canvas x:Name="LayoutRoot">
<
chartingToolkit:Chart x:Name="ourChart" Title="Cities In The Heartland"
BorderBrush="Gray"
Margin="1"
Canvas.Top="0" Canvas.Left="0" Width="490" Height="390">
<
chartingToolkit:BarSeries
IndependentValueBinding="{Binding Path=Name}"
DependentValueBinding="{Binding Path=Population}"
Title="Population"/>
</
chartingToolkit:Chart>
</
Canvas>
</
UserControl>

C#

using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;

namespace SilverlightPieChart
{
public partial class MainPage : UserControl
{
List<City> cities = new List<City>{
new City { Name="Cleveland, OH", Population=2250871},
new City { Name="Columbus, OH", Population=1773120},
new City { Name="Cincinnati, OH", Population=2155137},
new City { Name="Detroit, MI", Population=4425110},
new City { Name="Grand Rapids, MI", Population=1324516},
new City { Name="Lansing, MI", Population=454044},
new City { Name="Ann Arbor, MI", Population=341847},
new City { Name="Louisville, KY", Population=1268323},
new City { Name="Lexington, KY", Population=436684},
new City { Name="Memphis, TN", Population=1280533},
new City { Name="Nashville, TN", Population=1521437},
new City { Name="Chattanooga, TN", Population=518441},
new City { Name="Knoxville, TN", Population=1029155}};

public MainPage()
{
InitializeComponent();
BarSeries pieSlice = ourChart.Series[0] as BarSeries;
pieSlice.ItemsSource = cities;
}
}
}

Here’s what the BarSeries chart looks like in our example, using the same data (click here to see our Silverlight Bar Chart in another window):

Summary

In this article, we discovered how easy it is to add charts to our Silverlight applications. Keep in mind that you could also be building standalone Silverlight applications that are ONLY the chart, and add those to your existing ASP.NET pages. If you’d like to download the source code for this Silverlight Charting project, click here.

7 thoughts on “Day #15: Silverlight Charting

  1. I agree, your post are short, but at the same time those containt the exact information.

  2. Is there any way to make it seing only the percentage value or the item value, not both, when you put the cursor over the piechart?Thank you and sorry about my english

  3. Looks like a useful start, any change you can show us how to combine these charts with Real Time updating DataBinding? Assume your boss wants to keep adding new cities to the site as their population info comes in (or whatever)

  4. I love this series. Keep them coming. The first thing I do in the morning is look for your posts. Thank you very much!!!!

  5. It is even harder for the average ape to believe that he has descended from man.

  6. Life's greatest happiness is to be convinced we are loved.

  7. In the United States, doing good has come to be, like patriotism, a favorite device of persons with something to sell.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s