@{
    var chartTypes = new[] { "Column", "Bar", "Line", "LineSymbols", "Area" };
}

<h1>
    Error Bars
</h1>
<p>
    The ErrorBar class extends the regular Series class
    to provide error bars that can be added on top of the
    regular series data.
</p>
<p>
    To create a series with error bars, follow these steps:
</p>
<ol>
    <li>
        Create an ErrorBar series,
    </li>
    <li>
        Configure the ErrorBar series as you would regular
        series, setting their <b>binding</b>, <b>chartType</b>,
        and <b>style</b> properties for example, and
    </li>
    <li>
        Set the ErrorBar's <b>value</b> and <b>errorAmount</b>
        properties to the size of the error bars to be added
        to the data points.
    </li>
</ol>

<div class="demo-settings">
    <label for="chartType">Chart Type: </label>
    @Html.C1().ComboBox().Id("chartType").Bind(chartTypes)
    <br />
    <label for="errorAmount">Error: </label>
    @Html.C1().ComboBox().Id("errorAmount").DisplayMemberPath("hdr")
    <br />
    <label for="btnRandomize">Randomize Data</label>
    <button id="btnRandomize" class="btn btn-default">
        Go
    </button>
</div>

@(Html.C1().FlexChart().Id("theChart")
    .BindingX("date")
    .AxisX(x => x.Format("MMM yy"))
)