Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

An error bar chart is a type of an error chart used to show variations in data from its original value.

In this section you will be shown how you can:

  • Create a simple error bar chart

  • Configure properties of error bars

Creating a Simple Error Bar Chart

As an example, we will create an error bar chart that compares the lifespan of systems at the Daly City Serramonte, Bakersfield Central, Garden Groove Harbour stores.

An error bar chart thus created looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Machinery lifespan range", "subcaption": "Means & standard deviations", "xAxisName": "Systems", "yAxisName": "Life Span", "numberSuffix": " Years", "halfErrorBar": "0", "paletteColors": "#0075c2,#1aaf5d,#f2c500", "showValues": "0", "errorBarColor": "666666", "bgColor": "#ffffff", "showBorder": "0", "showCanvasBorder": "0", "usePlotGradientColor": "0", "showXAxisLine": "1", "axisLineAlpha": "25", "legendBorderAlpha": "0", "legendShadow": "0", "legendBgAlpha": "0", "showShadow": "0", "showAlternateHgridColor": "0", "showHoverEffect": "1" }, "categories": [ { "category": [ { "label": "Central AC" }, { "label": "Computers" }, { "label": "Bar-code Scanners" }, { "label": "Packaging Machines" }, { "label": "Chilling Compartments" } ] } ], "dataset": [ { "seriesname": "Daly City Serramonte", "data": [ { "value": "8", "errorvalue": "2" }, { "value": "3", "errorvalue": "0.5" }, { "value": "2", "errorvalue": "1" }, { "value": "6", "errorvalue": "1.8" }, { "value": "8", "errorvalue": "1.2" } ] }, { "seriesname": "Bakersfield Central", "data": [ { "value": "7", "errorvalue": "1" }, { "value": "4", "errorvalue": "0.5" }, { "value": "2", "errorvalue": "1" }, { "value": "4", "errorvalue": "0.8" }, { "value": "7", "errorvalue": "1" } ] }, { "seriesname": "Garden Groove harbour", "data": [ { "value": "9", "errorvalue": "2" }, { "value": "3", "errorvalue": "0.7" }, { "value": "3", "errorvalue": "1" }, { "value": "6", "errorvalue": "1.8" }, { "value": "7", "errorvalue": "1.2" } ] } ] }
{
    "chart": {
        "caption": "Machinery lifespan range",
        "subcaption": "Means & standard deviations",
        "xAxisName": "Systems",
        "yAxisName": "Life Span",
        "numberSuffix": " Years",
        "halfErrorBar": "0",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500",
        "showValues": "0",
        "errorBarColor": "666666",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "showCanvasBorder": "0",
        "usePlotGradientColor": "0",
        "showXAxisLine": "1",
        "axisLineAlpha": "25",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendBgAlpha": "0",
        "showShadow": "0",
        "showAlternateHgridColor": "0",
        "showHoverEffect": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Central AC"
                },
                {
                    "label": "Computers"
                },
                {
                    "label": "Bar-code Scanners"
                },
                {
                    "label": "Packaging Machines"
                },
                {
                    "label": "Chilling Compartments"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Daly City Serramonte",
            "data": [
                {
                    "value": "8",
                    "errorvalue": "2"
                },
                {
                    "value": "3",
                    "errorvalue": "0.5"
                },
                {
                    "value": "2",
                    "errorvalue": "1"
                },
                {
                    "value": "6",
                    "errorvalue": "1.8"
                },
                {
                    "value": "8",
                    "errorvalue": "1.2"
                }
            ]
        },
        {
            "seriesname": "Bakersfield Central",
            "data": [
                {
                    "value": "7",
                    "errorvalue": "1"
                },
                {
                    "value": "4",
                    "errorvalue": "0.5"
                },
                {
                    "value": "2",
                    "errorvalue": "1"
                },
                {
                    "value": "4",
                    "errorvalue": "0.8"
                },
                {
                    "value": "7",
                    "errorvalue": "1"
                }
            ]
        },
        {
            "seriesname": "Garden Groove harbour",
            "data": [
                {
                    "value": "9",
                    "errorvalue": "2"
                },
                {
                    "value": "3",
                    "errorvalue": "0.7"
                },
                {
                    "value": "3",
                    "errorvalue": "1"
                },
                {
                    "value": "6",
                    "errorvalue": "1.8"
                },
                {
                    "value": "7",
                    "errorvalue": "1.2"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'errorbar2d',
    renderAt: 'chart-container',
    width: '600',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Machinery lifespan range",
            "subcaption": "Means & standard deviations",
            "xAxisName": "Systems",
            "yAxisName": "Life Span",
            "numberSuffix": " Years",
            "halfErrorBar": "0",
            "paletteColors": "#0075c2,#1aaf5d,#f2c500",
            "showValues": "0",
            "errorBarColor": "666666",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "usePlotGradientColor": "0",
            "showXAxisLine": "1",
            "axisLineAlpha": "25",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "legendBgAlpha": "0",
            "showShadow": "0",
            "showAlternateHgridColor": "0",
            "showHoverEffect": "1"
        },
        "categories": [{
            "category": [{
                "label": "Central AC"
            }, {
                "label": "Computers"
            }, {
                "label": "Bar-code Scanners"
            }, {
                "label": "Packaging Machines"
            }, {
                "label": "Chilling Compartments"
            }]
        }],
        "dataset": [{
            "seriesname": "Daly City Serramonte",
            "data": [{
                "value": "8",
                "errorvalue": "2"
            }, {
                "value": "3",
                "errorvalue": "0.5"
            }, {
                "value": "2",
                "errorvalue": "1"
            }, {
                "value": "6",
                "errorvalue": "1.8"
            }, {
                "value": "8",
                "errorvalue": "1.2"
            }]
        }, {
            "seriesname": "Bakersfield Central",
            "data": [{
                "value": "7",
                "errorvalue": "1"
            }, {
                "value": "4",
                "errorvalue": "0.5"
            }, {
                "value": "2",
                "errorvalue": "1"
            }, {
                "value": "4",
                "errorvalue": "0.8"
            }, {
                "value": "7",
                "errorvalue": "1"
            }]
        }, {
            "seriesname": "Garden Groove harbour",
            "data": [{
                "value": "9",
                "errorvalue": "2"
            }, {
                "value": "3",
                "errorvalue": "0.7"
            }, {
                "value": "3",
                "errorvalue": "1"
            }, {
                "value": "6",
                "errorvalue": "1.8"
            }, {
                "value": "7",
                "errorvalue": "1.2"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to create an error bar chart:

Attribute Description

label

It is used to specify the label for the data item. The label is rendered on the x-axis. This attribute belongs to the category object, which belongs to the categories object.

value

It is used to specify the numeric value for a data item. This value will be plotted on the chart. This attribute belongs to the data object, which belongs to the dataset object.

errorValue

It is used to specify the error value that will be plotted as the error bar on the chart. This attribute belongs to the data object, which belongs to the dataset object.

Error Bar Configuration

You can customize the cosmetic properties of error bars to change their appearance.

An error bar chart, after customizing the error bars, looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "xaxisname": "Systems", "yaxisname": "Life Span (years)", "caption": "Systems Life Span - Top 3 stores", "subcaption": "(With Error Values)", "numbersuffix": " Years", "halferrorbar": "0", "errorBarColor": "#990000", "errorBarAlpha": "50", "errorBarThickness": "2", "errorBarWidthPercent": "30" }, "categories": [ { "category": [ { "label": "Central AC" }, { "label": "Computers" }, { "label": "Bar-code Scanners" }, { "label": "Packaging Machines" }, { "label": "Chilling Compartments" } ] } ], "dataset": [ { "seriesname": "Daly City Serramonte", "data": [ { "value": "8", "errorvalue": "2" }, { "value": "3", "errorvalue": "0.5" }, { "value": "2", "errorvalue": "1" }, { "value": "6", "errorvalue": "1.8" }, { "value": "8", "errorvalue": "1.2" } ] }, { "seriesname": "Bakersfield Central", "data": [ { "value": "7", "errorvalue": "1" }, { "value": "4", "errorvalue": "0.5" }, { "value": "2", "errorvalue": "1" }, { "value": "4", "errorvalue": "0.8" }, { "value": "7", "errorvalue": "1" } ] }, { "seriesname": "Garden Groove harbour", "data": [ { "value": "9", "errorvalue": "2" }, { "value": "3", "errorvalue": "0.7" }, { "value": "3", "errorvalue": "1" }, { "value": "6", "errorvalue": "1.8" }, { "value": "7", "errorvalue": "1.2" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "xaxisname": "Systems",
        "yaxisname": "Life Span (years)",
        "caption": "Systems Life Span - Top 3 stores",
        "subcaption": "(With Error Values)",
        "numbersuffix": " Years",
        "halferrorbar": "0",
        "errorBarColor": "#990000",
        "errorBarAlpha": "50",
        "errorBarThickness": "2",
        "errorBarWidthPercent": "30"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Central AC"
                },
                {
                    "label": "Computers"
                },
                {
                    "label": "Bar-code Scanners"
                },
                {
                    "label": "Packaging Machines"
                },
                {
                    "label": "Chilling Compartments"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Daly City Serramonte",
            "data": [
                {
                    "value": "8",
                    "errorvalue": "2"
                },
                {
                    "value": "3",
                    "errorvalue": "0.5"
                },
                {
                    "value": "2",
                    "errorvalue": "1"
                },
                {
                    "value": "6",
                    "errorvalue": "1.8"
                },
                {
                    "value": "8",
                    "errorvalue": "1.2"
                }
            ]
        },
        {
            "seriesname": "Bakersfield Central",
            "data": [
                {
                    "value": "7",
                    "errorvalue": "1"
                },
                {
                    "value": "4",
                    "errorvalue": "0.5"
                },
                {
                    "value": "2",
                    "errorvalue": "1"
                },
                {
                    "value": "4",
                    "errorvalue": "0.8"
                },
                {
                    "value": "7",
                    "errorvalue": "1"
                }
            ]
        },
        {
            "seriesname": "Garden Groove harbour",
            "data": [
                {
                    "value": "9",
                    "errorvalue": "2"
                },
                {
                    "value": "3",
                    "errorvalue": "0.7"
                },
                {
                    "value": "3",
                    "errorvalue": "1"
                },
                {
                    "value": "6",
                    "errorvalue": "1.8"
                },
                {
                    "value": "7",
                    "errorvalue": "1.2"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'errorbar2d',
    renderAt: 'chart-container',
    width: '600',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "xaxisname": "Systems",
            "yaxisname": "Life Span (years)",
            "caption": "Systems Life Span - Top 3 stores",
            "subcaption": "(With Error Values)",
            "numbersuffix": " Years",
            //Error bar configuration
            "halferrorbar": "0",
            "errorBarColor": "#990000",
            "errorBarAlpha": "50",
            "errorBarThickness": "2",
            "errorBarWidthPercent": "30"
        },
        "categories": [{
            "category": [{
                "label": "Central AC"
            }, {
                "label": "Computers"
            }, {
                "label": "Bar-code Scanners"
            }, {
                "label": "Packaging Machines"
            }, {
                "label": "Chilling Compartments"
            }]
        }],
        "dataset": [{
            "seriesname": "Daly City Serramonte",
            "data": [{
                "value": "8",
                "errorvalue": "2"
            }, {
                "value": "3",
                "errorvalue": "0.5"
            }, {
                "value": "2",
                "errorvalue": "1"
            }, {
                "value": "6",
                "errorvalue": "1.8"
            }, {
                "value": "8",
                "errorvalue": "1.2"
            }]
        }, {
            "seriesname": "Bakersfield Central",
            "data": [{
                "value": "7",
                "errorvalue": "1"
            }, {
                "value": "4",
                "errorvalue": "0.5"
            }, {
                "value": "2",
                "errorvalue": "1"
            }, {
                "value": "4",
                "errorvalue": "0.8"
            }, {
                "value": "7",
                "errorvalue": "1"
            }]
        }, {
            "seriesname": "Garden Groove harbour",
            "data": [{
                "value": "9",
                "errorvalue": "2"
            }, {
                "value": "3",
                "errorvalue": "0.7"
            }, {
                "value": "3",
                "errorvalue": "1"
            }, {
                "value": "6",
                "errorvalue": "1.8"
            }, {
                "value": "7",
                "errorvalue": "1.2"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to customize the error bars in an error bar chart:

Attribute Description

halfErrorBar

It is used to specify whether full error bars will be rendered instead of half error bars. Setting this attribute to 1 will show half error bars, setting it to 0 (default) will render full error bars.

errorBarColor

It is used to specify the hex code of the color that will be used to render the error bars.

errorBarAlpha

It is used to specify the transparency for the error bars. This attribute takes values between 0 (transparent) and 100 (opaque).

errorBarThickness

It is used to specify the thickness of the error bars, in pixels.

errorBarWidthPercent

It is used to configure the width of the error bars as a percentage of the column width.

Top