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

    Data Loading Modes

    OctoberNovemberDecemberJanuary01000200030004000500060007000Units20008005004500500900600050010004000700800CarsBikesTrailers
    • 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