Column chart with confidence intervals (using custom balloon)

by Jeremy Kemp

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
	"theme": "none",
    "dataProvider": [{
        "year": 2005,
        "value": 11.5,
        "error": 5
    }, {
        "year": 2006,
        "value": 26.2,
        "error": 5
    }, {
        "year": 2007,
        "value": 30.1,
        "error": 5
    }, {
        "year": 2008,
        "value": 29.5,
        "error": 7
    }, {
        "year": 2009,
        "value": 24.6,
        "error": 10
    }],
    "balloon": {
        "textAlign": "left"
    },
    "valueAxes": [{
        "id":"v1",
        "axisAlpha": 0
    }],
    "startDuration": 1,
    "graphs": [{
        "labelText": "[[value]]",
        "type": "column",
        "bullet": "yError",
        "bulletColor": "#000",
        "errorField": "error",
        "lineThickness": 2,
        "valueField": "value",
        "bulletAxis": "v1",
		"fillAlphas": 1,
        "balloonFunction": function (item) {
            var value = item.dataContext.value;
            var upper = value + item.dataContext.error / 2;
            var lower = value - item.dataContext.error / 2;
            return "<b>Upper:</b> " + upper + "<br /><b>Value:</b> " + value + "<br /><b>Lower:</b> " + lower;
        }
    }],
    "chartCursor": {
        "cursorAlpha": 0,
        "cursorPosition": "mouse",
        "graphBulletSize": 1,
        "zoomable": false
    },
    "categoryField": "year",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha": 0
    },
    "exportConfig": {
        "menuTop":"20px",
        "menuRight":"20px",
        "menuItems": [{
            "icon": 'http://www.amcharts.com/lib/3/images/export.png',
            "format": 'png'
        }]
    }
});