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 an EntityDataSource and presents a code example. You can bind a RadHtmlChart to an EntityDataSource 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 and Donut; 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.

The data context, used in the following example, is created from the Northwind database.

Example 1: Bind an EntityDataSource to a RadHtmlChart.

<asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=NorthwindEntities"
    DefaultContainerName="NorthwindEntities" CommandText="select p.ProductName, p.UnitsInStock from NorthwindEntities.Products as p where p.CategoryID = 1">
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="EntityDataSource1">
            <telerik:BarSeries DataFieldY="UnitsInStock" Name="Drinks">
                <TooltipsAppearance Visible="false" />
        <XAxis DataLabelsField="ProductName">
            <MinorGridLines Visible="false" />
            <MajorGridLines Visible="false" />
            <TitleAppearance Text="Units" />
            <MinorGridLines Visible="false" />
        <Appearance Visible="false" />
    <ChartTitle Text="Units In Stock">

See Also

In this article