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

Data Binding RadChart to a Generic List of Objects

RadChart has been replaced by RadHtmlChart, Telerik's client-side charting component. If you are considering RadChart for new development, examine the RadHtmlChart documentation and online demos first to see if it will fit your development needs. If you are already using RadChart in your projects, you can migrate to RadHtmlChart by following these articles: Migrating Series, Migrating Axes, Migrating Date Axes, Migrating Databinding, Features parity. Support for RadChart is discontinued as of Q3 2014, but the control will remain in the assembly so it can still be used. We encourage you to use RadHtmlChart for new development.

You can bind to a generic lists of objects that have multiple properties. The example below binds to a list of "Product" objects that contain two properties, one property for "Name" and a second for "QuantityInStock". The Y axis binds to the QuantityInStock and the X axis label binds to the "Name" property.

Binding to Generic List of Complex Objects

The Product object is defined with a constructor that passes both Name and QuantityInStock:

public class Product
   public Product(string name, int quantityInStock)
       _name = name;
       _quantityInStock = quantityInStock;
   private string _name;
   public string Name
       get { return _name; }
       set { _name = value; }
   private int _quantityInStock;
   public int QuantityInStock
       get { return _quantityInStock; }
       set { _quantityInStock = value; }
Public Class Product
    Public Sub New(ByVal name As String, ByVal quantityInStock As Integer)
        _name = name
        _quantityInStock = quantityInStock
    End Sub
    Private _name As String
    Public Property Name() As String
            Return _name
        End Get
        Set(ByVal value As String)
            _name = value
        End Set
    End Property
    Private _quantityInStock As Integer
    Public Property QuantityInStock() As Integer
            Return _quantityInStock
        End Get
        Set(ByVal value As Integer)
            _quantityInStock = value
        End Set
    End Property
End Class

After the Product object is defined the following steps configure and bind to the generic List:

  1. A generic List of Product objects is created and assigned to the RadChart DataSource= property.

  2. The DataYColumn property of the series is assigned the numeric "QuantityInStock" property of the Product object.

  3. The XAxis DataLabelsColumn is assigned the "Name" property of the the Product object.

  4. The RadChart DataBind()= method is called.

List<Product> products = new List<Product>();
products.Add(new Product("Parka L", 120));
products.Add(new Product("Parka M", 100));
products.Add(new Product("Parka S", 132));
products.Add(new Product("Wool Cap", 45));
products.Add(new Product("Mittens", 67));
RadChart1.DataSource = products;
RadChart1.Series[0].DataYColumn = "QuantityInStock";
RadChart1.PlotArea.XAxis.DataLabelsColumn = "Name";
RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Font = new System.Drawing.Font("Arial", 8);
Dim products As New List(Of Product)()
products.Add(New Product("Parka L", 120))
products.Add(New Product("Parka M", 100))
products.Add(New Product("Parka S", 132))
products.Add(New Product("Wool Cap", 45))
products.Add(New Product("Mittens", 67))
RadChart1.DataSource = products
RadChart1.Series(0).DataYColumn = "QuantityInStock"
RadChart1.PlotArea.XAxis.DataLabelsColumn = "Name"
RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Font = New System.Drawing.Font("Arial", 8)

See Also

In this article