In this walkthrough we will add a simple data-bound pie chart to a WPF application Window.

Prerequisites

This walkthrough doesn't cover installation of amCharts for WPF. Read Installation article for the installation instructions.

Adding PieChart to a Window

Adding Data Layer

Note:

To make things simple we will use a simple object collection as data layer for this walkthrough. In real-life applications this could be represented by any data object implementing IEnumerable interface.

Creating data layer

  1. First we will crete a class to represent a single data item. Open source view for your window and add the following class declaration

    CopyC#
    public class TestChartDataItem : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public string Title { get; set; }
    private double _value;
    public double Value
    {
        get { return this._value; }
        set
        {
            this._value = value;
            // notify subscribers that Value property has changed
            if (this.PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Value"));
        }
    }
}

    Our data class has only 2 properties: Title and Value and implements INotifyPropertyChanged to enable notifications of changes to the Value property so that pie chart knows when the underlying data has changed.

  2. Now we will add a collection to hold data items for our chart. We will do this by adding a field of type ObservableCollection<(Of <(T>)>) like this:

    CopyC#
    ObservableCollection<TestChartDataItem> ChartData = new ObservableCollection<TestChartDataItem>()
    {
        new TestChartDataItem() { Title = "Slice #1", Value = 28 },
        new TestChartDataItem() { Title = "Slice #2", Value = 48 },
        new TestChartDataItem() { Title = "Slice #3", Value = 84 }
    };

    We have added 3 items to the collection right away.

Data Binding

Binding data to the PieChart

  1. Add a Window_Initialized method to the class file like this:

    CopyC#
    private void Window_Initialized(object sender, EventArgs e)
{
    // create a binding and set it on the SlicesSource dependency property
    Binding slicesBinding = new Binding();
    slicesBinding.Source = ChartData;
    pieChart1.SetBinding(PieChart.SlicesSourceProperty, slicesBinding);

    // define data member paths
    pieChart1.ValueMemberPath = "Value";
    pieChart1.TitleMemberPath = "Title";
}

    In this method we create a binding which bounds SlicesSource property of PieChart object. We set ValueMemberPath to the name of the value property in our data object (Value) and TitleMemberPath to the name of the property representing title in our data (Title).

  2. Connect Window_Initialized event handler to the Initialized()()() event by setting Initialized attribute in XAML like this:

    CopyXAML
    <Window x:Class="AmChartsWPFTutorials.SimpleDataBoundPieChart"
    ...
    Initialized="Window_Initialized">
    ...
</Window>

By implementing these 2 procedures and running the application you should get a pie chart similar to the one you have created in the Walkthrough: Adding a simple pie chart.

Only this time the values of the slices aren't hardcoded but bound to the underlying data layer.

Next Steps

In the next step we will add a button which when clicked will modify the underlying data layer and our pie chart will update itself automatically.

Modifying the Underlying Data

  1. To emulate data changes we will create a method that goes through all the items in our ChartData collection and sets new random values.

    CopyC#
    private int sliceNumber = 4;
private void ModifyDataButton_Click(object sender, RoutedEventArgs e)
{
    Random randomizer = new Random();

    // randomize values of existing data items
    foreach (TestChartDataItem item in ChartData)
    {
        item.Value = randomizer.Next(20, 100);
    }

    // with 40% probabillity and if there's more than one item left
    // remove a random data item from ChartData collection
    // otherwise add a random item
    if (randomizer.NextDouble() > 0.6 && ChartData.Count > 1)
    {
        // remove random data item
        ChartData.RemoveAt(randomizer.Next(ChartData.Count));
    }
    else
    {
        // add data item
        ChartData.Add(
            new TestChartDataItem()
            {
                Title = "Slice #" + (sliceNumber++).ToString(),
                Value = randomizer.Next(20, 100)
            }
        );
    }
}

    Additionally this method randomly adds or removes an item to/from the collection.

  2. To trigger this method we will add a simple button to our user interface like this:

    CopyXAML
    <Button Name="ModifyDataButton" DockPanel.Dock="Bottom" Click="ModifyDataButton_Click">Modify data</Button>

This concludes this walkthrough. The XAML source of our window should look like this:

CopyXAML
<Window x:Class="AmChartsWPFTutorials.SimpleDataBoundPieChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:am="http://schemas.amcharts.com/charts/wpf/2009/xaml"
    Title="SimpleDataBoundPieChart" Height="400" Width="600" Initialized="Window_Initialized">
    <DockPanel>
        <Button Name="ModifyDataButton" DockPanel.Dock="Bottom" Click="ModifyDataButton_Click">Modify data</Button>
        <am:PieChart Name="pieChart1" />
    </DockPanel>
</Window>

And the window itself after several clicks on the Modify data button should look similar to this:

See Also