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


This help article describes which properties to use to bind a RadHtmlChart 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
Not finding the help you need? Improve this article