Introduction to Error Chart
An error chart is used to show the extent of uncertainty in information relative to an average value. Error charts can be used to show the range of values that can be taken up by a data point, instead of being restricted to a point value.
In this section, you will be introduced to the:
Basics of an Error Chart
An error chart shows the range of possible errors or deviations that might occur in the given data. Errors are indicated by distinct I-shaped bars that are both positive and negative. Typically the I-bars represent the standard deviation in a measurement indicating the degree of variance observed in a data point. Error charts give a general idea of the accuracy of information or, conversely, the amount of variation in data from it’s expected value.
Use of Error Charts
Following are a few areas where error charts are commonly used:
-
Appliance testing
-
Scientific research
-
Monitoring systems
-
Weather analysis
-
Human resource management
Types of Error Charts
At present, there are three types of multi-series error charts available in the FusionCharts XT Suite:
Error Bar Chart
An error bar chart 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"
}
]
}
]
}<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: '550',
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>Error Line Chart
An error line chart looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"xaxisname": "Category",
"yaxisname": "Item (%)",
"numberSuffix": "%",
"caption": "Estimated Procurement from Top 2 Suppliers",
"subcaption": "(Next Year)",
"showvalues": "0",
"halferrorbar": "0",
"plottooltext": "$seriesname, $label: $value%"
},
"categories": [
{
"category": [
{
"label": "Food & Beverage"
},
{
"label": "Apparel"
},
{
"label": "Electronics"
},
{
"label": "Baby Products"
}
]
}
],
"dataset": [
{
"seriesname": "MB Suppliers",
"data": [
{
"value": "28",
"errorvalue": "2"
},
{
"value": "16",
"errorvalue": "2"
},
{
"value": "24",
"errorvalue": "3"
},
{
"value": "32",
"errorvalue": "2"
}
]
},
{
"seriesname": "VST Group Co Ltd ",
"data": [
{
"value": "12",
"errorvalue": "2"
},
{
"value": "30",
"errorvalue": "4"
},
{
"value": "35",
"errorvalue": "5"
},
{
"value": "14",
"errorvalue": "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: 'errorline',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"xaxisname": "Category",
"yaxisname": "Item (%)",
"numberSuffix": "%",
"caption": "Estimated Procurement from Top 2 Suppliers",
"subcaption": "(Next Year)",
"showvalues": "0",
"halferrorbar": "0",
"plottooltext": "$seriesname, $label: $value%"
},
"categories": [{
"category": [{
"label": "Food & Beverage"
}, {
"label": "Apparel"
}, {
"label": "Electronics"
}, {
"label": "Baby Products"
}]
}],
"dataset": [{
"seriesname": "MB Suppliers",
"data": [{
"value": "28",
"errorvalue": "2"
}, {
"value": "16",
"errorvalue": "2"
}, {
"value": "24",
"errorvalue": "3"
}, {
"value": "32",
"errorvalue": "2"
}]
}, {
"seriesname": "VST Group Co Ltd ",
"data": [{
"value": "12",
"errorvalue": "2"
}, {
"value": "30",
"errorvalue": "4"
}, {
"value": "35",
"errorvalue": "5"
}, {
"value": "14",
"errorvalue": "2"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Error Scatter Chart
An error scatter chart looks like this:
FusionCharts will load here..
{
"chart": {
"xaxisname": "Month",
"yaxisname": "Revenue (In USD)",
"caption": "Revenue forecast",
"subcaption": "For Next Year",
"halfverticalerrorbar": "0",
"showlegend": "0",
"bgColor": "#ffffff",
"showBorder": "0",
"numberPrefix": "$",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"categories": [
{
"category": [
{
"label": "Jan",
"x": "20"
},
{
"label": "Feb",
"x": "30"
},
{
"label": "Mar",
"x": "40"
},
{
"label": "Apr",
"x": "50"
},
{
"label": "May",
"x": "60"
},
{
"label": "Jun",
"x": "70"
},
{
"label": "Jul",
"x": "80"
},
{
"label": "Aug",
"x": "90"
},
{
"label": "Sep",
"x": "100"
},
{
"label": "Oct",
"x": "110"
},
{
"label": "Nov",
"x": "120"
},
{
"label": "Dec",
"x": "130"
}
]
}
],
"dataset": [
{
"seriesname": "This Year",
"color": "",
"anchorradius": "8",
"anchorbgcolor": "#1aaf5d",
"data": [
{
"y": "450000",
"x": "20",
"verticalErrorValue": "50000"
},
{
"y": "860000",
"x": "30",
"verticalErrorValue": "69000"
},
{
"y": "750000",
"x": "40",
"verticalErrorValue": "69000"
},
{
"y": "570000",
"x": "50",
"verticalErrorValue": "60000"
},
{
"y": "910000",
"x": "60",
"verticalErrorValue": "50000"
},
{
"y": "580000",
"x": "70",
"verticalErrorValue": "55000"
},
{
"y": "610000",
"x": "80",
"verticalErrorValue": "87000"
},
{
"y": "620000",
"x": "90",
"verticalErrorValue": "45000"
},
{
"y": "520000",
"x": "100",
"verticalErrorValue": "59000"
},
{
"y": "530000",
"x": "110",
"verticalErrorValue": "72000"
},
{
"y": "950000",
"x": "120",
"verticalErrorValue": "69000"
},
{
"y": "770000",
"x": "130",
"verticalErrorValue": "69000"
}
]
}
]
}<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: 'errorscatter',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"xaxisname": "Month",
"yaxisname": "Revenue (In USD)",
"caption": "Revenue forecast",
"subcaption": "For Next Year",
"halfverticalerrorbar": "0",
"showlegend": "0",
"bgColor": "#ffffff",
"showBorder": "0",
"numberPrefix": "$",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"categories": [{
"category": [{
"label": "Jan",
"x": "20",
}, {
"label": "Feb",
"x": "30",
}, {
"label": "Mar",
"x": "40",
}, {
"label": "Apr",
"x": "50",
}, {
"label": "May",
"x": "60",
}, {
"label": "Jun",
"x": "70",
}, {
"label": "Jul",
"x": "80",
}, {
"label": "Aug",
"x": "90",
}, {
"label": "Sep",
"x": "100",
}, {
"label": "Oct",
"x": "110",
}, {
"label": "Nov",
"x": "120",
}, {
"label": "Dec",
"x": "130",
}]
}],
"dataset": [{
"seriesname": "This Year",
"color": "",
"anchorradius": "8",
"anchorbgcolor": "#1aaf5d",
"data": [{
"y": "450000",
"x": "20",
"verticalErrorValue": "50000"
}, {
"y": "860000",
"x": "30",
"verticalErrorValue": "69000"
}, {
"y": "750000",
"x": "40",
"verticalErrorValue": "69000"
}, {
"y": "570000",
"x": "50",
"verticalErrorValue": "60000"
}, {
"y": "910000",
"x": "60",
"verticalErrorValue": "50000"
}, {
"y": "580000",
"x": "70",
"verticalErrorValue": "55000"
}, {
"y": "610000",
"x": "80",
"verticalErrorValue": "87000"
}, {
"y": "620000",
"x": "90",
"verticalErrorValue": "45000"
}, {
"y": "520000",
"x": "100",
"verticalErrorValue": "59000"
}, {
"y": "530000",
"x": "110",
"verticalErrorValue": "72000"
}, {
"y": "950000",
"x": "120",
"verticalErrorValue": "69000"
}, {
"y": "770000",
"x": "130",
"verticalErrorValue": "69000"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Features of an Error Chart
The distinct features of an error chart include:
-
Supports both half and full error bars for positive and negative errors respectively.
-
Provides options to configure error bars by changing their color, thickness, and transparency.
-
Automatically customizes the width of the error bars depending on the importance of the deviation from actual data.