In this walkthrough we will add a simple data-bound bubble 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 XyChart 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 XyData
{
    public int x { get; set; }
    public int y { get; set; }
    public double val { get; set; }
}

    Our data item class has 3 properties to hold X and Y coordinates of the point and value at that point.

    Note:
    To keep things simple we won't use data objects able to notify other objects of their changes. To see a sample of classes implementing these features see Walkthrough: Adding a simple data-bound pie chart.

  2. Now we will add a collection holding a list of our data-objects. This will be our data source.

    CopyC#
    public List<XyData> TestData = new List<XyData>()
{
    new XyData() { x=10, y=20, val=120 },
    new XyData() { x=13, y=10, val=20 },
    new XyData() { x=18, y=24, val=4 },
    new XyData() { x=30, y=42, val=12 },
    new XyData() { x=31, y=2, val=90 },
    new XyData() { x=33, y=18, val=1 },
    new XyData() { x=42, y=57, val=2 },
    new XyData() { x=50, y=6, val=22 },
    new XyData() { x=52, y=19, val=20 },
    new XyData() { x=80, y=42, val=89 }
};

Data Binding

Binding data to the XyChart

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

    CopyC#
    private void Window_Loaded(object sender, RoutedEventArgs e)
{
    graph1.DataItemsSource = TestData;
    graph1.XMemberPath = "x";
    graph1.YMemberPath = "y";
    graph1.ValueMemberPath = "val";

    xyChart1.Refresh();
}

    Here we attach our data collection to DataItems collection of our graph and set path to the members in our data objects identifying X, Y and Value.

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

    CopyXAML
    <Window x:Class="AmChartsWPFTutorials.SimpleDataBoundXyChart"
    ...
    Loaded="Window_Loaded">
    ...
</Window>

By implementing these 2 procedures and running the application you should get a XY chart looking like this:

This concludes this walkthrough. The XAML source of our window with some cosmetic tweaks should look like this:

CopyXAML
<Window x:Class="AmChartsWPFTutorials.SimpleDataBoundXyChart"
    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="SimpleDataBoundXyChart" Height="400" Width="640" Loaded="Window_Loaded">
    <Grid>
        <am:XyChart Name="xyChart1">
            <am:XyChartGraph Name="graph1" Title="Graph #1" LineThickness="0" BulletType="Round" />
        </am:XyChart>
    </Grid>
</Window>

See Also