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.
JEFF BLANKENBURG 
Leave a Reply to bad credit payday loan Cancel reply