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 > } |