How to: Bind an Individual Series to a Data Source (Runtime Sample)

• Dec 23, 2020
• 3 minutes to read

This example shows how to add a web chart control to a web page, create a series and bind it to a data source.

1. Create an ASP.NET Web Application or open an existing one.

2. Open the form’s .aspx.cs file. In the Page.Load event handler, create a new WebChartControl class instance and add it to the form’s Controls collection.

   Add the required assemblies and register them in the Web.config file. For more details, refer to the following help topic: Adding a Web Chart.

   You can also drop a WebChartControl from the toolbox onto the form to add the control at design time. In this case, the required assemblies are automatically added. Refer to the following help topic for details: How to: Add a Chart to a Web Application.

3. Then, create a new series and add it to the chart.
4. Specify the Series.DataSource property to assign a data source to the series.
5. Define the SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers properties to specify data source columns that contain point arguments and values.

C#

using System;
using System.Data;
using DevExpress.XtraCharts;
using DevExpress.XtraCharts.Web;
// ...
namespace WebChartRuntime {
    public partial class _Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            // Create a chart.
            WebChartControl WebChartControl = new WebChartControl();
            // Add the chart to the form.
            // Note that a chart isn't initialized until it's added to the form's collection of controls.
            this.form1.Controls.Add(WebChartControl);
            // Create a new bar series.
            Series series = new Series("2017", ViewType.Bar);
            // Add the series to the chart.
            WebChartControl.Series.Add(series);
            // Specify the series data source.
            DataTable seriesData = GetData();
            series.DataSource = seriesData;
            // Specify an argument data member.
            series.ArgumentDataMember = "Region";
            // Specify a value data member.
            series.ValueDataMembers.AddRange(new string[] { "Sales" });
            // Rotate the diagram (if necessary).
            ((XYDiagram)WebChartControl.Diagram).Rotated = true;
        }
        public DataTable GetData() {
            DataTable table = new DataTable();
            table.Columns.AddRange(new DataColumn[] {
            new DataColumn("Region", typeof(string)),
            new DataColumn("Sales", typeof(decimal))
        });
            table.Rows.Add("Asia", 5.289M);
            table.Rows.Add("North America", 4.182M);
            table.Rows.Add("Europe", 3.725M);
            table.Rows.Add("Australia", 2.272M);
            table.Rows.Add("South America", 2.117M);

            return table;
        }
    }
}

VB.NET

Imports System
Imports System.Data
Imports DevExpress.XtraCharts
Imports DevExpress.XtraCharts.Web

Namespace WebChartRuntime

    Public Partial Class _Default
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create a chart.
            Dim WebChartControl As WebChartControl = New WebChartControl()
            ' Add the chart to the form.
            ' Note that a chart isn't initialized until it's added to the form's collection of controls.
            Me.form1.Controls.Add(WebChartControl)
            ' Create a new bar series.
            Dim series As Series = New Series("2017", ViewType.Bar)
            ' Add the series to the chart.
            WebChartControl.Series.Add(series)
            ' Specify the series data source.
            Dim seriesData As DataTable = GetData()
            series.DataSource = seriesData
            ' Specify an argument data member.
            series.ArgumentDataMember = "Region"
            ' Specify a value data member.
            series.ValueDataMembers.AddRange(New String() {"Sales"})
            ' Rotate the diagram (if necessary).
            (CType(WebChartControl.Diagram, XYDiagram)).Rotated = True
        End Sub

        Public Function GetData() As DataTable
            Dim table As DataTable = New DataTable()
            table.Columns.AddRange(New DataColumn() {New DataColumn("Region", GetType(String)), New DataColumn("Sales", GetType(Decimal))})
            table.Rows.Add("Asia", 5.289D)
            table.Rows.Add("North America", 4.182D)
            table.Rows.Add("Europe", 3.725D)
            table.Rows.Add("Australia", 2.272D)
            table.Rows.Add("South America", 2.117D)
            Return table
        End Function
    End Class
End Namespace