In this walkthrough we will add a simple data-bound line 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 LineChart 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 SalesData
{
    public string Month { get; set; }
    public double SalesTotal { get; set; }
}

    Our data item class has 2 properties to hold month name (x-axis value) and sales total for this month (y-axis value).

    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<SalesData> Sales2008 = new List<SalesData>()
{
    new SalesData() { Month="January", SalesTotal = 12348 },
    new SalesData() { Month="February", SalesTotal = 22348 },
    new SalesData() { Month="March", SalesTotal = 14530.67 },
    new SalesData() { Month="April", SalesTotal = 41256.10 },
    new SalesData() { Month="May", SalesTotal = 33587 },
    new SalesData() { Month="June", SalesTotal = 27895 },
    new SalesData() { Month="July", SalesTotal = 26877.87 },
    new SalesData() { Month="August", SalesTotal = 24258 },
    new SalesData() { Month="September", SalesTotal = 33587.87 },
    new SalesData() { Month="October", SalesTotal = 35874 },
    new SalesData() { Month="November", SalesTotal = 41847 },
    new SalesData() { Month="December", SalesTotal = 40258.5 }
};

Data Binding

Binding data to the LineChart

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

    CopyC#
    private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // bind series
    lineChart1.SeriesSource = Sales2008;
    lineChart1.IDMemberPath = "Month";

    // bind graph
    lineChartGraph1.DataItemsSource = Sales2008;
    lineChartGraph1.SeriesIDMemberPath = "Month";
    lineChartGraph1.ValueMemberPath = "SalesTotal";
}

    Here we attach our data collection to Series collection of our chart and set path to the member in our collection identifying series ID - "Month".

    Then we assign the same collection as data items source for our graph and set SeriesIDMemberPath to the same "Month" property path and ValueMemberPath to "SalesTotal" property.

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

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

By implementing these 2 procedures and running the application you should get a line 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.SimpleDataBoundLineChart"
    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="SimpleDataBoundLineChart" Height="400" Width="640" Loaded="Window_Loaded">
    <Grid>
        <am:LineChart Name="lineChart1">
            <am:LineChart.Graphs>
                <am:LineChartGraph Name="lineChartGraph1" Title="2008 Year Sales" />
            </am:LineChart.Graphs>
            <am:LineChart.CategoryAxis>
                <am:CategoryAxis ValuesRotationAngle="-45" />
            </am:LineChart.CategoryAxis>
        </am:LineChart>
    </Grid>
</Window>

See Also