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

Nov 23, 2022
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.

Step 1. Create a Chart and Bind It to Data
Step 2. Specify a Series Data Member and Adjust a Series Template
Step 3. Populate the Chart with Data at Design Time
Step 4. Customize the Chart
Get the Result

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.25.2: Data & Analytics toolbox tab onto the form.
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.
On the next page, click New Connection… , and in the invoked Add Connection dialog, perform the following actions.
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.

Set the WebChartControl.SeriesDataMember property to Year to specify the data field that should provide data for the series names.
Next, use the WebChartControl.SeriesTemplate property to adjust the series template. Set the SeriesBase.ArgumentDataMember property to Region.
Then, set the value for the SeriesBase.ValueDataMembers collection’s only member to GSP.

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

Adjust the Series Name Template
Adjust the Crosshair Cursor Options

Get the Result

The following image displays the result.