FusionCharts - Error Scatter Chart with customized error bars
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!--
ErrorScatter chart : with customized error bars
Chart attributes:
# halfverticalerrorbar - Set to 0,
# verticalErrorBarColor - Set to #990000,
# verticalErrorBarThickness - Set to 2,
# verticalErrorBarAlpha - Set to 50,
# verticalErrorBarWidth - Set to 8
Dataset attribute:
# anchorbgcolor - Set to '#7ed37e'
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var revForecastChart = new FusionCharts({
type: 'errorscatter',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"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",
...