Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select
  • Rate / Review ▼

    • Give your Feedback:

      Rate this demo:


Chart / Database

Binding to a DataSource Control - bar series and grouping


Binding to a DataSource control - pie series
GDP by Year:

Did you know that you can add Telerik Silverlight Charts to your ASP.NET applications?

RadControls for Silverlight


  • The above charts are databound to a SqlDataSource Control.
    The first chart shows how to display the results from different categories, grouped by the category name. The X axis labels show the corresponding years. The RadChart1.Legend.Appearance.GroupNameFormat is set to "#VALUE" so the legend items display the actual category name. More details about this property are available in this help topic.

    The second chart shows how to display values in a pie chart. ItemDataBound event is wired and each item's Name property is assigned. This value is then shown in the legend.

    Both charts' datasource controls have a ControlParameter, serving to filter the results according to the corresponding DropDownList selection.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Chart.Examples.DataBinding.Automatic.DefaultCS" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag1"></telerik:HeadTag>
        <!-- custom head section -->
    </head>
    <body class="BODY">
        <!-- end of custom head section -->
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT * FROM [Category]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT DISTINCT [Year] FROM [Data]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT SC.Name, D.Year, D.Value FROM (Category AS C INNER JOIN Subcategory AS SC ON C.Id=SC.Category_id) INNER JOIN Data AS D ON SC.ID=D.SubCategory_Id WHERE C.ID=@Id ORDER BY C.ID, SC.ID, Year;">
            <SelectParameters>
                <asp:ControlParameter ControlID="dropDownCategory" DefaultValue="2" Name="Id" PropertyName="SelectedValue" />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT SUM(Value) AS [Sum], C.Name FROM (Category AS C INNER JOIN Subcategory AS SC ON C.Id=SC.Category_id) INNER JOIN [Data] AS D ON SC.ID=D.SubCategory_Id WHERE [Year]=@Year GROUP BY C.ID, C.Name ORDER BY C.ID">
            <SelectParameters>
                <asp:ControlParameter ControlID="dropDownYears" DefaultValue="1996" Name="Year" PropertyName="SelectedValue" />
            </SelectParameters>
        </asp:SqlDataSource>
        <form id="mainForm" runat="server" method="post">
            <telerik:Header ShowSkinChooser="false" ID="Header1" runat="server" AccessibilityLevel="AAA" NavigationLanguage="C#">
            </telerik:Header>
            <asp:ScriptManager ID="ScriptManager" runat="server" />
            <!-- content start -->
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="dropDownCategory">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadChart1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="dropDownYears">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadChart2" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <strong>Binding to a DataSource Control - bar series and grouping</strong><br />
            <label for="dropDownCategory">
                <asp:Label ID="Label2" runat="server" class="text">GDP by Industry:</asp:Label>
            </label>
    <asp:DropDownList ID="dropDownCategory" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropDownCategory_SelectedIndexChanged"
    Width="225px" DataSourceID="SqlDataSource1" DataTextField="Name" DataValueField="Id">
            </asp:DropDownList><br />
            <telerik:RadChart ID="RadChart1" runat="server" Width="710px" OnDataBound="RadChart1_DataBound"
                DataGroupColumn="Name" AutoTextWrap="true" DataSourceID="SqlDataSource3" Skin="LightBlue">
                <Legend>
                    <Appearance GroupNameFormat="#VALUE">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <XAxis DataLabelsColumn="Year">
                    </XAxis>
                </PlotArea>
            </telerik:RadChart>
            <br />
            <strong>Binding to a DataSource control - pie series</strong>
            <br />
            <asp:Label ID="Label1" runat="server" class="text">GDP by Year: </asp:Label>
    <asp:DropDownList ID="dropDownYears" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource2"
    DataTextField="Year" DataValueField="Year">
            </asp:DropDownList><br />
            <telerik:RadChart ID="RadChart2" runat="server" DefaultType="Pie" Width="710px" AutoTextWrap="true"
                OnItemDataBound="RadChart2_ItemDataBound" DataSourceID="SqlDataSource4" Skin="LightGreen">
                <Appearance Dimensions-Width="710px">
                </Appearance>
                <Series>
                    <telerik:ChartSeries Name="Series 1" Type="Pie" DataYColumn="Sum">
                        <Appearance LegendDisplayMode="ItemLabels">
                        </Appearance>
                    </telerik:ChartSeries>
                </Series>
            </telerik:RadChart>
            <br />
            <!-- content end -->
            <telerik:Footer ID="Footer1" runat="server"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451