HtmlChart - Funnel Chart

Demo Configurator

  • Neck Ratio:
  • Segment spacing:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo shows the FunnelSeries in RadHtmlChart, which displays data in progressively decreasing proportions, organized in segments. The size of each segment is determined by the value of the corresponding series item.

The configuration panel exposes the meaningful properties in the context of a FunnelSeries. You can manually customize it and see how setting each of the properties affects the control.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" 
    Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.FunnelChart.DefaultCS" %>

<%@ 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>
</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">
    <div class="demo-container">
        <telerik:RadHtmlChart runat="server" ID="FunnelChart1" Width="420" Height="320" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:FunnelSeries DynamicHeightEnabled="true" DynamicSlopeEnabled="false" SegmentSpacing="0" NeckRatio="0.3">
                        <SeriesItems>
                            <telerik:FunnelSeriesItem Y="5442" BackgroundColor="#aece4f" Name="Visited the website" />
                            <telerik:FunnelSeriesItem Y="1519" BackgroundColor="#39946f" Name="Watched the demos" />
                            <telerik:FunnelSeriesItem Y="1131" BackgroundColor="#e7d065" Name="Downloaded a trial" />
                            <telerik:FunnelSeriesItem Y="811" BackgroundColor="#8a65a5" Name="Purchased a license" />
                            <telerik:FunnelSeriesItem Y="704" BackgroundColor="#ef99d7" Name="Renewed a license" />
                        </SeriesItems>
                        <LabelsAppearance Align="Center" Position="Center" Color="Black"></LabelsAppearance>
                        <TooltipsAppearance>
                            <ClientTemplate>#= category #</ClientTemplate>
                        </TooltipsAppearance>
                    </telerik:FunnelSeries>
                </Series>
            </PlotArea>

            <Legend>
                <Appearance Visible="true"></Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="FunnelChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li><span class="checkbox">
                            <asp:CheckBox runat="server" AutoPostBack="true" ID="CheckBoxDynamicHeight" Text="Dynamic Height" Checked="true" OnCheckedChanged="CheckBoxDynamicHeight_CheckedChanged"></asp:CheckBox>
                        </span>
                        </li>
                        <li><strong>Neck Ratio: </strong>
                            <qsf:Slider runat="server" ID="SliderNeckRatio" MinimumValue="0.3" MaximumValue="10" AutoPostBack="true" OnValueChanged="SliderNeckRatio_ValueChanged"></qsf:Slider>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxLabelsPosition" Label="Labels Position" OnSelectedIndexChanged="ComboBoxLabelsPosition_SelectedIndexChanged"></qsf:ComboBox>
                        </li>
                    </ul>


                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li><span class="checkbox">
                            <asp:CheckBox AutoPostBack="true" runat="server" ID="CheckBoxDynamicSlope" Text="Dynamic Slope" Checked="false" OnCheckedChanged="CheckBoxDynamicSlope_CheckedChanged"></asp:CheckBox></span>
                        </li>
                        <li><strong>Segment spacing:</strong>
                            <qsf:Slider runat="server" ID="SliderSegmentSpacing" MinimumValue="0" MaximumValue="30" AutoPostBack="true" OnValueChanged="SliderSegmentSpacing_ValueChanged"></qsf:Slider>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxLabelsAlignment" Label="Labels Alignment" OnSelectedIndexChanged="ComboBoxLabelsAlignment_SelectedIndexChanged"></qsf:ComboBox>
                        </li>
                    </ul>

                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?