FlexChart
FlexChart
BoxWhisker
BoxWhisker series is used to compare distributions between different sets of numerical data.
Features
Settings
Group Width: 0.8
Gap Width: 0.1
Show Mean Line: False
Show Mean Marker: False
Show Inner Points: False
Show Outliers: False
Rotated: False
Show Label: False
Quartile Calculation: InclusiveMedian
Description
BoxWhisker series is used to compare distributions between different sets of numerical data.
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 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;namespace MvcExplorer.Controllers{ public partial class FlexChartController : Controller { List<SalesAnalysis> _analysisData = SalesAnalysis.GetData(); public ActionResult BoxWhisker() { var width = new object[] { 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 }; var boolValues = new object[] { false, true }; var settings = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"GroupWidth", width}, {"GapWidth", width}, {"ShowMeanLine", boolValues}, {"ShowMeanMarker", boolValues}, {"ShowInnerPoints", boolValues}, {"ShowOutliers", boolValues}, {"Rotated", boolValues}, {"ShowLabel", boolValues}, {"QuartileCalculation", Enum.GetValues(typeof(C1.Web.Mvc.Chart.QuartileCalculation)).Cast<object>().ToArray()} }, DefaultValues = new Dictionary<string, object> { {"GapWidth", "0.1"}, {"GroupWidth", "0.8"} } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(_analysisData); } }} |
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 | @model IEnumerable<SalesAnalysis>@section Scripts{<script> function setProperty(control, property, value) { control.series.forEach(function (serie) { serie[property] = value; }); } function customChangeGroupWidth(control, value) { setProperty(control, 'groupWidth', value); } function customChangeGapWidth(control, value) { setProperty(control, 'gapWidth', value); } function customChangeShowMeanLine(control, value) { setProperty(control, 'showMeanLine', value); } function customChangeShowMeanMarker(control, value) { setProperty(control, 'showMeanMarker', value); } function customChangeShowInnerPoints(control, value) { setProperty(control, 'showInnerPoints', value); } function customChangeShowOutliers(control, value) { setProperty(control, 'showOutliers', value); } function customChangeRotated(control, value) { control.rotated = value; } function customChangeShowLabel(control, value) { control.dataLabel.content = value ? '{y}' : ''; } function customChangeQuartileCalculation(control, value) { setProperty(control, 'quartileCalculation', value); }</script>}@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var showOutliers = demoSettingsModel.GetBool("ShowOutliers", false);}@(Html.C1().FlexChart() .Id(demoSettingsModel.ControlId) .Rotated(demoSettingsModel.GetBool("Rotated", false)) .Bind("Country", "Downloads", Model) .Series(ser => { ser.AddBoxWhisker().Name("Downloads").ShowOutliers(showOutliers); ser.AddBoxWhisker().Binding("Sales").Name("Sales").ShowOutliers(showOutliers); ser.AddBoxWhisker().Binding("Queries").Name("Queries").ShowOutliers(showOutliers); }))@section Description{ <p>@Html.Raw(Resources.FlexChart.BoxWhisker_Text0)</p>} |