Clustered Column Chart
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;
font-size : 11px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"columnWidth:": 0.6,
"columnSpacing": 5,
"dataProvider": [{
"year": 2005,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2006,
"income": 26.2,
"expenses": 22.8
}, {
"year": 2007,
"income": 30.1,
"expenses": 23.9
}, {
"year": 2008,
"income": 29.5,
"expenses": 25.1
}, {
"year": 2009,
"income": 24.6,
"expenses": 25
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "top"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "Income:[[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income"
}, {
"balloonText": "Expenses:[[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Expenses",
"type": "column",
"valueField": "expenses"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"position": "left"
},
"exportConfig":{
"menuBottom":"20px",
"menuRight":"20px",
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});