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

WebForms HtmlChart Overview

Customers
PhotoNameCountrySpent Money
 Page 1 of 4, items 1 to 3 of 12.
Maria Anders photo Maria AndersGermany320.85
Ana Trujillo photo Ana TrujilloMexico225.25
Antonio Moreno photo Antonio MorenoMexico373.43

This example shows the basic functionality and ease of use of RadHtmlChart. Telerik ASP.NET Grid on the left is used for the basic data display for each customer and clicking its rows presents additional data in the chart by only changing a single parameter in its data source. All other configuration of the chart is done with a few properties in its markup. Easy as pie, or bar in this case.

About RadHtmlChart for ASP.NET AJAX

The versatile nature of RadHtmlChart for ASP.NET AJAX allow you to add financial, scientific, engineering, business or any kind of relevant data to charts that can be integrated into your applications. Powered by Kendo UI DataViz, the control encompasses a myriad of data visualization features, flexible data-binding combined with an innovative client-side rendering engine for remarkable performance, quality, and polished images.

RadHtmlChart and 120+ other controls are part of UI for ASP.NET AJAX , a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Pure client-side rendering for unmatched server performance.
  • Easy server-side and client-side data-binding.
  • DateTime support - bind DateTime objects to the chart and control the date format in the labels and the tooltips.
  • Customizable appearance - changing the look of a given element is only a single property away.
  • Intuitive code structure that closely resembles an actual chart.
  • User-interactive - hovering effects and smooth animation for the rendering.
  • Client-side events allow you to react to clicks on the chart to make it even more interactive or drill-down in the data.
  • Ships with built-in templates to match all skins in the suite.
  • Design-time configurator allows you to set up a chart with just a few clicks.

More about RadHtmlChart for ASP.NET AJAX

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Overview.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>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
            <div class="demo-container no-bg ">
                <div class="gridTitle">Customers</div>
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
                    OnPreRender="RadGrid1_PreRender" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged"
                    Width="392px" Height="340px" GridLines="None" AllowMultiRowSelection="false"
                    PageSize="3" AllowPaging="true">
                    <MasterTableView DataSourceID="SqlDataSource1" Height="340px" DataKeyNames="CustomerID">
                        <Columns>
                            <telerik:GridTemplateColumn HeaderText="Photo" HeaderStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <asp:Image ID="ImageCustomerPhoto" ImageUrl='<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>'
                                        runat="server" Width="45" Height="55" AlternateText='<%# Eval("ContactName", "{0} photo") %>'></asp:Image>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID" HeaderText="CustomerID"
                                EmptyDataText="&amp;nbsp;" Visible="false">
                                    <ItemStyle HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ContactName" UniqueName="ContactName" HeaderText="Name"
                                EmptyDataText="&amp;nbsp;" HeaderStyle-HorizontalAlign="Center">
                                <ItemStyle HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Country" UniqueName="Country" HeaderText="Country"
                                EmptyDataText="&amp;nbsp;" HeaderStyle-HorizontalAlign="Center">
                                <ItemStyle HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="allSpentMoney" UniqueName="allSpentMoney" HeaderText="Spent Money"
                                EmptyDataText="&amp;nbsp;" HeaderStyle-HorizontalAlign="Center">
                                <ItemStyle HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                        </Columns>
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </ExpandCollapseColumn>
                    </MasterTableView>
                    <FilterMenu EnableTheming="True">
                        <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
                    </FilterMenu>
                    <ClientSettings EnablePostBackOnRowClick="true">
                        <Selecting AllowRowSelect="true"></Selecting>
                    </ClientSettings>
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                    <HeaderStyle Height="52px"></HeaderStyle>
                </telerik:RadGrid>
            </div>

            <div class="demo-container no-bg size-medium">
                <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="SqlDataSource2" Width="600px" Height="400px">
                    <PlotArea>
                        <Series>
                            <telerik:BarSeries Name="Products" DataFieldY="spentMoney">
                                <TooltipsAppearance Color="White" DataFormatString="${0}"></TooltipsAppearance>
                                <LabelsAppearance Visible="false">
                                </LabelsAppearance>
                            </telerik:BarSeries>
                        </Series>
                        <XAxis DataLabelsField="pName">
                            <MinorGridLines Visible="false"></MinorGridLines>
                            <MajorGridLines Visible="false"></MajorGridLines>
                        </XAxis>
                        <YAxis>
                            <LabelsAppearance DataFormatString="${0}"></LabelsAppearance>
                            <MinorGridLines Visible="false"></MinorGridLines>
                        </YAxis>
                    </PlotArea>
                    <Legend>
                        <Appearance Visible="false"></Appearance>
                    </Legend>
                    <ChartTitle Text="Money Spent Per Product"></ChartTitle>
                </telerik:RadHtmlChart>
            </div>

        </telerik:RadAjaxPanel>
    </div>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT top 12 c.CustomerID, c.ContactName, c.Country, SUM(p.UnitPrice) AS allSpentMoney 
                FROM Products AS p, Orders AS o, [Order Details] AS od, Customers AS c 
                WHERE p.productID = od.productID AND od.OrderID = o.OrderID AND c.CustomerID = o.CustomerID 
                GROUP BY c.CustomerID, c.ContactName, c.Country"></asp:SqlDataSource>

    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT p.productId, p.ProductName AS pName, sum(p.UnitPrice) AS spentMoney, c.CustomerID AS cID, c.ContactName AS cName 
                FROM products AS p, orders AS o, [order details] AS od, customers AS c 
                WHERE p.productID = od.productID AND od.OrderID = o.OrderID AND c.CustomerID = o.CustomerID AND (c.CustomerID = @CustomerID)
                GROUP BY c.CustomerID, c.ContactName, p.productID, p.ProductName">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadGrid1" Name="CustomerID" DefaultValue="ALFKI"
                PropertyName="SelectedValue"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance