New to Telerik UI for ASP.NET AJAX? Download free 30-day trial


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.

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

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

protected void Page_Load(object sender, System.EventArgs e)
    RadHtmlChart1.DataSource = GetData();

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);
    return ds;
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
    RadHtmlChart1.DataSource = GetData()
End Sub

Private Function GetData() As DataSet
    Dim ds As New DataSet("Bookstore")
    Dim dt As 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)
    Return ds
End Function

See Also

In this article