FlexChart
FlexChart
Funnel
The example shows how to create and customize a Funnel chart.
Features
Settings
Funnel Type: Default
Description
The example shows how to create and customize a Funnel chart.
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 | using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { private List<SalesData> _salesData = SalesData.GetData(); public ActionResult Funnel() { var settings = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"FunnelType", new object[]{"Default", "Rectangle"}}, } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(_salesData); } } } |
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 46 47 48 49 50 51 52 53 54 | @model IEnumerable<SalesData> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var funnelType = demoSettingsModel.GetEnum("FunnelType", FunnelType.Default); } @section Scripts{ <script type="text/javascript"> function updateMenu(menu, headerNamePrefix) { menu.header = headerNamePrefix + ': <b>' + menu.selectedItem.Header + '</b>'; } function setFunnelOption(option, value) { var chart = wijmo.Control.getControl('#chart'); if (chart) { chart.options.funnel[option] = value; chart.refresh(true); } } function customChangeFunnelType(chart, name) { setFunnelOption('type', name.toLowerCase()); } function neckChanged(sender, args) { setFunnelOption(sender.hostElement.id, wijmo.clamp(sender.value, sender.min, sender.max)); } </script>} <c1-flex-chart id="chart" binding-x="CountryName" binding="Sale" chart-type="Funnel" width="500px" height="400px"> <c1-flex-chart-datalabel content="{y}" /> <c1-items-source source-collection="Model" /> <c1-flex-chart-series name="Sales"></c1-flex-chart-series> <c1-chart-options> <c1-funnel-options type="@funnelType" neck-height="0.2F" /> </c1-chart-options> </c1-flex-chart> @section Settings{ <label style="display: inline-block; font-weight: normal">@Html.Raw(FlexChartRes.Funnel_NeckWidth) </label> <c1-input-number min="0" max="1" step="0.1" value="0.2" format="n1" value-changed="neckChanged" width="150px" id="neckWidth"></c1-input-number> <label style="display: inline-block; font-weight: normal">@Html.Raw(FlexChartRes.Funnel_NeckHeight) </label> <c1-input-number min="0" max="1" step="0.1" value="0.2" format="n1" value-changed="neckChanged" width="150px" id="neckHeight"></c1-input-number> } @section Description{ <p>@Html.Raw(FlexChartRes.Funnel_Text0)</p> } |