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