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

List Of Custom Objects

The left chart uses a list of custom objects which mimics a declarative data source, so the properties DataFieldY, NameField and ExplodeField of the series can be used to obtain the data from the objects.

The right chart is bound to a simple list of doubles much in the same way as binding to a regular array can be done. Series that do not have explicit data defined will take the values from the list. The axes must be configured manually, for example by adding items in the markup.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.DataBinding.BindToList.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="400px" Width="480px" CssClass="fb-sized">
                <PlotArea>
                    <Series>
                        <telerik:PieSeries DataFieldY="MarketShare" NameField="Name" ExplodeField="IsExploded">
                            <LabelsAppearance DataFormatString="{0}%">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                        </telerik:PieSeries>
                    </Series>
                    <YAxis>
                    </YAxis>
                </PlotArea>
                <ChartTitle Text="Average browser shares in 2011">
                </ChartTitle>
            </telerik:RadHtmlChart>
        </div>
        <div class="demo-container">
            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Height="400px" Width="400px" CssClass="fb-sized">
                <PlotArea>
                    <Series>
                        <telerik:AreaSeries Name="Market share in 2010" DataFieldY="MarketShare2010">
                            <TooltipsAppearance Color="White" Visible="true"></TooltipsAppearance>
                        </telerik:AreaSeries>
                        <telerik:LineSeries Name="Market share in 2011" DataFieldY="MarketShare2011">
                            <TooltipsAppearance Color="White" Visible="true"></TooltipsAppearance>
                        </telerik:LineSeries>
                    </Series>
                    <XAxis>
                        <Items>
                            <telerik:AxisItem LabelText="January"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Februrary"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="March"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="April"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="May"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="June"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="July"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="August"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="September"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="October"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="November"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="December"></telerik:AxisItem>
                        </Items>
                        <LabelsAppearance RotationAngle="-90">
                        </LabelsAppearance>
                    </XAxis>
                </PlotArea>
                <Legend>
                    <Appearance Position="Bottom">
                    </Appearance>
                </Legend>
                <ChartTitle Text="Chrome market share">
                </ChartTitle>
            </telerik:RadHtmlChart>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance