Reader Level:
Articles

Charting in WPF

By Mahesh Chand on November 28, 2009
This tutorial demonstrates how to draw various charts including line chart, bar chart, column chart, area chart, scatter chart, and pie chart using WPF and C#.
  • 0
  • 0
  • 111897
Download Files:
 

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.

ChartImg1.gif

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.

ChartImg2.gif

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.

ChartImg3.gif

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.

ChartImg4.gif

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.

ChartImg5.gif

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.

ChartImg6.gif

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>[]{
        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 3

The output looks like Figure 7.

ChartImg7.gif

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.

ChartImg8.gif
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>[]{
        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 7

The output looks like Figure 9.

ChartImg9.gif
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>[]{
        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),
        new
KeyValuePair<DateTime,int>(DateTime.Now.AddMonths(4),155) };

}

Listing 9

The output looks like Figure 10.

ChartImg10.gif

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.

ChartImg11.gif

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.

ChartImg12.gif

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.

ChartImg13.gif

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>
{
    public
FruitCollection()
    {
        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.

ChartImg14.gif

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.

Article Extensions
Contents added by me jiwush on Jun 28, 2011
Mahesh Chand

Mahesh Chand is founder of C# Corner. C# Corner founded in 1999 is a FREE member contributions based open platform for developers to solve problems, learn new technology and hang out.  Mahesh has been awar... Read more

COMMENT USING

Trending up