Skip to main content

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

  • 4 minutes to read

This document provides step-by-step instructions on how to create a Web application with a WebChartControl control bound to data. In this example, all series will be auto-created by a chart using a series template, which specifies common data binding properties for all series.

This is possible because the data for all series (the series names along with series point arguments and values) are stored in the same data table. Note that, in this example, the series view type and other settings should be the same for all series to be created.

In this example, you will use the “GSP” table in the GSP database (the gsp.mdb file shipped with the ASP.NET Chart Control installation). This table contains the Gross State Product (GSP) statistics for various US regions.

To create a Web chart, follow the steps below.

Create a Chart and Bind It to Data

  • Create a new ASP.NET Web Application or open an existing application.
  • Drop the WebChartControl from the DX.22.2: Data & Analytics toolbox tab 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 menu for the Choose Data Source item and click <New data source…>.


  • In the invoked Data Source Configuration Wizard, choose the SQL Database type and click OK.

    HowTo - AddChart_5

  • On the next page, click New Connection…, and in the invoked Add Connection dialog, perform the following actions.

    • Specify Microsoft Access Database File (OLE DB) as the Data source type. If necessary, use the Change… button to select between different types.
    • Click Browse… to set the gsp.mdb file as the data source file.


    • In the invoked dialog, select the database file and click Open.


      By default, gsp.mdb is stored in the following path.

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


    • Click OK to close the dialog.


      Click Next> to proceed.


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


  • Leave the next page as is, and click Next>.


  • On the last page, you can click Test Query to test the database connection.


  • Click Finish to create the datasource.

The DataSource object is now assigned to the chart.


Specify a Series Data Member and Adjust a Series Template

Since in this example, the chart will represent the data as different series, series points and their values, all series will be created using a series template that is common to all of them. The following steps demonstrate how this can be done.

Populate the Chart with Data at Design Time

  • To see how the chart will look at design time, click its smart tag. In the invoked actions list, click Populate. This will redraw the chart based on the updated data.


Customize the Chart

Get the Result

The following image displays the result.


See Also