Generic List of Custom Objects
This help article describes which properties to use to bind the ASP.NET AJAX Chart to a simple list of doubles or to a list of custom objects and presents code examples.
Binding to a Generic List of Simple Types
You can bind a RadHtmlChart to a simple list of doubles much in the same way that you bind to a regular array. Series that do not have explicit data defined will take the values from the list. You must manually configure the axes by adding items in the markup. Example 1 demonstrates this approach.
Example 1: A Line chart setup that is bound to a simple array of doubles in Example 2.
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400px">
<PlotArea>
<Series>
<telerik:LineSeries>
<TooltipsAppearance Visible="false" />
</telerik:LineSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="January" />
<telerik:AxisItem LabelText="Februrary" />
<telerik:AxisItem LabelText="March" />
<telerik:AxisItem LabelText="April" />
<telerik:AxisItem LabelText="May" />
<telerik:AxisItem LabelText="June" />
<telerik:AxisItem LabelText="July" />
<telerik:AxisItem LabelText="August" />
<telerik:AxisItem LabelText="September" />
<telerik:AxisItem LabelText="October" />
<telerik:AxisItem LabelText="November" />
<telerik:AxisItem LabelText="December" />
</Items>
<LabelsAppearance RotationAngle="90" />
</XAxis>
</PlotArea>
<Legend>
<Appearance Visible="false" />
</Legend>
<ChartTitle Text="Chrome market share in 2011">
</ChartTitle>
</telerik:RadHtmlChart>
Example 2: Data binding the Line chart in Example 1 to an array of doubles.
protected void Page_Load(object sender, System.EventArgs e)
{
double[] ValuesArray = { 26.6, 26.5, 25.8, 24.3, 24.9, 23.2, 22.0, 22.4, 22.9, 21.7, 21.2, 20.2 };
RadHtmlChart1.DataSource = ValuesArray;
RadHtmlChart1.DataBind();
}
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
Dim chromeData As List(Of Double) = New List(Of Double)
chromeData.Add(23.8)
chromeData.Add(24.1)
chromeData.Add(25.0)
chromeData.Add(25.6)
chromeData.Add(25.9)
chromeData.Add(27.9)
chromeData.Add(29.4)
chromeData.Add(30.3)
chromeData.Add(30.5)
chromeData.Add(32.3)
chromeData.Add(33.4)
chromeData.Add(34.6)
RadHtmlChart2.DataSource = chromeData
RadHtmlChart2.DataBind()
End Sub
Binding to a Generic List of Objects
You can bind a RadHtmlChart to a list of custom objects that mimics a declarative data source. The DataFieldY property (and ColorField, ExplodeField, NameField for Pie and Donut; DataFieldX for Bubble, Scatter and ScatterLine; etc.)of the series and the DataLabelsField property of the axis can be used to obtain data from the objects. Example 3 shows how to create a Pie chart with a list as the data source.
Example 3: A Pie chart setup that is bound to a list of custom objects (i.e., the class Browser, declared in Example 5) in Example 4.
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="400px" Width="400px">
<PlotArea>
<Series>
<telerik:PieSeries DataFieldY="MarketShare" NameField="Name" ExplodeField="IsExploded">
<LabelsAppearance DataFormatString="{0}%">
</LabelsAppearance>
<TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
</telerik:PieSeries>
</Series>
<YAxis>
</YAxis>
</PlotArea>
<ChartTitle Text="Average browser shares in 2011">
</ChartTitle>
</telerik:RadHtmlChart>
Example 4: Data binding the Pie chart in Example 3 to a list of custom objects (i.e., the class Browser, declared in Example 5).
protected void Page_Load(object sender, System.EventArgs e)
{
List<Browser> browsers = new List<Browser>();
browsers.Add(new Browser("IE", 23.48, true));
browsers.Add(new Browser("Chrome", 28.57, false));
browsers.Add(new Browser("Firefox", 40.98, false));
browsers.Add(new Browser("Opera", 2.43, false));
browsers.Add(new Browser("Safari", 3.99, false));
RadHtmlChart1.DataSource = browsers;
RadHtmlChart1.DataBind();
}
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
Dim browsers As List(Of Browser) = New List(Of Browser)
browsers.Add(New Browser("IE", 23.48, True))
browsers.Add(New Browser("Chrome", 28.57, False))
browsers.Add(New Browser("Firefox", 40.98, False))
browsers.Add(New Browser("Opera", 2.43, False))
browsers.Add(New Browser("Safari", 3.99, False))
RadHtmlChart1.DataSource = browsers
RadHtmlChart1.DataBind()
End Sub
Example 5 shows how you can find the declaration of the custom class Browser that is used for populating the list:
Example 5: The declaration of the custom class Browser used for populating the list in Example 4 that is passed as a data source to the Pie chart from Example 3.
public class Browser
{
public Browser(string name, double marketShare, bool isExploded)
{
_name = name;
_marketShare = marketShare;
_isExploded = isExploded;
}
private string _name;
public string Name
{
get { return _name; }
set { _name = value; }
}
private double _marketShare;
public double MarketShare
{
get { return _marketShare; }
set { _marketShare = value; }
}
private bool _isExploded;
public bool IsExploded
{
get { return _isExploded; }
set { _isExploded = value; }
}
}
Public Class Browser
Public Sub New(name As String, marketShare As Double, isExploded As Boolean)
_name = name
_marketShare = marketShare
_isExploded = isExploded
End Sub
Private _name As String
Public Property Name() As String
Get
Return _name
End Get
Set(value As String)
_name = value
End Set
End Property
Private _marketShare As Double
Public Property MarketShare() As Double
Get
Return _marketShare
End Get
Set(value As Double)
_marketShare = value
End Set
End Property
Private _isExploded As Boolean
Public Property IsExploded() As Boolean
Get
Return _isExploded
End Get
Set(value As Boolean)
_isExploded = value
End Set
End Property
End Class