Charting in WPF
The WPF Toolkit released in June 2009 comes with a data visualization assembly
called System.Windows.Controls.DataVisualization.Toolkit.dll that hosts the
charting functionality in WPF. This article demonstrates how to draw charts
using the WPF Toolkit.
Note: This article is written by using the WPF Toolkit June 2009 that you can
download from here:
WPF Toolkit - Release: WPF Toolkit June 2009. This toolkit
may be a part of WPF in near future versions.
Adding WPF Toolkit Reference
Before you can use any charting related functionality in a WPF application, you
must download the WPF Toolkit. After that you need to add a reference to an
assembly.
To add a reference, right click the References folder of your project in
Solution Explorer and select Add Reference. This action will open the Add
Reference dialog as you can in the following Figure 1. On this dialog, select
Browse option and browse the
System.Windows.Controls.DataVisualization.Toolkit.dll assembly from the folder
where you installed the WPF Toolkit. This assembly resides in the Binaries
folder.
Tip: If you do not want to download WPF Toolkit, you can download the attached
project and copy WPFToolkit.dll and
System.Windows.Controls.DataVisualization.Toolkit.dll assemblies from this
project to the bin folder of your project and add reference.
Figure 1
Once you add the reference, you will see the
System.Windows.Controls.DataVisualization.
Toolkit added to your References dialog as you
see in Figure 2.
Figure 2
Now, the next step is to import the
System.Windows.Controls.DataVisualization.toolkit and the
System.Windows.Controls.DataVisualization.Charting namespaces to the page. Once
you type xmlns= in your page, you will see these namespaces in the Intellisense.
Select and add both of them to your page as you can see in Figure 3.
Figure 3
The final reference added to the page looks like following. As you can see here,
I added name of this reference to ToolkitRef.
xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
Now you will see DVC in your page and once you
select it, you will notice all Charting related elements added to the
Intellisense. To add a Chart control to your page, just select the Chart control
from the list. The list of charting related elements looks like Figure 4.
Figure 4
Creating a Chart
The Chart element represents a WPF Chart control in XAML.
<
DVC:Chart></DVC:Chart>
The code snippet in Listing 1 creates a Chart and sets its width, height, and
background properties of the Chart control.
<DVC:Chart
Name="MyChart"Width="400"
Height="250"
Background="YellowGreen">
</DVC:Chart>
Listing 1
The output of Listing 1 looks like Figure 5.
Figure 5
Chart Types
The Series attribute of the Chart element is used to create a chart type. If you
see in Figure 6, you will notice BarSeries, ColumnSeries, LineSeries, PieSeries,
and ScatterSeries attributes and based on the attribute, the chart will be
created.
Figure 6
Bar Chart
The code snippet in Listing 2 creates a bar chart by setting Chart.Series to
BarSeries. As you see, the binding is occurred on Key and Value fields of a data
source.
<DVC:ChartCanvas.Top="80"
Canvas.Left="10"
Name="mcChart"
Width="400"
Height="250"
Background="LightSteelBlue">
<DVC:Chart.Series>
<DVC:BarSeriesTitle="Experience"
IndependentValueBinding="{Binding
Path=Key}"
DependentValueBinding="{Binding
Path=Value}">
</DVC:BarSeries>
</DVC:Chart.Series>
</DVC:Chart>
Listing 2
The code snippet in Listing 3 creates a collection in KeyValuePair form and sets
the ItemsSource property of the chart series. Same data can be used for other
chart types.
private void LoadBarChartData()
{
((BarSeries)mcChart.Series[0]).ItemsSource
=
new KeyValuePair<string,int>[]{
newKeyValuePair<string,int>("Project
Manager", 12),
newKeyValuePair<string,int>("CEO",
25),
newKeyValuePair<string,int>("Software
Engg.", 5),
newKeyValuePair<string,int>("Team
Leader", 6),
newKeyValuePair<string,int>("Project
Leader", 10),
newKeyValuePair<string,int>("Developer",
4) };
}
Listing 3
The output looks like Figure 7.
Figure 7
Column Chart
The code snippet in Listing 4 creates a column chart by setting Chart.Series to
ColumnSeries. As you may see, the binding is occurred on Key and Value fields of
a data source.
<DVC:ChartCanvas.Top="80"
Canvas.Left="10"Name="mcChart"
Width="400"
Height="250"
Background="LightSteelBlue">
<DVC:Chart.Series>
<DVC:ColumnSeriesTitle="Experience"
IndependentValueBinding="{Binding
Path=Key}"
DependentValueBinding="{Binding
Path=Value}">
</DVC:ColumnSeries>
</DVC:Chart.Series>
</DVC:Chart>
Listing 4
The code snippet in Listing 5 creates a collection in KeyValuePair form and sets
the ItemsSource property of the chart series. Same data can be used for other
chart types.
private void LoadColumnChartData()
{
((ColumnSeries)mcChart.Series[0]).ItemsSource
=
new KeyValuePair<string,int>[]{
new KeyValuePair<string,int>("Project
Manager", 12),
new KeyValuePair<string,int>("CEO",
25),
new KeyValuePair<string,int>("Software
Engg.", 5),
new KeyValuePair<string,int>("Team
Leader", 6),
new KeyValuePair<string,int>("Project
Leader", 10),
new KeyValuePair<string,int>("Developer",
4) };
}
Listing 5
The output looks like Figure 8.
Figure 8
Pie Chart
The code snippet in Listing 6 creates a pie chart by setting Chart.Series to
BarSeries. As you may see, the binding is occurred on Key and Value fields of a
data source.
<DVC:ChartCanvas.Top="80"
Canvas.Left="10"
Name="mcChart"
Width="400"
Height="250"
Background="LightSteelBlue">
<DVC:Chart.Series>
<DVC:PieSeriesTitle="Experience"
IndependentValueBinding="{Binding
Path=Key}"
DependentValueBinding="{Binding
Path=Value}">
</DVC:PieSeries>
</DVC:Chart.Series>
</DVC:Chart>
Listing 6
The code snippet in Listing 7 creates a collection in KeyValuePair form and sets
the ItemsSource property of the chart series. Same data can be used for other
chart types.
private void LoadPieChartData()
{
((PieSeries)mcChart.Series[0]).ItemsSource
=
new KeyValuePair<string,int>[]{
newKeyValuePair<string,int>("Project
Manager", 12),
newKeyValuePair<string,int>("CEO",
25),
newKeyValuePair<string,int>("Software
Engg.", 5),
newKeyValuePair<string,int>("Team
Leader", 6),
newKeyValuePair<string,int>("Project
Leader", 10),
newKeyValuePair<string,int>("Developer",
4) };
}
Listing 7
The output looks like Figure 9.
Figure 9
Line Chart
The code snippet in Listing 8 creates a line chart by setting Chart.Series to
LineSeries. As you may see, the binding is occurred on Key and Value fields of a
data source.
<DVC:ChartCanvas.Top="80"
Canvas.Left="10"
Name="mcChart"
Width="400"
Height="250"
Background="LightSteelBlue">
<DVC:Chart.Series>
<DVC:LineSeriesTitle="
Monthly Count"
IndependentValueBinding="{Binding
Path=Key}"
DependentValueBinding="{Binding
Path=Value}">
</DVC:LineSeries>
</DVC:Chart.Series>
</DVC:Chart>
Listing 8
The code snippet in Listing 9 creates a collection in KeyValuePair form and sets
the ItemsSource property of the chart series. Same data can be used for other
chart types.
private void LoadLineChartData()
{
((LineSeries)mcChart.Series[0]).ItemsSource
=
new KeyValuePair<DateTime,int>[]{
newKeyValuePair<DateTime,int>(DateTime.Now,
100),
newKeyValuePair<DateTime,int>(DateTime.Now.AddMonths(1),
130),
newKeyValuePair<DateTime,int>(DateTime.Now.AddMonths(2),
150),
newKeyValuePair<DateTime,int>(DateTime.Now.AddMonths(3),
125),
new KeyValuePair<DateTime,int>(DateTime.Now.AddMonths(4),155)
};
}
Listing 9
The output looks like Figure 10.
Figure 10
Scatter Chart
The code snippet in Listing 9 creates a scatter chart by setting Chart.Series to
ScatterSeries. As you may see, the binding is occurred on Key and Value fields
of a data source.
<DVC:ChartCanvas.Top="80"
Canvas.Left="10"
Name="mcChart"
Width="400"
Height="250"
Background="LightSteelBlue">
<DVC:Chart.Series>
<DVC:ScatterSeriesTitle="Dots"
IndependentValueBinding="{Binding
Path=Key}"
DependentValueBinding="{Binding
Path=Value}">
</DVC:ScatterSeries>
</DVC:Chart.Series>
</DVC:Chart>
Listing 9
The code snippet in Listing 10 creates a collection in KeyValuePair form and
sets the ItemsSource property of the chart series. Same data can be used for
other chart types.
private void LoadScatterChartData()
{
((ScatterSeries)mcChart.Series[0]).ItemsSource
=
new KeyValuePair<DateTime,int>[]{
new
KeyValuePair<DateTime,int>(DateTime.Now,
100),
new
KeyValuePair<DateTime,int>(DateTime.Now.AddMonths(1),
130),
new
KeyValuePair<DateTime,int>(DateTime.Now.AddMonths(2),
150),
new KeyValuePair<DateTime,int>(DateTime.Now.AddMonths(3),
125)
};
}
Listing 10
The output looks like Figure 11.
Figure 11
Area Chart
The code snippet in Listing 11 creates an area chart by setting Chart.Series to
AreaSeries. As you may see, the binding is occurred on Key and Value fields of a
data source.
<!-- Area Chart in Code Behind -->
<DVC:ChartCanvas.Top="80"
Canvas.Left="10"Name="mcChart"
Width="400"
Height="250"
Background="LightSteelBlue"
Title="Area Chart"
LegendTitle="Month
Rating">
<DVC:Chart.Series>
<DVC:AreaSeries
Title="Area Chart"
IndependentValuePath="Key"
DependentValuePath="Value">
</DVC:AreaSeries>
</DVC:Chart.Series>
</DVC:Chart>
Listing 11
The code snippet in Listing 12 creates a collection in KeyValuePair form and
sets the ItemsSource property of the chart series. Same data can be used for
other chart types.
private void LoadAreaChartData()
{
((AreaSeries)mcChart.Series[0]).ItemsSource
=
new KeyValuePair<string,int>[]{
new KeyValuePair<string,int>("Jan
2009", 100),
new KeyValuePair<string,int>("Apr
2009", 180),
new KeyValuePair<string,int>("July
2009", 110),
new KeyValuePair<string,int>("Oct
2009", 95),
new KeyValuePair<string,int>("Jan
2010", 40),
new KeyValuePair<string,int>("Apr
2010", 95)
};
}
Listing 12
The output looks like Figure 12.
Figure 12
Chart Axes
The Axes property of Chart is used to add x and y axis to the chart. The code
snippet in Listing 13 adds a linear axis to the chart with its orientation,
title, font and other properties.
<DVC:Chart.Axes>
<!-- Add Horizontal and Vertical Axes-->
<DVC:LinearAxis
Orientation="Y"
Title="New Hires"
Interval="40"
Foreground="Black"
Background="GreenYellow"
FontFamily="Georgia"
FontSize="14"
FontWeight="Bold"
/>
</DVC:Chart.Axes>
Listing 13
The new output looks like Figure 13 that shows a left side chart title and
formatting.
Figure 13
Generating an Area Chart from a Collection
Now we are going to generate a bar chart from a collection. I have a class Fruit
that looks like Listing 14. It has two members Name and Share.
class Fruit
{
public string Name {
get; set; }
public Int16
Share {
get;set; }
}}
Listing 14
Listing 15 is a Fruit collection class that adds some Fruit objects in the
constructor.
class FruitCollection :
System.Collections.ObjectModel.Collection<Fruit>
{
publicFruitCollection()
{
Add(new
Fruit { Name =
"Mango", Share = 10 });
Add(new
Fruit { Name =
"Banana", Share = 36 });
Add(new
Fruit { Name = "Apple",
Share = 24 });
Add(new
Fruit { Name = "Guava",
Share = 4 });
Add(new
Fruit { Name =
"Orange", Share = 12 });
Add(new
Fruit { Name = "Pear",
Share = 10 });
Add(new
Fruit { Name =
"Pineapple", Share = 4 });
}
}
Listing 15
Now in our XAML code, I create a resource called FruitCollection and bind it to
the AreaSeries using the ItemsSource property as listed in Listing 16.
<Grid.Resources>
<local:FruitCollectionx:Key="FruitCollection"
/>
</Grid.Resources>
Listing 16
XAML code for binding a FruitCollection with an AreaSeries is listed in Listing
17.
<DVC:Chart.Series>
<DVC:AreaSeriesTitle="Fruits"
ItemsSource="{StaticResourceFruitCollection}"
IndependentValueBinding="{Binding
Path=Name}"
DependentValueBinding="{Binding
Path=Share}">
</DVC:AreaSeries>
</DVC:Chart.Series>
Listing 17
Now simply build and run the project. New output looks like Figure 14.
Figure 14
Summary
This tutorial discusses how to the WPF Toolkit to create various charts
including a bar chart, column chart, pie chart, area chart, scatter chart and a
line chart.