Loading
Creating 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.
In this section you will be shown how you can:
-
Create a simple error scatter chart
-
Customize the vertical and horizontal error bars
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:
{
"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 |
|---|---|
|
It is used to specify the label for the data item. The label is rendered on the x-axis. This attribute belongs to the |
|
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 |
|
It is used to specify the numeric |
|
It is used to specify the radius of the anchor that represents the data point. |
|
It is used to specify the hex code of the color that will be used to render the anchor that represents the data point. |
|
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 |
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 :
{
"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 |
|---|---|
|
It is used to specify whether vertical error bars (half/full) will be shown for the error scatter chart. Setting this attribute to |
|
It is used to specify whether half or full vertical error bars will be shown for the error scatter chart. Setting this attribute to |
|
It is used to specify the hex code of the color used to render the vertical error bars. |
|
It is used to specify the hex code of the color used to render the error bars. |
|
It is used to specify the transparency of the vertical error bars. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify the transparency of the error bars. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify the thickness, in pixels, of the vertical error bars. |
|
It is used to specify the thickness, in pixels, of the error bars. |
|
It is used to specify the width, in pixels, of the vertical error bars. |
|
It is used to specify the width, in pixels, of the error bars. |