Selecting columns on a stacked 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>
<div id="debug">Click column secitons to display information</div>
CSS
body {
font-family: Verdana;
font-size: 12px;
}
#chartdiv {
width : 100%;
height : 400px;
font-size : 11px;
}
#debug {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"legend": {
"autoMargins": false,
"borderAlpha": 0.2,
"equalWidths": false,
"horizontalGap": 10,
"markerSize": 10,
"useGraphSettings": true,
"valueAlign": "left",
"valueWidth": 0
},
"dataProvider": [{
"year": "2003",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}, {
"year": "2004",
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}, {
"year": "2005",
"europe": 2.8,
"namerica": 2.9,
"asia": 1,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}],
"valueAxes": [{
"stackType": "100%",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "left"
}],
"graphs": [{
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.5,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "Europe",
"type": "column",
"valueField": "europe",
"alphaField": "europe_fill",
"showHandOnHover": true
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.5,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "North America",
"type": "column",
"valueField": "namerica",
"alphaField": "namerica_fill",
"showHandOnHover": true
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
...