Funnel

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.

Trapezoid chart: Contains a pair of parallel sides.
Stacked Bar chart: Places related values on top of one another in the form of horizontal bars.

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 FlexChart class.

The following code manually creates data containing values for the amount of orders across seven stages of an order fulfillment process. The snippet sets the chart type as Funnel, specifies the dimensions of the Funnel neck, and sets Header, Legend, and Data Labels of the chart.

Visual Basic
C#

Visual Basic

' clear the Series collection
FlexChart1.Series.Clear()

' create data
Dim data = New Object() {New With {
     .Name = "Received",
     .Value = 99000
}, New With {
     .Name = "Processed",
     .Value = 85000
}, New With {
     .Name = "Approved",
     .Value = 60000
}, New With {
     .Name = "Released",
     .Value = 50000
}, New With {
     .Name = "Shipped",
     .Value = 45000
}, New With {
     .Name = "Completed",
     .Value = 30000
},
    New With {
     .Name = "Delivered",
     .Value = 25000
}}

' create an instance of Series
Dim series1 As New C1.Win.Chart.Series()

' add the instance to the Series collection
FlexChart1.Series.Add(series1)

' set y-binding
series1.Binding = "Value"

' set x-binding and add data to the chart
FlexChart1.BindingX = "Name"
FlexChart1.DataSource = data

' set the chart type as Funnel
FlexChart1.ChartType = ChartType.Funnel

' set the Funnel chart type as Default (Trapezoid chart)
FlexChart1.Options.FunnelType = FunnelChartType.[Default]

' set the Funnel neck height
FlexChart1.Options.FunnelNeckHeight = 0.05

' set the Funnel neck width
FlexChart1.Options.FunnelNeckWidth = 0.2

// clear the Series collection
flexChart1.Series.Clear();

// create data
var data = new[]
{
    new { Name = "Received", Value = 99000 },
    new { Name = "Processed", Value = 85000 },
    new { Name = "Approved", Value = 60000 },
    new { Name = "Released", Value = 50000 },
    new { Name = "Shipped", Value = 45000 },
    new { Name = "Completed", Value = 30000 },
    new { Name = "Delivered", Value = 25000 }
};

// create an instance of Series
C1.Win.Chart.Series series1 = new C1.Win.Chart.Series();

// add the instance to the Series collection
flexChart1.Series.Add(series1);

// set y-binding
series1.Binding = "Value";

// set x-binding and add data to the chart
flexChart1.BindingX = "Name";
flexChart1.DataSource = data;

// set the chart type as Funnel
flexChart1.ChartType = ChartType.Funnel;
            
// set the Funnel chart type as Default (Trapezoid chart)
flexChart1.Options.FunnelType = FunnelChartType.Default;

// set the Funnel neck height
flexChart1.Options.FunnelNeckHeight = 0.05;

// set the Funnel neck width
flexChart1.Options.FunnelNeckWidth = 0.2;