[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Collapse]Getting Started
      Lesson 1 - Create a Simple Chart
      Lesson 2 - Create a Chart Using the Designer
      Lesson 3 - Bind Chart Series to Data
      Lesson 4 - Use a Series Template for Auto-Created Series
    [Expand]Providing Data
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 3 - Bind Chart Series to Data

This lesson explains how to manually add a series to a chart's diagram, and then bind this series to a datasource. If you wish to learn how to automatically generate a series from a datasource, proceed to Lesson 4 - Use a Series Template for Auto-Created Series.

Note that although the Microsoft Access database (.mdb) is used in this tutorial, the ChartControl can be bound to a variety of other data providers. For more information on data binding, refer to the Providing Data section.

To create a data-bound charting application, do the following.

Expanded Step 1. Create a New Project and Add a Chart Control

  • Run MS Visual Studio 2012, 2013, 2015 or 2017.
  • Create a new WPF Application project.
  • Add the ChartControl component to your project, as you did in Lesson 1 (see step 1).

Expanded Step 2. Connect to a Datasource

In this step, you will bind the ChartControl to the CarsDB database. The chart will represent this table as bars.

To perform design-time data binding, the Items Source Configuration Wizard is used. To add a datasource to a WPF application, proceed with the following steps.

  • Locate the ChartControl in the form designer and click its smart-tag. Then, in the ChartControl actions list, click the Data Source Wizard to invoke the wizard.

  • Select the ADO.NET Typed DataSet data technology and click the New Data Source... button.

    A message box that notifies you of the necessity to rebuild the solution and reopen the Items Source Configuration Wizard appears.

  • Click Ok to run the Data Source Configuration Wizard.

  • In the Data Source Configuration Wizard, leave the Database item as is and click Next.

  • In the next page, click Next.

  • On the Choose Your Data Connection page, click New Connection... to create a connection to a database.

    This invokes the Add Connection dialog.

  • Leave the Microsoft Access Database File as your data source. Then, click the Browse... button and specify the CarsDB.mdb database as your data connection. By default, it is stored in the following path.

    C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Data

  • Click OK to close the dialog and then click Next in the wizard.
  • This invokes a message box that asks whether or not to copy the database file to the project and modify the connection. Click Yes, as shown below.

  • In the next wizard page, you can choose whether to save the connection settings to the application configuration file or not.

    Make sure that the Yes, save the connection as: check box is checked and click Next.

  • Expand the Tables list and select the Cars item. Then click Finish to close the Data Source Configuration Wizard.

Expanded Step 3. Bind the Chart to a Datasource

  • Rebuild the solution and open the Items Source Configuration Wizard, as you did in the previous step. The newly created data source will be displayed within the Data Sources section. Click Next.

  • Leave Simple Binding to bind the control to a plain collection of data objects and click Next.

  • Leave the Cars table and click Finish.

  • Specify the name of the data field that contains the series points' argument. To do this, locate the Series.ArgumentDataMember property of the BarSideBySideSeries2D object in the Properties window and set it to Model.

  • To define the bound datasource's data field from which the series obtains the values of its points, set the BarSideBySideSeries2D's Series.ValueDataMember property to Price.

    After performing this step, your XAML should look like this.

Expanded Step 4. Customize the Chart

Expanded Result

After performing all of the above steps, your XAML should appear as follows.

Run the project. The following image illustrates the resulting chart at runtime.


A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3155.

Expanded See Also

Is this topic helpful?​​​​​​​