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.

Create an ASP.NET Web Application or open an existing one.
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.
Then, create a new series and add it to the chart.
Specify the Series.DataSource property to assign a data source to the series.
Define the SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers properties to specify data source columns that contain point arguments and values.

C#
VB.NET

csharp

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;
        }
    }
}

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