Drill-down column chart
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 : 300px;
font-size : 11px;
}
JavaScript
var chartData = [{
"category": 2009,
"income": 23.5,
"url":"#",
"description":"click to drill-down",
"months": [
{ "category": 1, "income": 1 },
{ "category": 2, "income": 2 },
{ "category": 3, "income": 1 },
{ "category": 4, "income": 3 },
{ "category": 5, "income": 2.5 },
{ "category": 6, "income": 1.1 },
{ "category": 7, "income": 2.9 },
{ "category": 8, "income": 3.5 },
{ "category": 9, "income": 3.1 },
{ "category": 10, "income": 1.1 },
{ "category": 11, "income": 1 },
{ "category": 12, "income": 3 }
]
}, {
"category": 2010,
"income": 26.2,
"url":"#",
"description":"click to drill-down",
"months": [
{ "category": 1, "income": 4 },
{ "category": 2, "income": 3 },
{ "category": 3, "income": 1 },
{ "category": 4, "income": 4 },
{ "category": 5, "income": 2 },
{ "category": 6, "income": 1 },
{ "category": 7, "income": 2 },
{ "category": 8, "income": 2 },
{ "category": 9, "income": 3 },
{ "category": 10, "income": 1 },
{ "category": 11, "income": 1 },
{ "category": 12, "income": 3 }
]
}, {
"category": 2011,
"income": 30.1,
"url":"#",
"description":"click to drill-down",
"months": [
{ "category": 1, "income": 2 },
{ "category": 2, "income": 3 },
{ "category": 3, "income": 1 },
{ "category": 4, "income": 5 },
{ "category": 5, "income": 2 },
{ "category": 6, "income": 1 },
{ "category": 7, "income": 2 },
{ "category": 8, "income": 2.5 },
{ "category": 9, "income": 3.1 },
{ "category": 10, "income": 1.1 },
{ "category": 11, "income": 1 },
{ "category": 12, "income": 3 }
]
}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "/lib/3/images/",
...