Skip to main content

How to: Bind a Web Chart to Data (Runtime Sample)

  • 3 minutes to read

This example uses series templates to bind a web chart to data. Refer to the following topic for details on how to use the ASP.NET Chart Control: Concepts.

To accomplish this task, create a new ASP.NET Web Application, add a WebChartControl, and add a data source to it. These steps are similar to steps 1-8 in the following tutorial: Lesson 4 - Use the Series Template for Auto-Created Series.

Next, add a button to your application, and handle its Click event as follows.


For the WebChartControl to be properly bound to its data source, and to create series points, call the ASPxWebControl.DataBind method after customizing the chart’s properties. When resolving the data source, the data source identified by the ASPxDataWebControlBase.DataSourceID property takes precedence. If the ASPxDataWebControlBase.DataSourceID is not set, the object identified by the ASPxDataWebControlBase.DataSource property is used.

View Example

using System;
using DevExpress.XtraCharts;
// ...

namespace WebChartDataBinding {
    public partial class _Default : System.Web.UI.Page {

        protected void Button1_Click(object sender, EventArgs e) {
            WebChartControl1.DataSourceID = "AccessDataSource1";
            WebChartControl1.SeriesDataMember = "Year";
            WebChartControl1.SeriesTemplate.ArgumentDataMember = "Region";
            WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] {"GSP"});
            WebChartControl1.SeriesTemplate.View = new SideBySideBarSeriesView();

See Also