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

Static Items

This demo illustrates the different ways to declare SeriesItems in an ASP.NET AJAX Chart:

  • Declaratively add data in the markup by using the SeriesItems collection of the desired chart series. See the "In 2010 (Markup)" ColumnSeries for an example.
    Note: SeriesItems from the markup take precedence over data loaded from the data source. See the "In 2011 (Markup and DataSource)" ColumnSeries for details.
  • DataBinding - the DataFieldY property of each series indicates the column from the data source that is used to load data for the SeriesItems. The "Upper Threshold (DataSource)" LineSeries is an example of this.
    Note: the chart must be data-bound to a data source that contains the given column.
  • Programmatic creation - SeriesItems can be created on the server like any other objects, then added to the SeriesItems collection of the desired series. The LineSeries named "Lower Threshold (Programmatic)" uses this approach.
    Note: Such items are added after items declared in the markup and also override any data-binding.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.HtmlChart.DataBinding.StaticItems.DefaultVB" %>

<%@ 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-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="In 2010 (Markup)">
                        <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                        <LabelsAppearance Visible="false">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="46.3"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="46.5"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="46.2"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="46.4"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="46.9"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="46.6"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="46.4"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="45.8"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="45.1"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="44.1"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="44.0"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="43.5"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="In 2011 (Markup and DataSource)" DataFieldY="DummyData">
                        <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                        <LabelsAppearance Visible="false">
                        </LabelsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="42.8"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="42.4"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="42.2"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="42.9"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="42.4"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="42.2"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="42.0"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="40.6"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="39.7"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="38.7"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="38.1"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="37.7"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:LineSeries Name="Upper Threshold (DataSource)" DataFieldY="UpperThreshold">
                        <Appearance>
                            <FillStyle BackgroundColor="#ff9c00" />
                        </Appearance>
                        <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                        <LabelsAppearance Visible="false">
                        </LabelsAppearance>
                        <MarkersAppearance Visible="false" />
                    </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>
                </XAxis>
                <YAxis>
                    <LabelsAppearance DataFormatString="{0}%">
                    </LabelsAppearance>
                </YAxis>
            </PlotArea>
            <Legend>
                <Appearance Position="Bottom">
                </Appearance>
            </Legend>
            <ChartTitle Text="Firefox market share">
                <Appearance Position="Top">
                </Appearance>
            </ChartTitle>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance