Clustered Bar Chart (no grid)
by amcharts
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",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"categoryField": "year",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"position": "left"
},
"trendLines": [],
"graphs": [
{
"balloonText": "Income:[[value]]",
"fillAlphas": 0.8,
"id": "AmGraph-1",
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income"
},
{
"balloonText": "Expenses:[[value]]",
"fillAlphas": 0.8,
"id": "AmGraph-2",
"lineAlpha": 0.2,
"title": "Expenses",
"type": "column",
"valueField": "expenses"
},
{
"balloonText": "Expenses:[[value]]",
"fillAlphas": 0.8,
"id": "AmGraph-2",
"lineAlpha": 0.2,
"title": "Expenses",
"type": "column",
"valueField": "expenses"
},
{
"balloonText": "Expenses:[[value]]",
"fillAlphas": 0.8,
"id": "AmGraph-2",
"lineAlpha": 0.2,
"title": "Expenses",
"type": "column",
"valueField": "expenses"
},
{
"balloonText": "Expenses:[[value]]",
"fillAlphas": 0.8,
"id": "AmGraph-2",
"lineAlpha": 0.2,
"title": "Expenses",
"type": "column",
"valueField": "expenses"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"position": "top",
"axisAlpha": 0
}
],
"allLabels": [],
"amExport": {
"right": 20,
"top": 20
},
"balloon": {},
"titles": [],
"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
}
]
});