ComponentOne FlexChart for UWP
FlexChart / Understanding FlexChart / FlexChart Types / Funnel
In This Topic
    Funnel
    In This Topic

    A funnel chart allows you to represent sequential stages in a linear process. For instance, a sales process that tracks prospects across the stages, such as Sales Prospects, Qualified Prospects, Price Quotes, Negotiations, and Closed Sales.

    In the process, each stage represents a proportion (percentage) of the total. Therefore, the chart takes the funnel shape with the first stage being the largest and each following stage smaller than the predecessor.

    Funnel charts are useful in identifying potential problem areas in processes where it is noticeable at what stages and rate the values decrease.

    FlexChart offers the Funnel chart in two forms, as follows.

    The following images show both Trapezoid and Stacked Bar charts displaying the number of orders across seven stages of an order fulfillment evaluation process.

    Trapezoid Chart

    Stacked Bar Chart

    In FlexChart, use the Funnel chart by setting the ChartType property to Funnel from the ChartType enum. Specify the type of the Funnel chart as either Trapezoid or Stacked Bar chart by setting the FunnelType property to Default or Rectangle from the FunnelChartType enum.

    In addition, change the dimensions of the neck of the Funnel chart, when set as Trapezoid chart, by setting the FunnelNeckWidth and FunnelNeckHeight properties. These properties are available in the ChartOptions class accessible through the Options property of the C1FlexChart class.

    The following code creates a class, DataCreator to create data containing values for the amount of orders across seven stages of an order fulfillment process.

    Class DataCreator
        Public Shared Function CreateFunnelData() As List(Of DataItem)
            Dim data = New List(Of DataItem)()
            data.Add(New DataItem("Received", 99000))
            data.Add(New DataItem("Processed", 85000))
            data.Add(New DataItem("Approved", 60000))
            data.Add(New DataItem("Released", 50000))
            data.Add(New DataItem("Shipped", 45000))
            data.Add(New DataItem("Completed", 30000))
            data.Add(New DataItem("Delivered", 25000))
            Return data
        End Function
    End Class
    
    Public Class DataItem
        Public Sub New(order__1 As String, value__2 As Integer)
            Order = order__1
            Value = value__2
        End Sub
    
        Public Property Order() As String
            Get
                Return m_Order
            End Get
            Set
                m_Order = Value
            End Set
        End Property
        Private m_Order As String
        Public Property Value() As Integer
            Get
                Return m_Value
            End Get
            Set
                m_Value = Value
            End Set
        End Property
        Private m_Value As Integer
    End Class
    
    class DataCreator
    {
        public static List<DataItem> CreateFunnelData()
        {
            var data = new List<DataItem>();
            data.Add(new DataItem("Received", 99000));
            data.Add(new DataItem("Processed", 85000));
            data.Add(new DataItem("Approved", 60000));
            data.Add(new DataItem("Released", 50000));
            data.Add(new DataItem("Shipped", 45000));
            data.Add(new DataItem("Completed", 30000));
            data.Add(new DataItem("Delivered", 25000));
            return data;
        }
    }
    
    public class DataItem
    {
        public DataItem(string order, int value)
        {
            Order = order;
            Value = value;
        }
    
        public string Order { get; set; }
        public int Value { get; set; }
    }
    

    The following code sets the chart type as Funnel, specifies the dimensions of the Funnel neck, and sets Header, Legend, and Data Labels of the chart.

    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:FunnelChart"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Chart="using:C1.Xaml.Chart" 
        xmlns:Foundation="using:Windows.Foundation"
        x:Class="FunnelChart.MainPage"
        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
        mc:Ignorable="d" Width="972.674" 
        Height="708.449">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="29*"/>
                <ColumnDefinition Width="34*"/>
                <ColumnDefinition Width="297*"/>
                <ColumnDefinition Width="0*"/>
            </Grid.ColumnDefinitions>
    
            <Chart:C1FlexChart x:Name="flexChart" 
                            BindingX ="Order" 
                            ChartType="Funnel"  
                            ItemsSource="{Binding Data}" 
                            HorizontalAlignment="Left" 
                            Height="529" 
                            Margin="-146.333,169,0,0" 
                            VerticalAlignment="Top" 
                            Width="939" 
                            Header="Order Fulfillment Evaluation for Last Year" 
                            HeaderAlignment="Center" 
                            LegendPosition="Bottom">
                <Chart:C1FlexChart.HeaderStyle>
                    <Chart:ChartStyle FontFamily="Arial" 
                                   FontSize="13" 
                                   FontWeight="Bold" 
                                   Stroke="DarkCyan"/>
                </Chart:C1FlexChart.HeaderStyle>
                <Chart:Series Binding="Value">
                </Chart:Series>
                <Chart:C1FlexChart.DataLabel>
                    <Chart:DataLabel Content="{}{Order}: {y}" 
                                  Position="Center"/>
                </Chart:C1FlexChart.DataLabel>
                <Chart:C1FlexChart.Options>
                    <Chart:ChartOptions FunnelType="Default" 
                                     FunnelNeckHeight="0.05" 
                                     FunnelNeckWidth="0.2"/>
                </Chart:C1FlexChart.Options>
            </Chart:C1FlexChart>
        </Grid>
    
    </Page>
    
    MainPage.xaml.vb
    Copy Code
    Partial Public Class MainPage
        Inherits Page
        Private _data As List(Of DataItem)
    
        Public Sub New()
            InitializeComponent()
        End Sub
    
        Public ReadOnly Property Data() As List(Of DataItem)
            Get
                If _data Is Nothing Then
                    _data = DataCreator.CreateFunnelData()
                End If
    
                Return _data
            End Get
        End Property
    End Class
    

    MainPage.xaml.cs
    Copy Code
    public partial class MainPage : Page
    {
        private List<DataItem> _data;
    
        public MainPage()
        {
            InitializeComponent();
        }
    
        public List<DataItem> Data
        {
            get
            {
                if (_data == null)
                {
                    _data = DataCreator.CreateFunnelData();
                }
    
                return _data;
            }
        }
    }