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

WPF Toolkit Charting Controls (Line, Bar, Area, Pie, Column Series) Demo

By , 15 May 2011
Rate this:
Please Sign up or sign in to vote.

Introduction

I’m currently working on a few Data Visualization projects and am using WPF most of the time. Charting controls are very useful for the one related to statistics and data handling. WPF toolkit is free and open source, however is used by few because of its limited charting support. In my opinion, it is quite useful and straightforward to use.

Here, I’m just demonstrating the basic charting controls and setting data for display. For articles related to this in future, I shall demonstrate advanced features of WPF Toolkit.

Beginning

No prior knowledge of WPF is required. You just need to be aware of HTML (which I’m pretty sure everyone is, nowadays). XAML coding is pretty fun.

Firstly, I’ll mention the installation steps and then will dive into coding XAML and related C# files for visualizing static set of data.

First Step – Install WPF Toolkit

Install WPF Toolkit from this site:

(Please check the installation and usage instructions as mentioned here.)

Add new WPF application in Visual Studio.

If you are not able to view chart controls in Toolbox, right click Toolbox and select Choose Items. Then click on WPF components and select chart controls (the ones mentioned in the title). This will add the controls to your toolbox and you should be able to drag and drop them on the XAML form.

Second Step – XAML Coding for Charting Controls

XAML (Extensible Application Markup Language) is a markup language for declarative application programming. If you are interested in knowing more about XAML, please refer to the MSDN documentation at http://msdn.microsoft.com/en-us/library/ms747122.aspx.

As you can see in the following MainWindow.xaml code, there are a lot of <chartingToolkit:Chart> tags, each one refers to the 5 different charting controls that we are going to use.

<Window x:Class="WpfToolkitChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="1031" Width="855" xmlns:chartingToolkit=
	"clr-namespace:System.Windows.Controls.DataVisualization.Charting;
	assembly=System.Windows.Controls.DataVisualization.Toolkit">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" 
	VerticalScrollBarVisibility="Auto" Margin="0,-28,0,28">
        <Grid Height="921">
            <chartingToolkit:Chart Height="262" HorizontalAlignment="Left" 
		Margin="33,0,0,620" Name="columnChart" Title="Column Series Demo" 
		VerticalAlignment="Bottom" Width="360">
                <chartingToolkit:ColumnSeries DependentValuePath="Value" 
		IndependentValuePath="Key" ItemsSource="{Binding}" />              
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="pieChart" Title="Pie Series Demo" 
		VerticalAlignment="Top" Margin="449,39,43,0" Height="262">
                <chartingToolkit:PieSeries DependentValuePath="Value" 
		IndependentValuePath="Key" ItemsSource="{Binding}" 
		IsSelectionEnabled="True" />
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="areaChart" Title="Area Series Demo" 
		VerticalAlignment="Top" Margin="33,330,440,0" Height="262">
                <chartingToolkit:AreaSeries DependentValuePath="Value" 
		IndependentValuePath="Key" ItemsSource="{Binding}" 
		IsSelectionEnabled="True"/>
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="barChart" Title="Bar Series Demo" 
		VerticalAlignment="Top" Margin="449,330,43,0" Height="262">
                <chartingToolkit:BarSeries  DependentValuePath="Value" 
		IndependentValuePath="Key" ItemsSource="{Binding}" 
		IsSelectionEnabled="True"/>
            </chartingToolkit:Chart>
            <chartingToolkit:Chart  Name="lineChart" Title="Line Series Demo" 
		VerticalAlignment="Top" Margin="33,611,440,0" Height="254">
                <chartingToolkit:LineSeries  DependentValuePath="Value" 
		IndependentValuePath="Key" ItemsSource="{Binding}" 
		IsSelectionEnabled="True"/>
            </chartingToolkit:Chart>
        </Grid>
    </ScrollViewer>
</Window>

Beginning with the <window> tag, you can see that there is an attribute that says xmlns:chartingToolkit which is basically a namespace referring to the added WPF Toolkit.

I’ve used <ScrollViewer> tag in order to add horizontal and vertical scrollbars to the XAML page.

Now starting with first charting control, columnChart, drag and drop the column series control in toolbox on XAML page and you will see a rectangle with nothing inside. Look in the XAML window (usually below the Designer), and you will see:

<chartingToolkit:ColumnSeries DependentValuePath="Value" 
IndependentValuePath="Key" ItemsSource="{Binding}" />

Now all the charting controls needs to be encapsulated in <chartingToolkit:Chart> (which is a good practice). It has different attributes such as height, horizontal alignment, name, title, width, etc. which are just concerned with the way in which it appears on the page.

Our basic concern is understanding the attributes of <chartingTookit:columnSeries> here and in all other charting controls. I’m using three attributes. DependentValuePath and IndependentValuePath are related to the Axis of the Chart (i.e. X-axis, Y-axis). “Value” and “Key” as assigned to them respectively - this is because I’m using KeyValuePair<> data type in my data model (which has Key and Value). You can also use Dictionary or any other data type by just making sure that you have two parameters that are interdependent for visualization. Itemsource attribute is used for binding our data to the control.

Follow the same as above for all the other controls as mentioned and now we shall assign the data model to the controls.

Third Step – Assigning Data Model to the Controls

As you can see in the MainWindow.xaml.cs file, it is pretty straightforward with the way we are assigning data model.

namespace WpfToolkitChart
{
  /// <span class="code-SummaryComment"><summary>
</span>  /// Interaction logic for MainWindow.xaml
  /// <span class="code-SummaryComment"></summary>
</span>  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      showColumnChart();
    }

    private void showColumnChart()
    {
      List<KeyValuePair<string, int>>

I’m using static list with 5 entries. DataContext is the property assigned to charting controls and you can assign the list directly to the controls and you are good to go.

Fourth Step – Compile and Run

Compile and run and you should see the following:

Charting_Controls_Screen.png

Conclusion

I hope this article provides you with enough assistance to keep the work going on for visualizing information. Information Visualization is changing the way people look at data and in my view, it is going to play a key role in future.

I’ll explain advanced features related to assigning complex data model to controls in the future.

History

  • 15th May, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Priyank Kabaria
Student
United States United States
No Biography provided

Comments and Discussions

 
Questionmultiple series PinmemberMember 1046842015-Dec-13 17:21 
QuestionSame application using database PinprofessionalSnehasish_Nandy2-Dec-13 20:26 
QuestionHow can we group barSeries PinmemberMujtaba Faizan7-Oct-13 6:32 
QuestionStyling examples PinmemberMember 824721922-Feb-13 8:53 
GeneralThank you... It works fine. And thriugh this i learnt how manipulate graphs. PinmemberShankar_s19-Feb-13 23:26 
QuestionI have an error with the InternalActualIndependentAxis null PinmemberEnricoOliva28-Sep-12 6:16 
QuestionDatapoint Tooltip PinmemberPaul Tan9-Sep-12 22:29 
GeneralThank you, used your article as a basis Pinmemberwoutercx11-Aug-12 7:45 
GeneralMy vote of 5 PinmemberMember 53622918-Jun-12 1:35 
QuestionChange color to ColumnData Pinmemberstranet4-Jun-12 23:37 
AnswerRe: Change color to ColumnData---I have the same question. Pinmemberleiyangge6-Mar-14 15:01 
GeneralThank You PinmemberGil.Y29-May-12 21:17 
Questionhow to put two different data with different color in single area chart Pinmemberd474211-May-12 0:40 
QuestionHow to display both +ve and -ve values in chart control for LineSeries PinmemberMember 831376710-May-12 23:51 
QuestionConnectivity with database Pinmemberwizardbot2-Apr-12 1:18 
QuestionHow to add Spline chart Pinmembertan28131-Dec-11 6:41 
GeneralMy vote of 5 Pinmembertan28131-Dec-11 6:32 
QuestionError PinmemberSoftware200716-Nov-11 17:16 
AnswerRe: Error PinmemberPriyank Kabaria16-Nov-11 18:03 
Hi,
 
I believe error you are facing has to do with DataContext.
You can get detailed description of solution here:

[^]
 
Hope it helps,
Priyank
GeneralRe: Error PinmemberSoftware200717-Nov-11 13:16 
GeneralRe: Error PinmemberPriyank Kabaria17-Nov-11 13:21 
GeneralRe: Error PinmemberSoftware200717-Nov-11 13:23 
GeneralRe: Error PinmemberMember 874695028-Mar-12 12:26 
GeneralWPF Toolkit Charting Controls (Line, Bar, Area, Pie, Column Series) Demo Pinmemberpeirone1-Nov-11 6:37 
GeneralRe: WPF Toolkit Charting Controls (Line, Bar, Area, Pie, Column Series) Demo PinmemberPriyank Kabaria1-Nov-11 8:42 

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
Web03 | 2.8.140415.2 | Last Updated 15 May 2011
Article Copyright 2011 by Priyank Kabaria
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid