Error Charts
These chart types belong to PowerCharts XT.
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. 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
Error line chart
Error scatter chart (XY plot)
Features of Error Charts
The distinct features of error charts 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.
Now, let's move ahead and create our first error chart.
Error Bar Chart
An error bar chart is a type of an error chart used to show variations in data from its original value. 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.
To create an error bar chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render an error chart, seterrorBar2D.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.Set the
errorValueattribute to specify error value that will be plotted as the error bar on the chart. This attribute belongs to thedataobject, which belongs to thedatasetobject.
For a detailed list of attributes, refer to the chart attributes page of error bar chart.
An error bar chart thus created looks like this:
{
"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="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></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>Click here to edit the above error bar chart.
Error Line Chart
Now, let's create an error line chart that compares the estimated procurement from two suppliers. To render an error line chart, change the value of the type attribute from errorbar2d to errorline. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of error line chart.
An error line chart thus created looks like:
{
"chart": {
"theme": "fusion",
"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="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></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": "fusion",
"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>Click here to edit the above error line chart.
Error Scatter Chart
An error scatter chart is an XY plot chart with vertical and horizontal error bars to show a range of error values for a specific data value. As an example, we will create a simple error scatter chart that shows the revenue forecast for the next year.
To render an error scatter chart, follow the steps given below:
Change the value of the
typeattribute fromerrorlinetoerrorscatter.Set the
labelattribute to specify the label for the data item. The label is rendered on the x-axis. This attribute belongs to thecategory, which belongs to thecategoriesobject.Set the
xattribute within thecategoryobject to specify the value given to each label rendered on the x-axis. Set this attribute within thedataobject, to specify the numericxvalue needed to plot a data item.Set the
yattribute to specify the numeric y value needed to plot a data item. This attribute belongs to thedataobject, which belongs to thedatasetobject.Set the
verticalErrorValueto specify the range of possible vertical deviation values that will be plotted as the error bar on the chart. This attribute also belongs to thedataobject, which belongs to thedatasetobject.
For a detailed list of attributes, refer to the chart attributes page of error scatter chart.
The error scatter chart will look like:
{
"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="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></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>Click here to edit the above error scatter chart.
Now, let's customize the appearance and properties of the charts.
Customize Error Charts
You can customize the cosmetic properties of error bars to change their appearance. To customize the properties, follow the steps given below:
Set the
halfErrorBarattribute to specify the rendering of full or half error bars. Set this attribute to1to show half error bars. Set it to0(default) to render the full error bars.Specify the hex color code to
errorBarColorattribute, to set the color in which you want to render the error bars.Set the transparency of the error bars using
errorBarAlphaattribute. This attribute takes values between0(transparency) and100(opaque).Set the thickness (in pixels) of the error bars using
errorBarThicknessattribute.Set the width of the error bars using
errorBarWidthPercentattribute. The width of the error bars are dependent on the percentage of the column width.
Refer to the code given below:
{
"chart": {
"halferrorbar": "0",
"errorBarColor": "#990000",
"errorBarAlpha": "50",
"errorBarThickness": "2",
"errorBarWidthPercent": "30"
},
}An error bar chart, after customizing the error bars, looks like this:
Click here to edit the above chart.
The configurations for the error line chart is same as that of the error bars chart.
Cosmetics of Error Scatter Chart
Customize the cosmetic properties of error scatter chart to change the appearance of error bars in it. Most of the attributes are similar to the above rendered charts. To customize some more cosmetic properties of error bars in error scatter chart, follow the steps given below:
Set the
useVerticalErrorBarattribute to show the error bars (half/full) for the error scatter chart. Setting this attribute to1(default) will show them, whereas setting it to0will hide them.Set the
halfVerticalErrorBarattribute to specify the rendering of full or half vertical error bars. Set this attribute to1to show half error bars. Set it to0(default) to render the full error bars.Specify the hex color code to
verticalErrorBarColorattribute, to set the color in which you want to render the vertical error bars.Set the transparency of the vertical error bars using
verticalErrorBarAlphaattribute. This attribute takes values between0(transparency) and100(opaque).Set the thickness (in pixels) of the vertical error bars using
verticalErrorBarThicknessattribute.Set the width (in pixels) of the vertical error bars using
verticalErrorBarWidthattribute.
Refer to the code given below:
{
"chart": {
"halfverticalerrorbar": "0",
"verticalErrorBarColor": "#990000",
"verticalErrorBarThickness": "2",
"verticalErrorBarAlpha": "50",
"verticalErrorBarWidth": "8"
}
}An error scatter chart, after customizing the error bars, looks like:
Click here to edit the above error scatter chart.