Telerik UI for Windows 8 HTML

Error bars are used in charts when there is not one definite value for a data point but a range of values. Usually the mean of these values or the one that is most certain is used as a data point in the series. To visualize the possibility of an error (a standard deviation of uncertainty, a standard error or an interval of other expected values), error bars are drawn in a chart. Since Q1 2014, RadChart features error bars in its Bar, Column, Line, Area, Scatter, Scatter Line and Bubble series. This article will show you how to display and then customize error bars.

Displaying Error Bars

To show error bars in RadChart, you can assign field from the data source of the chart that have the error values calculated already or you can specify them through the value, xValue and yValue options of the series.errorBars property. In the latter case, RadChart or your own custom function will perform the calculation. Read on to learn more about these options.

Assigning Data Source Fields

Depending on the series type, you can use the following fields to set the fields in the chart data source from which the error bars will be populated:

  • errorLowField: Use this property in Bar, Column, Area and Line series. It must contain the error bar low value.

  • errorHighField: Use this property in Bar, Column, Area and Line series. It must contain the error bar high (upper) value.

  • xErrorLowField: Use this property in Scatter, Scatter Line and Bubble series. It must contain the low (left) value for the X-coordinate.

  • xErrorHighField: Use this property in Scatter, Scatter Line and Bubble series. It must contain the high (right) value for the X-coordinate.

  • yErrorLowField: Use this property in Scatter, Scatter Line and Bubble series. It must contain the low value for the Y-coordinate.

  • yErrorHighValue: Use this property in Scatter, Scatter Line and Bubble series. It must contain the high (upper) value for the Y-coordinate.

In Code Listing 1 below, you can see a Scatter chart definition with all related error fields assigned. Figure 1 displays the result of this definition.

Code Listing 1: Scatter Chart with Error Bar Fields Assigned Copy imageCopy
<div id="chart1" data-win-control="Telerik.UI.RadChart" data-win-options="{
         series: [
            {
                type: 'scatter',
                xField: 'temperature',
                xErrorLowField: 'low',
                xErrorHighField: 'high',
                yField: 'windSpeed',
                yErrorLowField: 'windLow',
                yErrorHighField: 'windHigh'
            }
         ],
         dataSource: {
            data: [
                { time: '10:30 AM', temperature: 22, low: 21.6, high: 22.3, windSpeed: 4, windLow: 3.7, windHigh: 4.5 },
                { time: '11:30 AM', temperature: 26, low: 25.2, high: 27, windSpeed: 2, windLow: 1.3, windHigh: 2.8 },
                { time: '12:30 PM', temperature: 23, low: 22.6, high: 23.7, windSpeed: 6, windLow: 5.5, windHigh: 6.5 },
                { time: '1:30 PM', temperature: 24, low: 23.8, high: 24.5, windSpeed: 5, windLow: 4.2, windHigh: 5.5 },
                { time: '2:30 PM', temperature: 28, low: 27.3, high: 29, windSpeed: 3, windLow: 2.2, windHigh: 3.6 }
         ]},
         xAxis: {
            min: 20,
            max: 30,
            title: {
                text: 'Temperature (Celsius)'
            }
         },
         yAxis: {
            title: {
                text: 'Wind Speed (m/s)'
            }
        },
         tooltip: {
            visible: true,
            template: '<strong> #=dataItem.time# </strong> Temperature: #=value.x#, Wind Speed: #=value.y#'
         },
         theme: 'light'
    }"></div>
Figure 1: Scatter Chart with Error Bars Assigned Through Data Source
chart-error-bars-fields

Calculating the Error Value

If you want the chart to calculate error bars based on already present data in the series or even if you want to do this calculation yourself, set series.errorBars.value (for Column, Bar, Area and Line series) or xValue/yValue (for Scatter, ScatterLine and Bubble series) to one of the following values:

  • "stderr": The standard error of the series values will be used to calculate the point low and high value.

  • "stddev(n)": The standard deviation of the series values will be used to calculate the point low and high value. You can specify a number between the parentheses that will be multiplied by the calculated standard deviation.

  • "percentage(n)": A percentage (the exact number is specified in the parentheses) of the point value will be used to calculate the point low and high value.

  • A numeric value of your choice that will be subtracted and added to the point value to calculate the low and high value.

  • An array that holds the numbers that will be subtracted from the point value to calculate the low and high value.

  • A function that returns the error bar point values. The series instance, the corresponding item from the data source and the series data point value(s) are passed as arguments to this function.

In the example shown in Code Listing 2 below, the error bars values are calculated using a percentage value.

Code Listing 2: Scatter Chart with Error Bar Value Assigned Copy imageCopy
<div id="chart2" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [
       {
    type: 'scatter',
           xField: 'temperature',
           yField: 'windSpeed',
    errorBars: {
        xValue: 'percentage(3)',
        yValue: 'percentage(10)'
    }
       }
    ],
    dataSource: {
       data: [
           { time: '10:30 AM', temperature: 22, windSpeed: 4 },
           { time: '11:30 AM', temperature: 26, windSpeed: 2 },
           { time: '12:30 PM', temperature: 23, windSpeed: 6 },
           { time: '1:30 PM', temperature: 24, windSpeed: 5 },
           { time: '2:30 PM', temperature: 28, windSpeed: 3 }
    ]},
    xAxis: {
        min: 20,
        max: 30,
        title: {
            text: 'Temperature (Celsius)'
        }
    },
    yAxis: {
        title: {
            text: 'Wind Speed (m/s)'
        }
    },
    tooltip: {
        visible: true,
        template: '<strong> #=dataItem.time# </strong> Temperature: #=value.x#, Wind Speed: #=value.y#'
    },
    theme: 'light'
}"></div>

In Figure 2 you can see that the error bars are calculated as percentage of the data point values, therefore they are symmetrical.

Figure 2: Scatter Chart with Error Bars Assigned Through Value Properties
chart-error-bars-value

Customizing Error Bars

You can also customize the appearance of error bars. The following properties allow you to change the color, size and shape of error bars.

  • endCaps: A Boolean property that determines whether the error bars caps will be displayed. By default, the caps are visible (option value is true).

  • color: Use this property to set a custom color to the error bars.

  • line: Use this property to customize the error bar lines. It allows you to set width (in pixels) and dash type (one of "solid", "dot", "dash", "longDash", "dashDot", "longDashDot", "longDashDotDot").

You can see an example that changes the values of all three options below.

Code Listing 3: Scatter Chart with Customized Error Bars Copy imageCopy
<div id="chart2" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'scatter',
        xField: 'temperature',
        yField: 'windSpeed',
        errorBars: {
            xValue: 'percentage(3)',
            yValue: 'percentage(10)',
            color: '#33ccff',
            line: {
                width: 1.5,
                dashType: 'longDash'
            },
            endCaps: false
        }
    }
    ],
    dataSource: {
       data: [
           { time: '10:30 AM', temperature: 22, windSpeed: 4 },
           { time: '11:30 AM', temperature: 26, windSpeed: 2 },
           { time: '12:30 PM', temperature: 23, windSpeed: 6 },
           { time: '1:30 PM', temperature: 24, windSpeed: 5 },
           { time: '2:30 PM', temperature: 28, windSpeed: 3 }
    ]},
    xAxis: {
        min: 20,
        max: 30,
        title: {
            text: 'Temperature (Celsius)'
        }
    },
    yAxis: {
        title: {
            text: 'Wind Speed (m/s)'
        }
    },
    tooltip: {
        visible: true,
        template: '<strong> #=dataItem.time# </strong> Temperature: #=value.x#, Wind Speed: #=value.y#'
    },
    theme: 'light'
}"></div>
Figure 3: Scatter Chart with Customized Error Bars
chart-error-bars-customized

See Also