Lesson 3 - Bind Chart Series to Data

  • 4 min to read

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.

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

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

    ASP_NET.Lesson1-4_1.Add a WebChartControl

  • 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...>.

    ASP_NewDataSource

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

    HowTo - AddChart_5

  • 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.

      BrowseAccessDataFile

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

      NOTE

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

      Lesson3_SelectDialog

    • Click OK to close the dialog.

      AddConnection

  • To proceed, click Next>.

    Lesson3_ChooseDataConnection

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

    Lesson3_SaveConnectionString

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

    ASP_Lesson3_3

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

    Click Finish to complete data source creation.

    TestQuery

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.

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....

    ASP_Lesson3_4

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

    Lesson3_ChooseSeriesView

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

    ASP_Lesson3_5

  • 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).

    ASP_Lesson3_6

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.

ASP_Lesson3_7

Step 4. Customize the Chart

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

Result

The result is shown in the following image.

Lesson3_Result

See Also