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 31 32 33 34 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;using C1.Web.Mvc;using C1.Web.Mvc.Serialization;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 | @model ChartOptions@{ ViewBag.DemoSettings = true; IEnumerable<Fruit> fruits = Fruit.GetFruitsSales();}@(Html.C1().FlexChart().Bind("Name", fruits).ChartType(Model.CType).Stacking(Model.CStack).SelectionMode(Model.CSelectionMode).Series(sers =>{ sers.Add().Binding("MarPrice").Name("March"); sers.Add().Binding("AprPrice").Name("April"); sers.Add().Binding("MayPrice").Name("May");}))@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{ @using (Html.BeginForm()) { @Html.ValidationSummary(true) <span>@Html.Raw(Resources.FlexChart.Selection_ChartType)</span> @(Html.C1().ComboBox().Id("chartType").Name("type").Width(130) .Bind(ChartOptions.ChartTypes).OnClientSelectedIndexChanged("postMethod0")) <span>@Html.Raw(Resources.FlexChart.Selection_Stacking)</span> @(Html.C1().ComboBox().Id("stacking").Name("stack").Width(130) .Bind(ChartOptions.Stackings).OnClientSelectedIndexChanged("postMethod1")) <span>@Html.Raw(Resources.FlexChart.Selection_SelectionMode)</span> @(Html.C1().ComboBox().Id("selection").Name("selectionmode").Width(130) .Bind(ChartOptions.SelectionModes).OnClientSelectedIndexChanged("postMethod2")) }}@section Description{ <p>@Html.Raw(Resources.FlexChart.Selection_Text0)</p> <p>@Html.Raw(Resources.FlexChart.Selection_Text1)</p> <p>@Html.Raw(Resources.FlexChart.Selection_Text2)</p>} |