Box and Whisker Series

Box and Whisker series (AKA boxplots) show groups of numerical data through their quartiles. They have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles.

To create a Box and Whisker chart, follow these steps:

Create one or more BoxWhisker series objects,
Configure the BoxWhisker series by setting their name and binding properties (they should be bound to properties that contain number arrays), and
Set additional properties such as showOutliers and showInnerPoints if you want to fine-tune the display.

Show Inner Points:
Show Outliers:
Randomize Data

// This file locates: "Scripts/Lesson/C1FlexChart/AnalyticsBoxplot.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    theChart.itemsSource = getData();
 
    // create BoxWhisker series for 'sales' and add it to the chart
    var sales = new wijmo.chart.analytics.BoxWhisker();
    sales.name = 'Sales';
    sales.binding = 'sales';
    sales.groupWidth = .7;
    sales.gapWidth = .2;
    theChart.series.push(sales);
 
    // create BoxWhisker series for 'expenses' and add it to the chart
    var expenses = new wijmo.chart.analytics.BoxWhisker();
    expenses.name = 'Expenses';
    expenses.binding = 'expenses';
    expenses.groupWidth = .7;
    expenses.gapWidth = .2;
    theChart.series.push(expenses);
 
    // customize the BoxWhisker series
    document.getElementById('innerPoints').addEventListener('click', function (e) {
        theChart.series.forEach(function (series) {
            series.showInnerPoints = e.target.checked;
        });
    });
    document.getElementById('outliers').addEventListener('click', function (e) {
        theChart.series.forEach(function (series) {
            series.showOutliers = e.target.checked;
        });
    });
 
    // randomize the data
    document.getElementById('btnRandomize').addEventListener('click', function () {
        theChart.itemsSource = getData();
    });
 
    // create some random data
    // the data items contain arrays of values rather than single values
    function getData() {
        var countries = 'US,Canada,Mexico,Germany,UK,France,Japan,Korea,China'.split(','),
            data = [];
        for (var i = 0; i < countries.length; i++) {
            data.push({
                country: countries[i],
                sales: getRandomArray(20, 10000),
                expenses: getRandomArray(20, 5000),
            });
        }
        return data;
    }
    function getRandomArray(count, max) {
        var arr = [];
        for (var i = 0; i < count; i++) {
            arr.push(
            Math.random() * max / 3 +
            Math.random() * max / 3 +
            Math.random() * max / 3);
        }
        return arr;
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AnalyticsBoxplot
        public ActionResult AnalyticsBoxplot()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text2)
</p>
 
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text5)
    </li>
</ol>
 
<div class="demo-settings">
    <label for="innerPoints">@Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text6) </label>
    <input id="innerPoints" type="checkbox"><br />
    <label for="outliers">@Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text7) </label>
    <input id="outliers" type="checkbox"><br />
    <label for="btnRandomize">@Html.Raw(Resources.C1FlexChart.AnalyticsBoxplot_Text8)</label>
    <button id="btnRandomize" class="btn btn-default">
        @Resources.Resource.Btn_Go
    </button>
</div>
 
@(Html.C1().FlexChart().Id("theChart")
    .BindingX("country")
    .Tooltip(t=>t.Content("{seriesName}: <b>{x}</b>"))
)