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

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

In this article
Not finding the help you need? Improve this article