How to: Bind Individual Chart Series to Data

• Jan 16, 2025
• 7 minutes to read

This tutorial demonstrates how to bind a chart to an external data source, manually add a series to the chart, and adjust its data bindings. This means that it is possible to provide an individual data source for each series.

To learn how to manually bind a chart’s series to data, do the following:

• Create a Chart and Bind it to Data
• Specify a Series Data Source
• Populate with Data at Design and Runtime
• Customize the Chart
• Get the Result

Create a Chart and Bind it to Data

1. Start MS Visual Studio and create a new Windows Forms Application or open an existing one.

2. From the DX.25.2: Data & Analytics toolbox tab, drop the ChartControl onto the form.

3. To define a data source for the chart, click its smart tag, and in its actions list, expand the Choose Data Source drop-down list and click on Add Project Data Source… link.

4. In the Wizard’s first page, leave the data source type as Database and click Next.

5. In the Choose a Database Model page, click Next.

6. On the following page, click New Connection….

7. The following message will appear.

8. Click Next on the following page to save the created connection string to the configuration file.

9. Select the “Products” table as shown below and click Finish.

As a result, Visual Studio will generate a set of classes for data manipulation within the project. The main ones are:

• nwindDataSet - represents a DataSet object (a collection of tables, relationships, and constraints), which contains the Products table from the Northwind database.
• productsTableAdapter - represents a TableAdapter object that provides communication between the application and a database. Its methods are used for executing queries and stored procedures, fetching data and filling DataTables in DataSets, and sending data back to the database.
• productsBindingSource - represents a BindingSource component, used to simplify the data binding of the nwindDataSet to the ChartControl. It is assigned to the ChartControl.DataSource property.

Now, the chart has been bound to data. The next steps specify which data fields should be used to provide data for the chart’s series.

Specify a Series Data Source

1. Now, let’s add series to the chart. To do this, click the chart’s smart tag and in its actions list, choose the Series… link.

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

3. Now switch to the Properties tab on the right of the editor’s window and make the following assignments for the Series1 properties:

4. Limit the number of data points in the series. To do this, click the SeriesBase.FilterCriteria property’s ellipsis button.

Populate with Data at Design and Runtime

1. If you wish to see how the resulting chart will finally look at design time, click its smart tag, and in its actions list, click Populate. This will redraw the chart using genuine, obtained data.

Customize the Chart

1. Now you can adjust the following options.

Get the Result

The result is illustrated in the following image.

More Examples

How to: Bind Individual Chart Series to Data at Run TimeThis tutorial explains how to bind each chart series to an individual data source in code.How to: Bind Chart Series to Data in the Data Source Wizard This tutorial describes how to bind a chart to an external data source in the Data Source Configuration Wizard.How to: Specify Series Data MembersThis tutorial describes how to specify a data source for a created series, and automatically populate series points based on the data source table. See Also

How to: Bind a Chart to Data Using Series Templates