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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // 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 ); }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: FunnelCharts public ActionResult FunnelCharts() { return View(Models.FlexChartData.GetStages()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | @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}" )) ) |