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 the ASP.NET AJAX Chart, 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

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" 
    Inherits="HtmlChart_Examples_ChartTypes_Funnel_Chart_DefaultVB" %>

<%@ 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 ID="ConfiguratorColumn1" 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 ID="ConfiguratorColumn2" 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