In this walkthrough we are going to demonstrate how to bind a column chart to a DataTable filled with data from SQL Server database. Exactly the same steps apply to line chart with simply replacing the string "Column" with "Line" in class names.

Prerequisites

This walkthrough assumes that you have access to SQL Server database server and have a Northwind database sample database installed.

Creating a Window with Chart

  1. Add a Window to your WPF Application project by selecting Add Window... item from Project menu. Input a name for your Window and press OK. We will use the name Window1 in this walkthrough.

  2. Add ColumnChart object to your window by dragging and dropping the control from toolbox or do it manually via XAML editor. See Walkthrough: Adding a simple column chart for details. We will give a columnChart1 name to the chart.

  3. Add a graph to the chart by adding ColumnChartGraph objet to Graphs collection of the chart. We'll name the graph - graph1.

  4. Attach event handler to window's Loaded. This is where we will perform data-binding.

After completing these steps your XAML should look something like this:

CopyXAML
<Window x:Class="AmChartsSamples.Window1"
    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="Window1" Height="600" Width="800" Loaded="Window_Loaded">
    <Grid>
        <am:ColumnChart Name="columnChart1">
            <am:ColumnChart.Graphs>
                <am:ColumnChartGraph Name="graph1" />
            </am:ColumnChart.Graphs>
        </am:ColumnChart>
    </Grid>
</Window>

Binding to the DataTable

In the code file implement the Window_Loaded event handler like this.

CopyC#
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    SqlConnection conn = new SqlConnection("data source=localhost;initial catalog=northwind;integrated security=SSPI;persist security info=False");
    SqlDataAdapter adapter = new SqlDataAdapter("select * from [Category Sales for 1997]", conn);
    DataSet ds = new DataSet("sales");
    try
    {
        conn.Open();
        adapter.Fill(ds, "Category Sales for 1997");
        graph1.DataItemsSource = ds.Tables["Category Sales for 1997"].DefaultView;
        graph1.SeriesIDMemberPath = "CategoryName";
        graph1.ValueMemberPath = "CategorySales";
    }
    finally
    {
        conn.Close();
    }
}

Here we select all the lines for "Category Sales for 1997" view in the Northwind database, fill a DataTable with this data and set it's DefaultView as DataItemsSource for our graph.

We set graph's SeriesIDMemberPath to the name of the column having the series id in the DataTable and ValueMemberPath to the name of the column holding values.

Binding Series

In simple cases like this one it's enough to bind the graph. But in cases were graphs have gaps in data or when you want to set text of the series items (along the category axis) to the different value from ID, you'll need to bind chart's Series separately.

To bind series in this scenario you'll need to modify the code like this

CopyC#
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    SqlConnection conn = new SqlConnection("data source=localhost;initial catalog=northwind;integrated security=SSPI;persist security info=False");
    SqlDataAdapter adapter = new SqlDataAdapter("select * from [Category Sales for 1997]", conn);
    DataSet ds = new DataSet("sales");
    try
    {
        conn.Open();
        adapter.Fill(ds, "Category Sales for 1997");

        columnChart1.SeriesSource = ds.Tables["Category Sales for 1997"].DefaultView;
        columnChart1.IDMemberPath = "CategoryName";
        columnChart1.TextMemberPath = "CategoryName";

        graph1.DataItemsSource = ds.Tables["Category Sales for 1997"].DefaultView;
        graph1.SeriesIDMemberPath = "CategoryName";
        graph1.ValueMemberPath = "CategorySales";
    }
    finally
    {
        conn.Close();
    }
}

The difference from earlier version is that you bind chart's series separately which would allow you to have a different text along the category (if we had a field in the database for that) axis than the id.

CopyC#
columnChart1.SeriesSource = ds.Tables["Category Sales for 1997"].DefaultView;
columnChart1.IDMemberPath = "CategoryName";
columnChart1.TextMemberPath = "CategoryName";

See Also