How to implement drill down in Stacked Bar Chart(amchart) - amcharts

Question

We have implemented stacked bar chart using amchart. We have displaying the top 5 selling products in the charts.When drill down charts, the product manufactures details will display on the chart.

Answer 1

You can use chart's event clickGraphItem when the user clicks on a column. Then dynamically update chart's dataProvider property and call validateData() method to take in new data.
Here's a complete working demo. It has more stuff in it than just what I mentioned above, like for instance updating labels of current level being displayed, as well as back button to go up a level in drill-down.
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/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"titles": [{
"text": "Yearly data"
}],
"dataProvider": chartData,
"startDuration": 1,
"graphs": [{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span> <br>[[description]]",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"title": "Income",
"type": "column",
"valueField": "income","urlField":"url"
}],
"categoryField": "category",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
}
});
chart.addListener("clickGraphItem", function (event) {
if ( 'object' === typeof event.item.dataContext.months ) {
// set the monthly data for the clicked month
event.chart.dataProvider = event.item.dataContext.months;
// update the chart title
event.chart.titles[0].text = event.item.dataContext.category + ' monthly data';
// let's add a label to go back to yearly data
event.chart.addLabel(
"!10", 25,
"Go back to yearly >",
"right",
undefined,
undefined,
undefined,
undefined,
true,
'javascript:resetChart();');
// validate the new data and make the chart animate again
event.chart.validateData();
event.chart.animateAgain();
}
});
// function which resets the chart back to yearly data
function resetChart() {
chart.dataProvider = chartData;
chart.titles[0].text = 'Yearly data';
// remove the "Go back" label
chart.allLabels = [];
chart.validateData();
chart.animateAgain();
}
#chartdiv {
width : 100%;
height : 300px;
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>