Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF
Article

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

Rate me:
Please Sign up or sign in to vote.
4.91/5 (38 votes)
15 May 2011CPOL3 min read 766.6K   35.9K   121   46
This article shows you how you can display information using WPF Toolkit chart controls.

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.

XML
<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:

XML
<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.

C#
namespace WpfToolkitChart
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      showColumnChart();
    }

    private void showColumnChart()
    {
      List<KeyValuePair<string, int>> valueList = new List<KeyValuePair<string, int>>();
      valueList.Add(new KeyValuePair<string, int>("Developer",60));
      valueList.Add(new KeyValuePair<string, int>("Misc", 20));
      valueList.Add(new KeyValuePair<string, int>("Tester", 50));
      valueList.Add(new KeyValuePair<string, int>("QA", 30));
      valueList.Add(new KeyValuePair<string, int>("Project Manager", 40));

      //Setting data for column chart
      columnChart.DataContext = valueList;

      // Setting data for pie chart
      pieChart.DataContext = valueList;

      //Setting data for area chart
      areaChart.DataContext = valueList;

      //Setting data for bar chart
      barChart.DataContext = valueList;

      //Setting data for line chart
      lineChart.DataContext = valueList;
    }

  }
}

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)


Written By
Student
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionChart Legend Pin
Member 136654799-Mar-18 22:04
Member 136654799-Mar-18 22:04 
QuestionWPF Chart Saving as png? Pin
QuintusW12-Dec-16 1:55
QuintusW12-Dec-16 1:55 
QuestionDock legend to left side of pie chart using WinRTXAMLToolkit Pin
Mohammed athar00722-Sep-16 20:45
Mohammed athar00722-Sep-16 20:45 
QuestionChange color after refreh Pin
killedman11-May-15 5:58
killedman11-May-15 5:58 
BugError LineSeries Pin
Member 1159094329-Apr-15 8:08
Member 1159094329-Apr-15 8:08 
QuestionAdd scroll bar to the charts Pin
Member 115248383-Apr-15 7:24
Member 115248383-Apr-15 7:24 
QuestionRegarding adding charts in code-behind file Pin
Ahmed Rosi29-Dec-14 1:18
Ahmed Rosi29-Dec-14 1:18 
AnswerRe: Regarding adding charts in code-behind file Pin
Ahmed Rosi29-Dec-14 18:52
Ahmed Rosi29-Dec-14 18:52 
QuestionRealtime Pin
Ali Bagherzadeh26-Nov-14 19:27
Ali Bagherzadeh26-Nov-14 19:27 
Questionmultiple series Pin
Member 1046842015-Dec-13 17:21
Member 1046842015-Dec-13 17:21 
AnswerRe: multiple series Pin
peter liang18-Nov-14 16:49
peter liang18-Nov-14 16:49 
GeneralRe: multiple series Pin
anjumM2-Feb-15 22:21
anjumM2-Feb-15 22:21 
QuestionSame application using database Pin
Snehasish_Nandy2-Dec-13 20:26
professionalSnehasish_Nandy2-Dec-13 20:26 
QuestionHow can we group barSeries Pin
Mujtaba Faizan7-Oct-13 6:32
Mujtaba Faizan7-Oct-13 6:32 
QuestionStyling examples Pin
Member 824721922-Feb-13 8:53
Member 824721922-Feb-13 8:53 
GeneralThank you... It works fine. And thriugh this i learnt how manipulate graphs. Pin
Shankar_s19-Feb-13 23:26
Shankar_s19-Feb-13 23:26 
QuestionI have an error with the InternalActualIndependentAxis null Pin
Enrico Oliva28-Sep-12 6:16
Enrico Oliva28-Sep-12 6:16 
QuestionDatapoint Tooltip PinPopular
Paul Tan9-Sep-12 22:29
Paul Tan9-Sep-12 22:29 
GeneralThank you, used your article as a basis Pin
woutercx11-Aug-12 7:45
woutercx11-Aug-12 7:45 
GeneralMy vote of 5 Pin
Member 53622918-Jun-12 1:35
Member 53622918-Jun-12 1:35 
QuestionChange color to ColumnData Pin
stranet4-Jun-12 23:37
stranet4-Jun-12 23:37 
AnswerRe: Change color to ColumnData---I have the same question. Pin
leiyangge6-Mar-14 15:01
leiyangge6-Mar-14 15:01 
GeneralThank You Pin
Gil.Y29-May-12 21:17
Gil.Y29-May-12 21:17 
Questionhow to put two different data with different color in single area chart Pin
Darshan.Pa11-May-12 0:40
professionalDarshan.Pa11-May-12 0:40 
QuestionHow to display both +ve and -ve values in chart control for LineSeries Pin
Member 831376710-May-12 23:51
Member 831376710-May-12 23:51 
How to show the positive and negative values in chart control specially on y axis. The x axis must be positive values only. And type of series is line series.

I am using WPFToolKit chart control.

I need both +ve and -ve values to be displayed in 'Y'- axis and only +ve values in 'X'- axis. I used Location property for LinearAxis but all -ve and +ve values are coming in one quadrant only. I want the +ve values to come in 1st quadrant and -ve values to come in 4th quadrant.

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

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