Creating a drill-down column chart

Let's implement a very basic drill-down scenario for the column charts.

First of all, let's set up the data:

var chartData = [
  { country: "USA", visits: 4025 },
  { country: "China", visits: 1882 },
  { country: "Japan", visits: 1809},
  { country: "Germany", visits: 1322}
];

Now let's add a second-level of the data to our friends in the United States. Let's say when we click on the USA column we want to break down the visits by State. I'm adding a subdata property which contains array of data point objects, just the way we had for the first level:

var chartData = [
  { country: "USA", visits: 4025,
    subdata: [
        { country: "New York", visits: 1000 },
        { country: "California", visits: 785 },
        { country: "Florida", visits: 501 },
        { country: "Illinois", visits: 321 },
        { country: "Washington", visits: 101 }
    ]
  },
  { country: "China", visits: 1882 },
  { country: "Japan", visits: 1809},
  { country: "Germany", visits: 1322}
];

You with my so far? Good.

Now let's add an event listener to catch clicks on columns which would also verify if the column clicked does have a "subdata" property and drill-down to it if it has.

chart.addListener("clickGraphItem", function (event) {
  // let's look if the clicked graph item had any subdata to drill-down into
  if (event.item.dataContext.subdata != undefined) {
    // wow it has!
    // let's set that as chart's dataProvider
    event.chart.dataProvider = event.item.dataContext.subdata;
    event.chart.validateData();
  }
});

Now, it was easy, wasn't it?

Here's a working result of our joint effort above: http://jsfiddle.net/amcharts/w8Bcy/

P.S. This approach does not limit us by just one level of drill-down. A data point for, say, "Illinois" can contain "subdata" array of it's own, which would be used to populate the chart if someone clicked on that state's column.