New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

DataSet

This help article describes which properties to use to bind the ASP.NET AJAX Chart to a DataSet and presents a code example. You can bind a RadHtmlChart to a DataSet using the following properties:

  • DataSourceID in the main tag sets the declarative data source for the entire chart. You can use the DataSource property for a programmatic data source if you create the connection in the code-behind.

  • DataFieldY property (and ColorField, ExplodeField, NameField for Pie; DataFieldX for Bubble, Scatter and ScatterLine; etc.)for the series to point it to the desired data source field.

  • DataLabelsField for the x-axis labels to populate the items for the axis.

Example 1 demonstrates the setup of a RadHtmlChart, bound to a DataSet in Example 2.

Example 1: The markup of the RadHtmlChart that is bound to a DataSet in Example 2.

ASP.NET
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
	<PlotArea>
		<Series>
			<telerik:ColumnSeries Name="Products" DataFieldY="Price">
				<TooltipsAppearance DataFormatString="${0}" />
				<LabelsAppearance Visible="false" />
			</telerik:ColumnSeries>
		</Series>
		<XAxis DataLabelsField="Name">
		</XAxis>
		<YAxis>
			<LabelsAppearance DataFormatString="${0}" />
		</YAxis>
	</PlotArea>
	<Legend>
		<Appearance Visible="false" />
	</Legend>
	<ChartTitle Text="Bookstore Products">
	</ChartTitle>
</telerik:RadHtmlChart>

Example 2: The DataSet for the RadHtmlChart created in Example 1.

C#
protected void Page_Load(object sender, System.EventArgs e)
{
	RadHtmlChart1.DataSource = GetData();
	RadHtmlChart1.DataBind();
}

private DataSet GetData()
{
	DataSet ds = new DataSet("Bookstore");
	DataTable dt = new DataTable("Products");
	dt.Columns.Add("Id", Type.GetType("System.Int32"));
	dt.Columns.Add("Name", Type.GetType("System.String"));
	dt.Columns.Add("Price", Type.GetType("System.Double"));
	dt.Rows.Add(1, "Pen", 5.45);
	dt.Rows.Add(2, "Audio book", 9.95);
	dt.Rows.Add(3, "Pencil", 1.99);
	dt.Rows.Add(4, "Book", 15.95);
	dt.Rows.Add(5, "Newspaper", 0.95);
	dt.Rows.Add(6, "Magazine", 3.95);
	ds.Tables.Add(dt);
	return ds;
}

See Also

In this article
See Also
Not finding the help you need?
Contact Support