Data Binding RadChart to a Database Object
RadChart has been replaced by RadHtmlChart, Telerik's client-side charting component. If you are considering RadChart for new development, examine the RadHtmlChart documentation and online demos first to see if it will fit your development needs. If you are already using RadChart in your projects, you can migrate to RadHtmlChart by following these articles: Migrating Series, Migrating Axes, Migrating Date Axes, Migrating Databinding, Features parity. Support for RadChart is discontinued as of Q3 2014, but the control will remain in the assembly so it can still be used. We encourage you to use RadHtmlChart for new development.
To bind to a database, create a data source object, assign the data source to the RadChart and call the RadChart DataBind() method.
The figure above shows a running example that starts with a default RadChart with a single Series. The example code:
-
Creates a SqlDataSource, adds it to the page, assigns the RadChart DataSourceID property and finally binds to the data source.
-
Displays data for a database column by assigning the series DataYColumn or DataXColumn properties. In the example the "TotalSales" column is assigned to the DataYColumn property.
-
Displays database column data in the X axis labels by assigning the column name to the DataLabelsColumn. The example assigns "CategoryName" to the DataLabelsColumn property.
Also note how the example sets the PlotArea.Appearance.Dimensions.Margins.Bottom to 30% and the PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle to 300 in order to provide room for the axis labels.
using System;
using System.Configuration;
using System.Web.UI.WebControls;
// Supports RadChart declaration
using Telerik.Web.UI;
// Supports RadChart objects, i.e. series, items
using Telerik.Charting;
namespace DatabindingExample
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// create a datasource, add it to the page,
// and assign the datasource to RadChart
SqlDataSource sqlDataSource = new SqlDataSource();
sqlDataSource.ID = "myDataSource";
sqlDataSource.ConnectionString =
ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
sqlDataSource.SelectCommand =
"SELECT CategoryName, SUM(ProductSales) AS TotalSales FROM [Product Sales for 1997] GROUP BY CategoryName";
this.Page.Controls.Add(sqlDataSource);
RadChart1.DataSourceID = "myDataSource";
// Set the column for data and data labels:
// Each bar will show "TotalSales", each label along
// X-axis will show "CategoryName.
RadChart1.Series[0].DataYColumn = "TotalSales";
RadChart1.PlotArea.XAxis.DataLabelsColumn = "CategoryName";
// assign appearance related properties
RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 300;
RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color =
System.Drawing.Color.BlueViolet;
RadChart1.PlotArea.Appearance.Dimensions.Margins.Bottom =
Telerik.Charting.Styles.Unit.Percentage(30);
// bind to the datasource
RadChart1.DataBind();
}
}
}