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.
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();
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
See Also