Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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.

In this section you will be shown how you can:

Creating a Simple Error Scatter Chart

As an example, we will create a simple error scatter chart that shows the revenue forecast for the next year.

An error scatter chart thus created 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" } ] } ] }
{
    "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: '600',
    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>

Given below is a brief description of the attributes used to create an error scatter 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, which belongs to the categories object.

x (within categories: category)

In the error scatter chart, the position of a datapoint is defined in the form of two numeric parameters, one from the y-axis and the other from the x-axis.
When used with the category object, this attribute is used to specify the value given to each label rendered on the x-axis.

x (within dataset: data)

When used with the data object, this attribute is used to specify the numeric x value needed to plot a data item.

y (within dataset: data)

It is used to specify the numeric y value needed to plot a data item.

anchorRadius

It is used to specify the radius of the anchor that represents the data point.

anchorBgColor

It is used to specify the hex code of the color that will be used to render the anchor that represents the data point.

verticalErrorValue

It is used to specify the range of possible vertical deviation values that will be plotted as the error bar on the chart. This attribute belongs to the data object, which belongs to the dataset object.

Customizing the Error Bar

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

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

FusionCharts will load here..
{ "chart": { "theme": "fint", "xaxisname": "Months", "yaxisname": "Revenue (In $)", "caption": "Revenue forecast", "subcaption": "Next Year", "halfverticalerrorbar": "0", "verticalErrorBarColor": "#990000", "verticalErrorBarThickness": "2", "verticalErrorBarAlpha": "50", "verticalErrorBarWidth": "8" }, "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": [ { "color": "", "anchorradius": "8", "anchorbgcolor": "#7ed37e", "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": "fint",
        "xaxisname": "Months",
        "yaxisname": "Revenue (In $)",
        "caption": "Revenue forecast",
        "subcaption": "Next Year",
        "halfverticalerrorbar": "0",
        "verticalErrorBarColor": "#990000",
        "verticalErrorBarThickness": "2",
        "verticalErrorBarAlpha": "50",
        "verticalErrorBarWidth": "8"
    },
    "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": [
        {
            "color": "",
            "anchorradius": "8",
            "anchorbgcolor": "#7ed37e",
            "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: '600',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "xaxisname": "Months",
            "yaxisname": "Revenue (In $)",
            "caption": "Revenue forecast",
            "subcaption": "Next Year",
            //Error Bar Configuration
            "halfverticalerrorbar": "0",
            "verticalErrorBarColor": "#990000",
            "verticalErrorBarThickness": "2",
            "verticalErrorBarAlpha": "50",
            "verticalErrorBarWidth": "8"

        },
        "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": [{
            "color": "",
            "anchorradius": "8",
            "anchorbgcolor": "#7ed37e",
            "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>

Given below is a brief description of the attributes used to customize the error bars::

Attribute Description

useVerticalErrorBar

It is used to specify whether vertical error bars (half/full) will be shown for the error scatter chart. Setting this attribute to 0 will hide them, setting it to 1 (default) will show them.

halfVerticalErrorBar

It is used to specify whether half or full vertical error bars will be shown for the error scatter chart. Setting this attribute to 1 will show half error bars, setting it to 0 (default) will show full error bars.

verticalErrorBarColor

It is used to specify the hex code of the color used to render the vertical error bars.

errorBarColor

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

verticalErrorBarAlpha

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

errorBarAlpha

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

verticalErrorBarThickness

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

errorBarThickness

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

verticalErrorBarWidth

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

errorBarWidth

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

Top