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

Dec 23, 2020
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.

Note

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

Default.aspx.cs
Default.aspx (C#)
Default.aspx (VB.NET)
Default.aspx.vb

csharp

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();
            WebChartControl1.DataBind();
        }
    }

}

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebChartDataBinding._Default" %>

<%@ Register Assembly="DevExpress.XtraCharts.v8.3.Web, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Populate the Chart" />

        

        <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="700px" Height="400px" >

<FillStyle><OptionsSerializable>
<cc1:SolidFillOptions></cc1:SolidFillOptions>
</OptionsSerializable>
</FillStyle>

            <legend alignmenthorizontal="Left"></legend>

<SeriesTemplate><ViewSerializable>
<cc1:SideBySideBarSeriesView></cc1:SideBySideBarSeriesView>
</ViewSerializable>
<LabelSerializable>
<cc1:SideBySideBarSeriesLabel LineVisible="True" Visible="False">
<FillStyle><OptionsSerializable>
<cc1:SolidFillOptions></cc1:SolidFillOptions>
</OptionsSerializable>
</FillStyle>
</cc1:SideBySideBarSeriesLabel>
</LabelSerializable>
<PointOptionsSerializable>
<cc1:PointOptions></cc1:PointOptions>
</PointOptionsSerializable>
<LegendPointOptionsSerializable>
<cc1:PointOptions></cc1:PointOptions>
</LegendPointOptionsSerializable>
</SeriesTemplate>

        </dxchartsui:WebChartControl>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/gsp.mdb"
            SelectCommand="SELECT * FROM [GSP]"></asp:AccessDataSource>

    </div>
    </form>
</body>
</html>

aspx

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="WebChartDataBinding._Default" %>

<%@ Register Assembly="DevExpress.XtraCharts.v8.3.Web, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v8.3, Version=8.3.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Populate the Chart" />

        

        <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="700px" Height="400px" >

<FillStyle><OptionsSerializable>
<cc1:SolidFillOptions></cc1:SolidFillOptions>
</OptionsSerializable>
</FillStyle>

            <legend alignmenthorizontal="Left"></legend>

<SeriesTemplate><ViewSerializable>
<cc1:SideBySideBarSeriesView></cc1:SideBySideBarSeriesView>
</ViewSerializable>
<LabelSerializable>
<cc1:SideBySideBarSeriesLabel LineVisible="True" Visible="False">
<FillStyle><OptionsSerializable>
<cc1:SolidFillOptions></cc1:SolidFillOptions>
</OptionsSerializable>
</FillStyle>
</cc1:SideBySideBarSeriesLabel>
</LabelSerializable>
<PointOptionsSerializable>
<cc1:PointOptions></cc1:PointOptions>
</PointOptionsSerializable>
<LegendPointOptionsSerializable>
<cc1:PointOptions></cc1:PointOptions>
</LegendPointOptionsSerializable>
</SeriesTemplate>

        </dxchartsui:WebChartControl>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/gsp.mdb"
            SelectCommand="SELECT * FROM [GSP]"></asp:AccessDataSource>

    </div>
    </form>
</body>
</html>

Imports System
Imports DevExpress.XtraCharts
' ...

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

        Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
            WebChartControl1.DataSourceID = "AccessDataSource1"
            WebChartControl1.SeriesDataMember = "Year"
            WebChartControl1.SeriesTemplate.ArgumentDataMember = "Region"
            WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(New String() {"GSP"})
            WebChartControl1.SeriesTemplate.View = New SideBySideBarSeriesView()
            WebChartControl1.DataBind()
        End Sub
    End Class

End Namespace