How to: Bind an Individual Series to a Data Source (Runtime Sample)
- 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 (Visual studio 2012, 2013, 2015 or 2017), 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.
Add the required assemblies and register them in the Web.config file. For more details, refer to the Adding a Web Chart document.
You can also add a WebChartControl at design time by dropping a WebChartControl onto the form from the toolbox. In this case, the required assemblies are automatically added. To learn how to do this, refer to the How to: Add a Chart to a Web Application document.
- Then, create a new series and add it to the chart.
- To assign a data source to the series, specify the Series.DataSource property.
- Define the SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers properties to determine columns that provide data point arguments and values.
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;
}
}
}