How to bind Chart to DataTable

Environment

Product

Chart for Blazor

Description

How to data bind the Telerik Blazor Chart to a DataTable?

How to use a DataTable as a data source for the Chart?

Solution

The Telerik UI for Blazor Chart does not support DataTable binding out of the box. To use DataTable instance as a data source for the series of the Chart you have to convert the DataTable to IEnumerable<T> e.g. List<T>.

Bind Chart to a converted DataTable

@using System.Data;
@using System.Dynamic;

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Pie"
                     Data="@Data"
                     Field="Value"
                     CategoryField="Name">
            <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

@code {
    private List<ExpandoObject> Data { get; set; }

    protected override void OnInitialized()
    {
        Data = ConvertDataTable(GetData(), "Value", "Name");
    }

    private static DataTable GetData()
    {
        var table = new DataTable();
        table.Columns.Add("Value", typeof(double));
        table.Columns.Add("Name", typeof(string));
        table.Rows.Add(1, "John");
        table.Rows.Add(5, "Peter");
        table.Rows.Add(6, "Paul");
        return table;
    }

    private static List<ExpandoObject> ConvertDataTable(DataTable dt, string field, string categoryField)
    {
        List<ExpandoObject> data = new List<ExpandoObject>();
        foreach (DataRow row in dt.Rows)
        {
            var expando = new ExpandoObject() as IDictionary<string, object>;
            expando.Add(field, row[field]); 
            expando.Add(categoryField, row[categoryField]);
            data.Add((ExpandoObject)expando);
        }
        return data;
    }
}

See Also

• Chart Data Binding