swdev:dotnet:wpf:charting [Audina Documentation]

This is an old revision of the document!

Charting

Using MS Chart

Create a WPF (.NET 4.0) project.
Add Assembly references:
- WindowsFormsIntegrations
- System.Windows.Forms
- System.Windows.Controls.DataVisualization.Toolkit
Place a WindowsFormsHost control inside a Grid (in XAML).
Place a Chart control inside.

Create a bar chart:

<Window x:Class="MSChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:winforms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
        xmlns:charting="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <Grid>
            <WindowsFormsHost>
                <charting:Chart x:Name="chart1" BackColor="WhiteSmoke" Height="100" Width="200" />
            </WindowsFormsHost>
        </Grid>
    </Grid>
</Window>

Add code behind to populate the chart:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Forms.DataVisualization.Charting;
 
namespace MSChart
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            // Create Chart Area
            ChartArea chartArea1 = new ChartArea();
 
            // Add Chart Area to the Chart
            chart1.ChartAreas.Add(chartArea1);
 
            // Create a data series
            Series series1 = new Series();
            Series series2 = new Series();
 
            // Add data points to the first series
            series1.Points.Add(34);
            series1.Points.Add(24);
            series1.Points.Add(32);
            series1.Points.Add(28);
            series1.Points.Add(44);
 
            // Add data points to the second series
            series2.Points.Add(14);
            series2.Points.Add(44);
            series2.Points.Add(24);
            series2.Points.Add(32);
            series2.Points.Add(28);
 
            // Add series to the chart
            chart1.Series.Add(series1);
            chart1.Series.Add(series2);
        }
    }
}

Using WPFToolkit

Required

WPF Toolkit
Assembly reference System.Windows.Controls.DataVisualization.Toolkit.

Create a Pie Chart:

<Window x:Class="WpfChartControl.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <charting:Chart x:Name="chart" Width="350" Height="250">
            <charting:Chart.Series>
                <charting:PieSeries ItemsSource="{Binding}"
                    DependentValuePath="Value"
                    IndependentValuePath="Key"
                    Title="Pet Preference" IsSelectionEnabled="True" />
            </charting:Chart.Series>
        </charting:Chart>
    </Grid>
</Window>

Populate Pie Chart in C#:

chart.DataContext = new KeyValuePair<string, int>[] {
                    new KeyValuePair<string, int>("Dog", 30),
                    new KeyValuePair<string, int>("Cat", 25),
                    new KeyValuePair<string, int>("Rat", 5),
                    new KeyValuePair<string, int>("Hampster", 8),
                    new KeyValuePair<string, int>("Rabbit", 12) };

Source: Chart Controls for WPF ship in the Toolkit

Charting

Using MS Chart

Using WPFToolkit

References