[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
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [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]Fundamentals
    [Expand]Providing Data
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Chart Elements
    [Expand]Examples
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 4 - Use a Series Template for Auto-Created Series

This lesson demonstrates how to add a series template to a chart diagram, and bind this template to a datasource. To learn how to manually generate series from a datasource, refer to the Lesson 3 - Bind Chart Series to Data tutorial.

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

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

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

Expanded Step 2. Create Data Objects

In the step below, you will bind the ChartControl to the GSP database. The chart will represent this table as bars. To perform design-time data binding, the Items Source Configuration Wizard is used. The Wizard automatically generates the data binding code in XAML. 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.

    The Data Source Configuration Wizard appears.

  • Leave the Database item as is and click Next.

  • In the next wizard page, leave the database model as a Dataset and 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 gsp.mdb database as your data connection. By default, it is stored in the following path.

    C:\Users\Public\Documents\DevExpress Demos 18.1\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 GSP item. (Make sure that only this item is selected.)

  • Click Finish to close the Data Source Configuration Wizard.

Expanded Step 3. Bind the Chart to a Datasource

To bind the ChartControl to a data source, do the following.

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

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

  • Select the GSP table and click Finish.

  • You will need to remove the BarSideBySideSeries2D series from the diagram (this series was created automatically in step 1), because the series template will instead be bound to a datasource in this lesson.

    To do this, locate the ellipsis button for the Diagram.Series property, and click it. In the invoked Series Collection Editor: Series dialog, remove the BarSideBySideSeries2D object and click OK.

  • Locate the Diagram.SeriesTemplate property and set it to BarSideBySideSeries2D.

  • To specify a data field for as many series to be auto-created as there are records in this field, locate the XYDiagram2D object's Diagram.SeriesDataMember property and set its value to Year.

  • Next, set the name of the data field that contains the arguments of series template points. For this, set the Series.ArgumentDataMember property to Region.

  • To specify the name of the data field that contains the values of series template points, set the Series.ValueDataMember property to GSP.

Expanded Result

The final XAML is shown below.

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

Show Me

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

Expanded See Also

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