HtmlChart - List Of Custom Objects

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?