FlexChart
FlexChart
BoxWhisker
Features
Sample
Settings
Description
BoxWhisker series is used to compare distributions between different sets of numerical data.
Source
BoxWhiskerController.cs
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);
}
}
}
BoxWhisker.cshtml
@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>
}
Documentation