Error Bars

The ErrorBar class extends the regular Series class to provide error bars that can be added on top of the regular series data.

To create a series with error bars, follow these steps:

Create an ErrorBar series,
Configure the ErrorBar series as you would regular series, setting their binding, chartType, and style properties for example, and
Set the ErrorBar's value and errorAmount properties to the size of the error bars to be added to the data points.

Chart Type:
Error:
Randomize Data

// This file locates: "Scripts/Lesson/C1FlexChart/AnalyticsErrorBars.js".
c1.documentReady(function(){
    var theChart = wijmo.Control.getControl('#theChart');
    var chartType = wijmo.Control.getControl('#chartType');
    var errorAmount = wijmo.Control.getControl('#errorAmount');
 
    theChart.itemsSource = getData();
 
    // create an ErrorBar series and add it to the Chart
    var errorBar = new wijmo.chart.analytics.ErrorBar();
    errorBar.errorBarStyle = {
        stroke: 'darkred',
        strokeWidth: 3
    };
    theChart.series.push(errorBar);
 
    // select chart type
    chartType.textChanged.addHandler(function (s, e) {
        theChart.chartType = s.text;
    });
 
    // select error mode/amount
    errorAmount.textChanged.addHandler(function (s, e) {
        var value = s.selectedItem.value;
        errorBar.value = value;
        errorBar.binding = value != null ? 'amount' : 'amount,errorPlus,errorMinus';
        errorBar.errorAmount = s.selectedItem.mode;
    });
    errorAmount.itemsSource = [
      { hdr: 'Bound Error Values', value: null, mode: 'Custom' },
      { hdr: '15%', value: .15, mode: 'Percentage' },
      { hdr: '5 units', value: 5, mode: 'FixedValue' },
      { hdr: '1.5 Std Dev', value: 1.5, mode: 'StandardDeviation' },
      { hdr: 'Standard Error', value: 1, mode: 'StandardError' },
      { hdr: 'Plus 5, Minus 10', value: { plus: 5, minus: 10 }, mode: 'Custom' }
    ];
 
    // randomize the data
    document.getElementById('btnRandomize').addEventListener('click', function () {
        theChart.itemsSource = getData();
    });
 
    // generate some random data
    function getData() {
        var arr = [],
                date = new Date();
        for (var i = 0; i < 10; i++) {
            arr.push({
                date: date,
                amount: 20 + 80 * Math.random(),
                errorPlus: 10 * Math.random(),
                errorMinus: 10 * Math.random(),
            });
            date = wijmo.DateTime.addMonths(date, 1);
        }
        return arr;
    }
});

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

@{
    var chartTypes = new[] { "Column", "Bar", "Line", "LineSymbols", "Area" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text2)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text5)
    </li>
</ol>
 
<div class="demo-settings">
    <label for="chartType">@Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text6) </label>
    @Html.C1().ComboBox().Id("chartType").Bind(chartTypes)
    <br />
    <label for="errorAmount">@Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text7) </label>
    @Html.C1().ComboBox().Id("errorAmount").DisplayMemberPath("hdr")
    <br />
    <label for="btnRandomize">@Html.Raw(Resources.C1FlexChart.AnalyticsErrorBars_Text8)</label>
    <button id="btnRandomize" class="btn btn-default">
        @Resources.Resource.Btn_Go
    </button>
</div>
 
@(Html.C1().FlexChart().Id("theChart")
    .BindingX("date")
    .AxisX(x => x.Format("MMM yy"))
)