Click here to Skip to main content
Click here to Skip to main content

Creating a Chart in WPF

By , 28 Feb 2012
Rate this:
Please Sign up or sign in to vote.
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Azim Zahir
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with NIIT (Mumbai, India) as a Senior Faculty. I enjoy programming as a hobby. My favorite technologies are Flash, Flex and Silverlight.
 
Of late I have developed keen interest in WPF and Windows Mobile programming.
 
Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
GeneralMy vote of 4 PinmemberBelgian Ducky6-Sep-12 23:33 
GeneralRe: My vote of 4 PinmemberAzim Zahir13-Apr-13 16:24 
GeneralProblem in namespace PinmemberShaafs29-Sep-13 21:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 29 Feb 2012
Article Copyright 2012 by Azim Zahir
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid