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

Aug 01, 2019
3 minutes to read

This example demonstrates how to bind a web chart to data using series templates. For specific information on working with the ASP.NET Chart Control, refer to 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 of the Lesson 4 - Use the Series Template for Auto-Created Series tutorial).

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.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-the-webchartcontrol-to-a-data-source-e1015

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

}

<%@ 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" /><br />
        <br />
        <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>

<%@ 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" /><br />
        <br />
        <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

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode