RadControls for ASP.NET AJAX 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 RadChartDataSourceID property and finally binds to the datasource.
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.
 Note |
|---|
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. |
CopyC#
using System;
using System.Configuration;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using Telerik.Charting;
namespace DatabindingExample
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
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";
RadChart1.Series[0].DataYColumn = "TotalSales";
RadChart1.PlotArea.XAxis.DataLabelsColumn = "CategoryName";
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);
RadChart1.DataBind();
}
}
}CopyVB.NET
Imports System
Imports System.Configuration
Imports System.Web.UI.WebControls
Imports Telerik.Web.UI
Imports Telerik.Charting
Namespace DatabindingExample
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim sqlDataSource As 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"
Me.Page.Controls.Add(sqlDataSource)
RadChart1.Series(0).DataYColumn = "TotalSales"
RadChart1.PlotArea.XAxis.DataLabelsColumn = "CategoryName"
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)
RadChart1.DataSourceID = "myDataSource"
RadChart1.DataBind()
End Sub
End Class
End Namespace
See Also