[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Collapse]Chart Control
   [Expand]Product Information
   [Collapse]Getting Started
     Lesson 1 - Create a Chart using the Chart Designer
     Lesson 2 - Create a Simple Unbound Chart
     Lesson 3 - Bind Chart Series to Data
     Lesson 4 - Use a Series Template for Auto-Created Series
   [Expand]Design-Time Features
   [Expand]Visual Elements
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[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 tutorial demonstrates how to bind a Web chart to an external data source, manually add a series to the chart, and adjust its data bindings - which allows you to provide an individual data source for each series.

Bind a chart's series to data manually via the steps below.

Expanded Step 1. Create a Web Chart and Bind it to Data

  • Create a new ASP.NET Web Application (Visual Studio 2012, 2013, 2015 or 2017) or open an existing one.
  • From the DX.18.2: Data & Analytics toolbox tab, drop the WebChartControl onto the form.

  • Click the chart's smart tag to invoke its Tasks list. Then, open the drop-down list for the Choose Data Source item and click <New data source...>.

  • This will invoke the Data Source Configuration Wizard. Choose SQL Database and click OK.

  • On the next page, click New Connection.... In the invoked Add Connection dialog, do the following.

    • Check to make sure that the data source type is set to Microsoft SQL Server Database File (SqlClient).
    • Click the Browse button opposite the Database file name text box.

    • In the invoked Select SQL Server Database File dialog, select the NWind.mdf file that ships with the DevExpress Demos.


      By default, this file is stored in the C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Data\NWind.mdf path.

    • Click OK to close the dialog.

  • To proceed, click Next>.

  • On the Save the Connection String to the Application Configuration File window, click Next>.

  • On the next page, choose the Products table from the database and click Next>.

  • On the last page, you can test the database connection by clicking Test Query.

    Click Finish to complete data source creation.

The DataSource object is now assigned to the chart. The next steps specify which data fields should be used to provide data for the chart's series.

Expanded Step 2. Specify a Series Data Source

  • Next, add a series to the chart. To do this, click the chart's smart tag, and in the invoked Tasks list, choose Series....

  • In the invoked Series Collection Editor, click Add... and select the Bar view.

  • Now, switch to the Properties tab on the right of the editor's window and make the following assignments for the Series1 properties.

  • To filter displayed data points in the series, click the ellipsis button opposite the SeriesBase.DataFilters property. In the invoked Data Filter Collection Editor, click Add, and for the created filtering criterion, set its DataFilter.ColumnName to CategoryID and DataFilter.Value to 4. Leave the DataFilter.Condition property set to its default value (Equal).

Expanded Step 3. Populate the Chart with Data at Design Time

To see how the chart will look at design time, click its smart tag, and in the invoked Tasks list, click Populate. This will redraw the chart using the provided data.

Expanded Step 4. Customize the Chart

Now that data has been provided to the chart, follow the steps below to improve its appearance.

Expanded Result

The result is shown in the following image.

Expanded See Also

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