HtmlChart - Client-side Events

Event log

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadHtmlChart provides several client-side events, the handlers to which can be attached through the control's ClientEvents inner tag:

  • OnLoad — fires when the control is initialized.
  • OnSeriesHovered — fires when a series is hovered.
  • OnSeriesClicked — fires when a series is clicked.
  • OnLegendItemHovered — fires when a legend item is hovered.
  • OnLegendItemClicked — fires when a legend item is clicked.

All client-side events, except OnLoad, are references to their corresponding events of the Kendo UI HtmlChart object. You can get familiar with the full set of arguments coming with each event in the Kendo UI HtmlChart API reference.

  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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>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" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="BarChart" Transitions="true">
            <ClientEvents OnLoad="OnLoad" OnSeriesClick="OnSeriesClick" 
                OnSeriesHover="OnSeriesHover" OnLegendItemClick="OnLegendItemClick"
                OnLegendItemHover="OnLegendItemHover" />
            <PlotArea>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="2003"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2004"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2005"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <Series>
                    <telerik:ColumnSeries Name="Quarter 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="315000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="495000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="690000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Quarter 2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="360000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="540000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="735000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Quarter 3">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="405000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="600000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="780000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>

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

Find Assistance

Help Us Improve

Was this example helpful?