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

Data Loading Modes

  • Demo Configurator
  • Loading modeOnPageLoad

There are three options for loading the data in the ASP.NET AJAX Chart:

  • OnPageLoad — the data from the specified data source is populated on page load.
  • AfterPageLoad — the data from the specified data source is populated after the page is loaded.
  • FromCode — the data from the specified data source is populated via callback. In this case you should call the client-side method loadData() when you want to load the data.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.DataBinding.LoadingData.DefaultCS" %>

<%@ 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>
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/ChartData2.xml"></asp:XmlDataSource>
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" InvokeLoadData="OnPageLoad" DataSourceID="XmlDataSource1"
            Width="680px" Height="400px">
            <ClientEvents OnLoad="OnLoad" />
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
            <PlotArea>
                <YAxis MaxValue="7000">
                    <TitleAppearance Text="Units"></TitleAppearance>
                </YAxis>
                <XAxis DataLabelsField="Month"></XAxis>
                <Series>
                    <telerik:ColumnSeries Name="Cars" DataFieldY="Cars">
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Bikes" DataFieldY="Bikes">
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Trailers" DataFieldY="Trailers">
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListInvokeLoadData" AutoPostBack="true" Label="Loading mode">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:Button ID="btnLoadData" runat="server" Text="Load Data" Visible="false"
                                OnClientClicked="LoadData" AutoPostBack="false">
                            </qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance