Edit this page

Data Binding Overview

This help article describes the required data structure for RadHtmlChart. It explains how to use fields (columns) and rows.

A data bound series in RadHtmlChart expects a field (column) name and will take the data from all records (rows) in the provided data source. Table 1 shows a supported data source structure and Table 2 shows an unsuitable data source structure. You can see a sample implementation of a good data source in Example 1.

Table 1: Expected structure of the RadHtmlChart data source

X_Axis_Labels First_Series_Values Second_Series_Values
Label 1 1 5
Label 2 10 15
Label 3 20 25
tip

If your data source looks like Table 2, review the Group RadHtmlChart Data Source code library article. Alternatively, you can traverse your data source and create series items programmatically.

Table 2: Unsupported data source structure for RadHtmlChart

X_Axis_Labels series_group_name value
Label 1 first 1
Label 2 first 10
Label 3 first 20
Label 1 second 5
Label 2 second 15
Label 3 second 25

Example 1: Sample implementation of the supported data source for RadHtmlChart from Table 1. You can see the result in Figure 1.

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="300px" Height="300px">
    <PlotArea>
        <Series>
            <telerik:LineSeries DataFieldY="First_Series_Values" Name="first series"></telerik:LineSeries>
            <telerik:LineSeries DataFieldY="Second_Series_Values" Name="second series"></telerik:LineSeries>
        </Series>
        <XAxis DataLabelsField="X_Axis_Categories"></XAxis>
    </PlotArea>
</telerik:RadHtmlChart>
protected DataTable GetChartData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("X_Axis_Categories", typeof(string)));
    tbl.Columns.Add(new DataColumn("First_Series_Values", typeof(decimal)));
    tbl.Columns.Add(new DataColumn("Second_Series_Values", typeof(decimal)));
    tbl.Rows.Add(new object[] {"Label 1", 1, 5 });
    tbl.Rows.Add(new object[] {"Label 2", 10, 15 });
    tbl.Rows.Add(new object[] {"Label 3", 20, 25 });

    return tbl;
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        RadHtmlChart1.DataSource = GetChartData();
        RadHtmlChart1.DataBind();
    }
}
Protected Function GetChartData() As DataTable
    Dim tbl As New DataTable()
    tbl.Columns.Add(New DataColumn("X_Axis_Categories", GetType(String)))
    tbl.Columns.Add(New DataColumn("First_Series_Values", GetType(Decimal)))
    tbl.Columns.Add(New DataColumn("Second_Series_Values", GetType(Decimal)))
    tbl.Rows.Add(New Object() {"Label 1", 1, 5})
    tbl.Rows.Add(New Object() {"Label 2", 10, 15})
    tbl.Rows.Add(New Object() {"Label 3", 20, 25})

    Return tbl
End Function

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        RadHtmlChart1.DataSource = GetChartData()
        RadHtmlChart1.DataBind()
    End If
End Sub 

Figure 1: The result from Example 1 - correct series data binding.

expected results with proper data source

See Also