[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [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]Fundamentals
   [Expand]Concepts
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [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]Localization
 [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]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[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 4 - Use a Series Template for Auto-Created Series

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' points' arguments and values) are stored in the same data table. Also, 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.

Create a Web chart via the steps below.

Expanded Create a 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.

  • Drop the WebChartControl from the DX.18.2: Data & Analytics toolbox tab onto the form.

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

  • This will invoke the 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.

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

      Note

      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 test the database connection by clicking Test Query.

  • Click Finish to create the datasource.

The DataSource object is now assigned to the chart.

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

  1. Set the WebChartControl.SeriesDataMember property to Year to specify the data field that should provide data for the series names.

  2. Next, adjust the series template via the WebChartControl.SeriesTemplate property. Set the SeriesBase.ArgumentDataMember property to Region.

  3. Then, set the value for the SeriesBase.ValueDataMembers collection's only member to GSP.

Expanded Populate the Chart with Data at Design Time

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

Expanded Customize the Chart

  1. Adjust the Series Name Template

    By default, the name for each series automatically generated by the chart using its WebChartControl.SeriesDataMember property value is obtained directly from an appropriate data field in the bound data source. It may also be necessary to add some prefixes or postfixes to these names, in which case you can customize the SeriesNameTemplate object returned by the WebChartControl.SeriesNameTemplate property to add text to the beginning or end of each series name. In this instance, set the SeriesNameTemplate.BeginText property to "GSP in ".

  2. Adjust the Crosshair Cursor Options

    By default, the crosshair cursor argument line and crosshair common label are displayed on a chart. You can disable (or enable) a crosshair cursor both at the level of a chart via the WebChartControl.CrosshairEnabled property and at the level of a chart series using the SeriesBase.CrosshairEnabled property.
    To show the crosshair cursor value line and crosshair cursor axis labels, set the CrosshairOptions.ShowValueLine, CrosshairOptions.ShowArgumentLabels and CrosshairOptions.ShowValueLabels properties to true.

If required, it is possible to customize many other properties for the chart, which are not described here.

Expanded Get the Result

The resulting Web chart is shown in the following image.

Expanded See Also

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