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

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>