Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Creating a Chart in WPF

0.00/5 (No votes)
28 Feb 2012 1  
This article describes how to create a chart in WPF.
Sample Image - maximum width is 600 pixels

Introduction

This article shows how to make great looking charts in WPF. For demonstration of this, I have developed a WPF Project using Visual C# 2010 Express Edition. This project displays population of the top 5 most populous countries of the world using a column chart.

Background

Chart functionality in WPF is provided by the WPF Toolkit assembly. A reference to the System.Windows.Controls.DataVisualization.Toolkit.dll file is added to the project. Then the System.Windows.Controls.DataVisualization.Charting namespace is imported in the page as follows:

xmlns:cht="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit" 

Using the Code

To provide data for the chart, the following class is created:

public class Country
{
    public Country(string Name, long Population)    // Constructor
    {
        this.Name = Name;
        this.Population = Population;
    }
    public string Name                // Name Property
    {
        get;
        set;
    }
    public long Population                // Population Property
    {
        get;
        set;
    }
}

The following class represents the list of top 5 most populous countries:

public class CountryCollection :
Collection<Country> // Extending from System.Collections.ObjectModel.Collection class
{
    public CountryCollection() // Constructor to add Country objects to the CountryCollection
    {
        Add(new Country("China", 1336718015));
        Add(new Country("India", 1189172906));
        Add(new Country("United States", 313232044));
        Add(new Country("Indonesia", 245613043));
        Add(new Country("Brazil", 203429773));
    }
}

Next a resource called CountryCollection is created in the XAML code as follows:

<Window.Resources>
    <local:CountryCollection x:Key="CountryCollection"/>
</Window.Resources>

Following is the XAML code for the Chart control:

<cht:Chart Name="populationChart" Title="Top 5 Most Populous Countries of the World" 
    Background="LightBlue">
     <cht:Chart.Series>
         <cht:ColumnSeries Title="Population" 
    ItemsSource="{StaticResource CountryCollection}" 
    IndependentValueBinding="{Binding Path=Name}" 
    DependentValueBinding="{Binding Path=Population}">
         </cht:ColumnSeries>
     </cht:Chart.Series>
</cht:Chart>

In the above code, the CountryCollection resource is bound to the ColumnSeries using the
ItemsSource property. The IndependentValueBinding property binds the country name and
DependentValueBinding property binds the population.

Following is the complete XAML code for the application:

<Window x:Class="WPFPopulationChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPFPopulationChart"
        xmlns:cht="clr-namespace:System.Windows.Controls.
        DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        Title="Population Chart" Height="350" Width="525">
    <Window.Resources>
        <local:CountryCollection x:Key="CountryCollection"/>
    </Window.Resources>
    <Grid>
        <cht:Chart Name="populationChart"
        Title="Top 5 Most Populous Countries of the World" Background="LightBlue">
            <cht:Chart.Series>
                <cht:ColumnSeries Title="Population"
                ItemsSource="{StaticResource CountryCollection}"
                IndependentValueBinding="{Binding Path=Name}"
                DependentValueBinding="{Binding Path=Population}">
                </cht:ColumnSeries>
            </cht:Chart.Series>
        </cht:Chart>
    </Grid>
</Window>

Points of Interest

Population data for the chart is taken from the following link:

The population figures are as on December 2011.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here