<h1>
    Box and Whisker Series
</h1>

<p>
    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.
</p>
<p>
    To create a Box and Whisker chart, follow these steps:
</p>

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

<div class="demo-settings">
    <label for="innerPoints">Show Inner Points: </label>
    <input id="innerPoints" type="checkbox"><br />
    <label for="outliers">Show Outliers: </label>
    <input id="outliers" type="checkbox"><br />
    <label for="btnRandomize">Randomize Data</label>
    <button id="btnRandomize" class="btn btn-default">
        Go
    </button>
</div>

@(Html.C1().FlexChart().Id("theChart")
    .BindingX("country")
    .Tooltip(t=>t.Content("{seriesName}: <b>{x}</b>"))
)