Funnel Charts

Funnel charts show values along multiple stages in a process.

For example, you could use a funnel chart to show the number of sales prospects at each stage in a sales pipeline. Typically, the values decrease gradually, making the bars resemble a funnel.

To create funnel charts with the FlexChart control, set the bindingX property to the name of the property that contains the step along the pipeline, and add a single series with binding set to the amount of transactions at the given step.

You can adjust the funnel's height, width, and style using the options property:

Neck Width:

Neck Height:

Neck Style:

// This file locates: "Scripts/Lesson/C1FlexChart/FunnelCharts.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var theNeckWidth = wijmo.Control.getControl('#neckWidth');
    var theNeckHeight = wijmo.Control.getControl('#neckHeight');
    var theNeckStyle = wijmo.Control.getControl('#neckStyle');
 
    theNeckWidth.valueChanged.addHandler(function (s, e) {
        theChart.options.funnel.neckWidth = s.value;
        theChart.refresh(true);
    });
 
    theNeckHeight.valueChanged.addHandler(function (s, e) {
        theChart.options.funnel.neckHeight = s.value;
        theChart.refresh(true);
    });
 
    theNeckStyle.textChanged.addHandler(function (s, e) {
        theChart.options.funnel.type = s.text.toLowerCase();
        theChart.refresh(true);
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: FunnelCharts
        public ActionResult FunnelCharts()
        {
            return View(Models.FlexChartData.GetStages());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.StageCount>
 
@{
    var neckStyles = new[] { "Default", "Rectangle" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.FunnelCharts_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.FunnelCharts_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.FunnelCharts_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.FunnelCharts_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.FunnelCharts_Text4)
</p>
 
<div class="demo-settings">
    <label for="neckWidth">@Html.Raw(Resources.C1FlexChart.FunnelCharts_Text5) </label>
    @Html.C1().InputNumber().Id("neckWidth").Min(0).Max(1).Step(0.1).Format("p0").Value(0.2)
    <br />
    <label for="neckHeight">@Html.Raw(Resources.C1FlexChart.FunnelCharts_Text6) </label>
    @Html.C1().InputNumber().Id("neckHeight").Min(0).Max(1).Step(0.1).Format("p0").Value(0.4)
    <br />
    <label for="neckStyle">@Html.Raw(Resources.C1FlexChart.FunnelCharts_Text7) </label>
    @Html.C1().ComboBox().Id("neckStyle").Bind(neckStyles)
</div>
 
@(Html.C1().FlexChart<FlexChartData.StageCount>().Id("theChart")
    .Bind("Stage", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Funnel)
    .Options(o =>
    {
        o.Funnel(f => f.NeckWidth(0.2f).NeckHeight(0.4f).Type(C1.Web.Mvc.FunnelType.Default));
    })
    .Series(sb => sb.Add().Binding("Count").Name("Sales Pipeline"))
    .DataLabel(dl => dl.Content("{item.count}"))
)