FlexChart
FlexChart
Selection
This view demonstrates the FlexChart's selection feature.
Features
Settings
Description
This view demonstrates the FlexChart's selection feature.
The SelectionMode property determines whether the chart should select series or points when the user clicks on the chart.
Note: In this sample, FlexChart changes its properties from Server-Side
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 | using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult Selection() { ChartOptions opts = new ChartOptions(); ViewBag.typeIndex = 0; ViewBag.stackIndex = 0; ViewBag.selectionIndex = 1; return View(opts); } [HttpPost] public ActionResult Selection(ChartOptions opts) { ViewBag.typeIndex = ChartOptions.ChartTypes.IndexOf(opts.type); ViewBag.stackIndex = ChartOptions.Stackings.IndexOf(opts.stack); ViewBag.selectionIndex = ChartOptions.SelectionModes.IndexOf(opts.selectionmode); return View(opts); } } } |
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | @model ChartOptions @{ ViewBag.DemoSettings = true; IEnumerable<Fruit> fruits = Fruit.GetFruitsSales(); } <c1-flex-chart binding-x="Name" chart-type="@Model.CType" stacking="@Model.CStack" selection-mode="@Model.CSelectionMode"> <c1-items-source source-collection="fruits"></c1-items-source> <c1-flex-chart-series binding="MarPrice" name="March"></c1-flex-chart-series> <c1-flex-chart-series binding="AprPrice" name="April"></c1-flex-chart-series> <c1-flex-chart-series binding="MayPrice" name="May"></c1-flex-chart-series> </c1-flex-chart> @section Scripts{ <script type="text/javascript"> var indexes = [@ViewBag.typeIndex, @ViewBag.stackIndex, @ViewBag.selectionIndex], isDocumentReady = false; submit = function (combo, comboIndex) { if (!isDocumentReady) { return; } var form = document.forms ? document.forms[0] : null; if (form && combo.selectedIndex != indexes[comboIndex]) { form.submit(); } }; postMethod0 = function (combo) { submit(combo, 0); }; postMethod1 = function (combo) { submit(combo, 1); }; postMethod2 = function (combo) { submit(combo, 2); }; c1.documentReady(function () { wijmo.Control.getControl("#chartType").selectedIndex = indexes[0]; wijmo.Control.getControl("#stacking").selectedIndex = indexes[1]; wijmo.Control.getControl("#selection").selectedIndex = indexes[2]; isDocumentReady = true; }); </script>} @section Settings{ <form method="post"> <span>@Html.Raw(FlexChartRes.Selection_ChartType)</span> <c1-combo-box id="chartType" name="type" selected-index-changed="postMethod0" style="width: 130px"> <c1-items-source source-collection="ChartOptions.ChartTypes"></c1-items-source> </c1-combo-box> <span>@Html.Raw(FlexChartRes.Selection_Stacking)</span> <c1-combo-box id="stacking" name="stack" selected-index-changed="postMethod1" style="width: 130px"> <c1-items-source source-collection="ChartOptions.Stackings"></c1-items-source> </c1-combo-box> <span>@Html.Raw(FlexChartRes.Selection_SelectionMode)</span> <c1-combo-box name="selectionmode" id="selection" selected-index-changed="postMethod2" style="width: 130px"> <c1-items-source source-collection="ChartOptions.SelectionModes"></c1-items-source> </c1-combo-box> </form> } @section Description{ <p>@Html.Raw(FlexChartRes.Selection_Text0)</p> <p>@Html.Raw(FlexChartRes.Selection_Text1)</p> <p>@Html.Raw(FlexChartRes.Selection_Text2)</p> } |