FlexChart
FlexChart
BoxWhisker
BoxWhisker series is normally 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 normally 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 MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Chart; 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" , new object []{QuartileCalculation.InclusiveMedian.ToString(), QuartileCalculation.ExclusiveMedian.ToString()}} }, 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 | @model IEnumerable< SalesAnalysis > @ { ViewBag.DemoSettings = true ; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var showOutliers = demoSettingsModel.GetBool( "ShowOutliers" , false ); var rotated = demoSettingsModel.GetBool( "Rotated" , false ); } @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> } < c1-flex-chart id = "@demoSettingsModel.ControlId" binding = "Downloads" binding-x = "Country" height = "300px" rotated = "@rotated" > < c1-items-source source-collection = "Model" /> < c1-flex-chart-boxwhisker name = "Downloads" show-outliers = "@showOutliers" /> < c1-flex-chart-boxwhisker binding = "Sales" name = "Sales" show-outliers = "@showOutliers" /> < c1-flex-chart-boxwhisker binding = "Queries" name = "Queries" show-outliers = "@showOutliers" /> </ c1-flex-chart > @section Description{ < p > @Html .Raw(FlexChartRes.BoxWhisker_Text0)</ p > } |