Chart (HTML5)

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadHtmlChart - Telerik's ASP.NET HtmlChart

Customers
PhotoNameCountrySpent Money
Data pager
Data pager
 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

tlrk.it/15xbg7l To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/15xbg7l

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 databinding combined with an innovative client-side rendering engine for remarkable performance, quality, and polished images.

RadHtmlChart and 80+ 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.

About This Demo

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 datasource. All other configuration of the chart is done with a few properties in its markup. Easy as pie, or bar in this case.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular HtmlChart demo, you can use the following path to find it in the sample website application:
htmlchart/examples/overview

Key Features

  • Pure client-side rendering for unmatched server performance.
  • Easy server-side and client-side databinding.
  • 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.

Resources

C# VB
Show code in new window Demo isolation steps
<%@ 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" %>
<%@ Register Src="~/HtmlChart/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>ASP.NET Charting Demo | RadHtmlChart for AJAX</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
          <div style="width: 975px;">
               <div style="float: left; margin-right: 20px; width: 380px; text-align: center;">
                    <strong style="font: 16px/52px Arial,Helvetica,sans-serif">Customers</strong><br />
                    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
                         OnPreRender="RadGrid1_PreRender" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged"
                         Width="380px" 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">
                                   </telerik:GridBoundColumn>
                                   <telerik:GridBoundColumn DataField="ContactName" UniqueName="ContactName" HeaderText="Name"
                                        EmptyDataText="&amp;nbsp;" HeaderStyle-HorizontalAlign="Center">
                                   </telerik:GridBoundColumn>
                                   <telerik:GridBoundColumn DataField="Country" UniqueName="Country" HeaderText="Country"
                                        EmptyDataText="&amp;nbsp;" HeaderStyle-HorizontalAlign="Center">
                                   </telerik:GridBoundColumn>
                                   <telerik:GridBoundColumn DataField="allSpentMoney" UniqueName="allSpentMoney" HeaderText="Spent Money"
                                        EmptyDataText="&amp;nbsp;" HeaderStyle-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 style="float: left; width: 575px;" class="qsf-ib">
                    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="575px" DataSourceID="SqlDataSource2"
                         Style="float: left;">
                         <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>
               <br class="qsf-clear-float" />
          </div>
     </telerik:RadAjaxPanel>
     <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>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/ChartHTML5.png" AlternateText="tlrk.it/15xbg7l" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/15xbg7l">tlrk.it/15xbg7l</a>
    </div>
    </form>
</body>
</html>