Post
Ask Question

Pie Chart In WPF

WPF does not ship with default charting controls. Charting functionality is supported by WPF Toolkit that was last updated in 2010. You can download the latest version of the WPF Toolkit here.
 
The WPF Toolkit is a collection of WPF features and components that are being made available outside of the normal .NET Framework ship cycle. The following advanced controls are a part of this toolkit.
  • AutoCompleteBox
  • Accordion
  • Rating
  • DataGrid
  • Calendar
  • DatePicker
  • VisualStateManager
  • Chart Controls

 This article demonstrates how to draw pie charts using the WPF Toolkit.

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.

Adding WPF Toolkit 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.

Adding WPF Toolkit Reference
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.

Adding WPF Toolkit Reference
Figure 3

The final references added to the page looks like the following. As you can see here, I added names of these references as DV and DVC.

  1. xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"  
  2. 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.

list of charting related elements
Figure 4

Creating a Chart

The Chart element represents a WPF Chart control in XAML.

  1. < 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. The Title and LegendTitle properties represent the title of the chart and the title of legend.

  1. <DVC:Chart Name="mcChart" Width="400" Height="250" Background="YellowGreen" Foreground="DarkBlue" Title="Area Chart" LegendTitle="Month Rating" />  
Listing 1

The output of Listing 1 looks like Figure 5.
 
Creating a Chart
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, AreaSeries, and ScatterSeries attributes and based on the attribute, the chart will be created.

Chart Types
Figure 6

Pie Chart

The code snippet in Listing 2 creates a pie chart by setting Chart.Series to PieSeries. As you may see, the binding has occurred on Key and Value fields of a data source.

  1. <DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart" Width="400" Height="250" Background="LightSteelBlue">  
  2.     <DVC:Chart.Series>  
  3.         <DVC:PieSeries Title="Experience" IndependentValueBinding="{Binding Path=Key}" DependentValueBinding="{Binding Path=Value}">  
  4.         </DVC:PieSeries>  
  5.     </DVC:Chart.Series>  
  6. </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.

  1. privatevoid LoadPieChartData() {  
  2.     ((PieSeries) mcChart.Series[0]).ItemsSource = newKeyValuePair < string, int > [] {  
  3.         newKeyValuePair < string, int > ("Project Manager", 12),  
  4.             newKeyValuePair < string, int > ("CEO", 25),  
  5.             newKeyValuePair < string, int > ("Software Engg.", 5),  
  6.             newKeyValuePair < string, int > ("Team Leader", 6),  
  7.             newKeyValuePair < string, int > ("Project Leader", 10),  
  8.             newKeyValuePair < string, int > ("Developer", 4)  
  9.     };  
  10. }  

Listing 3

The output looks like Figure 7.

Chart Output
Figure 7

Generating Chart from a Collection

Now we are going to generate a pie chart from a collection. I have a class Fruit that looks like Listing 4. It has two members, Name and Share.

  1. classFruit {  
  2.     publicstring Name {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     publicInt16 Share {  
  7.         get;  
  8.         set;  
  9.     }  
  10. }  

Listing 4

Listing 5 is a Fruit collection class that adds some Fruit objects in the constructor.

  1. classFruitCollection: System.Collections.ObjectModel.Collection < Fruit > {  
  2.     public FruitCollection() {  
  3.         Add(newFruit {  
  4.             Name = "Mango", Share = 10  
  5.         });  
  6.         Add(newFruit {  
  7.             Name = "Banana", Share = 36  
  8.         });  
  9.         Add(newFruit {  
  10.             Name = "Apple", Share = 24  
  11.         });  
  12.         Add(newFruit {  
  13.             Name = "Guava", Share = 4  
  14.         });  
  15.         Add(newFruit {  
  16.             Name = "Orange", Share = 12  
  17.         });  
  18.         Add(newFruit {  
  19.             Name = "Pear", Share = 10  
  20.         });  
  21.         Add(newFruit {  
  22.             Name = "Pineapple", Share = 4  
  23.         });  
  24.     }  
  25. }  

Listing 5

Now in our XAML code, I create a resource called FruitCollection and bind it to the PieSeries using the ItemsSource property as listed in Listing 6.

  1. <Grid.Resources>  
  2.     <local:FruitCollection x:Key="FruitCollection" />  
  3. </Grid.Resources>  
  4. <DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart" Width="400" Height="250" Background="LightSteelBlue">  
  5.     <DVC:Chart.Series>  
  6.         <DVC:PieSeries Title="Experience" ItemsSource="{StaticResource FruitCollection}" IndependentValueBinding="{Binding Path=Name}" DependentValueBinding="{Binding Path=Share}">  
  7.         </DVC:PieSeries>  
  8.     </DVC:Chart.Series>  
  9. </DVC:Chart> 

Listing 6

Now simply build and run the project. New output looks like Figure 8.

Generating Chart from a Collection
Figure 8

3D Pie Chart

Here is a URL that shows you how to create a 3D pie chart.

http://www.codeproject.com/KB/WPF/WPF_3D_Pie_Chart.aspx

Summary

In this article, we learned how to use WPF Toolkit to build pie charts.


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.