Interacting between different chart types
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/pie.js"></script>
<h1>Click bars to toggle them on both charts</h1>
<div id="chartdiv1"></div>
<div id="chartdiv2"></div>
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
h1 {
font-size: 15px;
text-align: center;
font-weight: bold;
}
#chartdiv1, #chartdiv2 {
width : 40%;
height : 200px;
font-size : 11px;
float: left;
}
JavaScript
// build clickable bar chart
var chart = AmCharts.makeChart("chartdiv1", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 2025,
"alpha": 1
}, {
"country": "China",
"visits": 1882,
"alpha": 1
}, {
"country": "Japan",
"visits": 1809,
"alpha": 1
}, {
"country": "Germany",
"visits": 1322,
"alpha": 1
}],
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"rotate": true,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.5,
"alphaField": "alpha",
"lineAlpha": 0.5,
"type": "column",
"valueField": "visits",
"showHandOnHover": true
}],
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0
}
});
// set click events on first chart
chart.addListener("clickGraphItem", function (event) {
// toggle bar selector
var item = chart.dataProvider[event.index];
alert(item.country + " : " + item.visits);
item.alpha = 1 == item.alpha ? undefined : 1;
chart.validateData();
// recalculate and reload pie chart
chart2.dataProvider = getPieData();
chart2.validateData();
});
// define function that calculates pie chart data out of selected items in bar chart
function getPieData() {
var data = [];
for(var x in chart.dataProvider) {
var dataPoint = chart.dataProvider[x];
if (1 == dataPoint.alpha) {
data.push({
country: dataPoint.country,
visits: dataPoint.visits
});
}
}
return data;
}
// build pie chart
var chart2 = AmCharts.makeChart("chartdiv2", {
"type": "pie",
"theme": "none",
"dataProvider": getPieData(),
"valueField": "visits",
...