Choose an item

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 type attribute. To render an error chart, set errorBar2D.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

  • Set the errorValue attribute to specify 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.

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:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Machinery lifespan range",
        "subcaption": "Means & standard deviations",
        "xAxisName": "Systems",
        "yAxisName": "Life Span",
        "numberSuffix": " Years",
        "halfErrorBar": "0",
        "showXAxisLine": "1",
        "axisLineAlpha": "25",
        "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 theme="fusion" caption="Machinery lifespan range" subcaption="Means &amp; standard deviations" xaxisname="Systems" yaxisname="Life Span" numbersuffix=" Years" halferrorbar="0" showxaxisline="1" axislinealpha="25" showhovereffect="1">
    <categories>
        <category label="Central AC" />
        <category label="Computers" />
        <category label="Bar-code Scanners" />
        <category label="Packaging Machines" />
        <category label="Chilling Compartments" />
    </categories>
    <dataset seriesname="Daly City Serramonte">
        <set value="8" errorvalue="2" />
        <set value="3" errorvalue="0.5" />
        <set value="2" errorvalue="1" />
        <set value="6" errorvalue="1.8" />
        <set value="8" errorvalue="1.2" />
    </dataset>
    <dataset seriesname="Bakersfield Central">
        <set value="7" errorvalue="1" />
        <set value="4" errorvalue="0.5" />
        <set value="2" errorvalue="1" />
        <set value="4" errorvalue="0.8" />
        <set value="7" errorvalue="1" />
    </dataset>
    <dataset seriesname="Garden Groove harbour">
        <set value="9" errorvalue="2" />
        <set value="3" errorvalue="0.7" />
        <set value="3" errorvalue="1" />
        <set value="6" errorvalue="1.8" />
        <set value="7" errorvalue="1.2" />
    </dataset>
</chart>
<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 chartObj = new FusionCharts({
    type: 'errorbar2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Machinery lifespan range",
            "subcaption": "Means & standard deviations",
            "xAxisName": "Systems",
            "yAxisName": "Life Span",
            "numberSuffix": " Years",
            "halfErrorBar": "0",
            "showXAxisLine": "1",
            "axisLineAlpha": "25",
            "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"
            }]
        }]
    }
}
);
			chartObj.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:

FusionCharts will load here..
{
    "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"
                }
            ]
        }
    ]
}
<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 &amp; Beverage" />
        <category label="Apparel" />
        <category label="Electronics" />
        <category label="Baby Products" />
    </categories>
    <dataset seriesname="MB Suppliers">
        <set value="28" errorvalue="2" />
        <set value="16" errorvalue="2" />
        <set value="24" errorvalue="3" />
        <set value="32" errorvalue="2" />
    </dataset>
    <dataset seriesname="VST Group Co Ltd ">
        <set value="12" errorvalue="2" />
        <set value="30" errorvalue="4" />
        <set value="35" errorvalue="5" />
        <set value="14" errorvalue="2" />
    </dataset>
</chart>
<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 chartObj = new FusionCharts({
    type: 'errorline',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    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"
            }]
        }]
    }
}
);
			chartObj.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 type attribute from errorline to errorscatter.

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

  • Set the x attribute within the category object to specify the value given to each label rendered on the x-axis. Set this attribute within the data object, to specify the numeric x value needed to plot a data item.

  • Set the y attribute to specify the numeric y value needed to plot a data item. This attribute belongs to the data object, which belongs to the dataset object.

  • Set the verticalErrorValue to specify the range of possible vertical deviation values that will be plotted as the error bar on the chart. This attribute also belongs to the data object, which belongs to the dataset object.

For a detailed list of attributes, refer to the chart attributes page of error scatter chart.

The error scatter chart will look like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "xaxisname": "Month",
        "yaxisname": "Revenue (In USD)",
        "caption": "Revenue forecast",
        "subcaption": "For Next Year",
        "halfverticalerrorbar": "0",
        "showlegend": "0",
        "numberPrefix": "$",
        "baseFontColor": "#333333",
        "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"
                }
            ]
        }
    ]
}
<chart theme="fusion" xaxisname="Month" yaxisname="Revenue (In USD)" caption="Revenue forecast" subcaption="For Next Year" halfverticalerrorbar="0" showlegend="0" numberprefix="$" basefontcolor="#333333" 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" />
        <category label="Feb" x="30" />
        <category label="Mar" x="40" />
        <category label="Apr" x="50" />
        <category label="May" x="60" />
        <category label="Jun" x="70" />
        <category label="Jul" x="80" />
        <category label="Aug" x="90" />
        <category label="Sep" x="100" />
        <category label="Oct" x="110" />
        <category label="Nov" x="120" />
        <category label="Dec" x="130" />
    </categories>
    <dataset seriesname="This Year" color="" anchorradius="8" anchorbgcolor="#1aaf5d">
        <set y="450000" x="20" verticalerrorvalue="50000" />
        <set y="860000" x="30" verticalerrorvalue="69000" />
        <set y="750000" x="40" verticalerrorvalue="69000" />
        <set y="570000" x="50" verticalerrorvalue="60000" />
        <set y="910000" x="60" verticalerrorvalue="50000" />
        <set y="580000" x="70" verticalerrorvalue="55000" />
        <set y="610000" x="80" verticalerrorvalue="87000" />
        <set y="620000" x="90" verticalerrorvalue="45000" />
        <set y="520000" x="100" verticalerrorvalue="59000" />
        <set y="530000" x="110" verticalerrorvalue="72000" />
        <set y="950000" x="120" verticalerrorvalue="69000" />
        <set y="770000" x="130" verticalerrorvalue="69000" />
    </dataset>
</chart>
<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 chartObj = new FusionCharts({
    type: 'errorscatter',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "xaxisname": "Month",
            "yaxisname": "Revenue (In USD)",
            "caption": "Revenue forecast",
            "subcaption": "For Next Year",
            "halfverticalerrorbar": "0",
            "showlegend": "0",
            "numberPrefix": "$",
            "baseFontColor": "#333333",
            "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"
            }]
        }]
    }
}
);
			chartObj.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 halfErrorBar attribute to specify the rendering of full or half error bars. Set this attribute to 1 to show half error bars. Set it to 0 (default) to render the full error bars.

  • Specify the hex color code to errorBarColor attribute, to set the color in which you want to render the error bars.

  • Set the transparency of the error bars using errorBarAlpha attribute. This attribute takes values between 0 (transparency) and 100 (opaque).

  • Set the thickness (in pixels) of the error bars using errorBarThickness attribute.

  • Set the width of the error bars using errorBarWidthPercent attribute. 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:

FusionCharts will load here..

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 useVerticalErrorBar attribute to show the error bars (half/full) for the error scatter chart. Setting this attribute to 1 (default) will show them, whereas setting it to 0 will hide them.

  • Set the halfVerticalErrorBar attribute to specify the rendering of full or half vertical error bars. Set this attribute to 1 to show half error bars. Set it to 0 (default) to render the full error bars.

  • Specify the hex color code to verticalErrorBarColor attribute, to set the color in which you want to render the vertical error bars.

  • Set the transparency of the vertical error bars using verticalErrorBarAlpha attribute. This attribute takes values between 0 (transparency) and 100 (opaque).

  • Set the thickness (in pixels) of the vertical error bars using verticalErrorBarThickness attribute.

  • Set the width (in pixels) of the vertical error bars using verticalErrorBarWidth attribute.

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:

FusionCharts will load here..

Click here to edit the above error scatter chart.