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

Funnel Chart

  • Demo Configurator
  • Neck Ratio:
  • Segment spacing:

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>
<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>

Support & Learning Resources

Find Assistance