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

Client-side Binding

  • Demo Configurator
Event log

This example demonstrates how to use the client-side data-binding feature of the ASP.NET AJAX Chart control. This RadHtmlChart example demonstrates how to use the client-side data-binding feature of Telerik's ASP.NET Chart. A PieSeries is used for illustration purposes.

There are three buttons present on this demo:

  • Bind to WCF Service — gets a stringified data object from a WCF Service and binds it to the chart. For brevity, the WCF service uses hard-coded values.
  • Bind to Random Data — gets the current data source of the chart and generates random values for the SeriesItems' DataFieldY and IsExploded fields.
  • Reset Data — posts the page so the chart binds on the server-side to its initial data source.

Here is how you can work with the client-side data source of the RadHtmlChart:

  • Obtain the current data source - the current data source of a data-bound chart can be obtained on the client-side through the get_dataSourceJSON method which returns a stringified JSON object.
  • Set a new data source - a new data source can be given to the chart on the client-side through the set_dataSource method which takes as a parameter either a JSON string or an array of JSON objects.

Note: The field names in the JSON objects must match the chart's data-binding properties - DataFieldY, NameField, ColorField and ExplodeField for a PieSeries. In order for the new data source to take effect, the chart must be refreshed through its repaint method.

Note: At least the DataFieldY property must be set (either in the markup or in the code behind), in order for the chart to reference the respective values from the data source. In this example all PieSeries data-binding properties are used - DataFieldY, NameField, ColorField and ExplodeField.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • HtmlChartWcfService.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ClientSideDataBinding.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>
    <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" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ButtonResetData">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWCF" WcfRequestMethod="GET"
        OnClientResponseEnding="setDataFromService " WcfServicePath="HtmlChartWcfService.svc"
        WcfServiceMethod="getJsonData">
    </telerik:RadXmlHttpPanel>

    <div class="demo-container size-wide">
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
            <ClientEvents OnLoad="onChartLoad" />
            <ChartTitle Text="Countries Exporting Crude Oil the United States (in Thousands of Barrels)">
            </ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:PieSeries DataFieldY="Barrels" ColorField="Color" ExplodeField="IsExploded"
                        NameField="Country">
                        <LabelsAppearance DataFormatString="{0:N0} bbl"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>


    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Auto">
                    <qsf:Button ID="ButtonGetDataFromService" runat="server" Text="Bind to WCF Service"
                        AutoPostBack="false" OnClientClicked="getDataFromService" Size="Wide">
                    </qsf:Button>
                    <qsf:Button ID="ButtonGetRandomData" runat="server" Text="Bind to Random Data"
                        AutoPostBack="false" OnClientClicked="setRandomDataSource" Size="Wide">
                    </qsf:Button>
                    <qsf:Button ID="ButtonResetData" runat="server" Text="Reset Data" 
                        OnClientClicked="clearConsole" Size="Wide">
                    </qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>

    <script type="text/javascript">
        var xmlHttpPanel = null;

        Sys.Application.add_load(function () {
            xmlHttpPanel = $find("<%=XmlHttpPanelWCF.ClientID %>");
        });
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance