Drilldown Column and Pie Charts

I am a total Flex noob (started off just a couple of days back). I have been assigned to create a drilldown effect for column and pie charts. Can you point me in the right direction, regarding the creation of a drilldown effect? It's ok if the thing doesnt have any fancy animations etc. I basically want to switch over to a new datasource depending which element in the chart was clicked. How do I identify which element was clicked and then how do I changed the datasource and redraw the chart?

Update: I implemented a basic solution that works by following this tutorial. Here is my code which is almost same as the provided sample.

<?xml version="1.0"?>

height="600">

<fx:Declarations>

    <mx:SeriesSlide id="slideIn" duration="1000" direction="down"/>
    <mx:SeriesSlide id="slideOut" duration="1000" direction="up"/>

</fx:Declarations>

<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    import mx.charts.HitData;
    import mx.charts.events.ChartItemEvent;

    [Bindable]
    private var profit04:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 2000},
        {Month: "Feb", Profit: 1000},
        {Month: "Mar", Profit: 1500}
    ]);

    [Bindable]
    private var profit05:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 2200},
        {Month: "Feb", Profit: 1200},
        {Month: "Mar", Profit: 1700},
        {Month: "Apr", Profit: 700}
    ]);

    [Bindable]
    private var profit06:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 2400},
        {Month: "Feb", Profit: 1400},
        {Month: "Mar", Profit: 1900}
    ]); 
    [Bindable]
    private var profit07:ArrayCollection = new ArrayCollection([
        {Month: "Jan", Profit: 400},
        {Month: "Feb", Profit: 1100},
        {Month: "Mar", Profit: 1900},
        {Month: "Apr", Profit: 1700},
        {Month: "May", Profit: 2100}
    ]);


    // level is a temporary variable used to determine when to drill down.
    private var level:int =  1;

    private function resultHandler():void {
        dp = ArrayCollection(srv.lastResult.data.result);
    }

    private function zoomIntoSeries(e:ChartItemEvent):void {
        if (level == 1) {


            cs1.yField = "Profit";
            cs1.xField = "Month";

            if(e.hitData.chartItem.index==0)
            {
                chart.dataProvider=profit05;
                cs1.dataProvider=profit05;
                cs1.displayName = "2005";
                p1.title = "2005 ";
            }
            else if(e.hitData.chartItem.index==1)
            {
                chart.dataPr开发者_开发知识库ovider=profit06;
                cs1.dataProvider=profit06;
                cs1.displayName = "2006";
                p1.title = "2006 ";
            }
            else if(e.hitData.chartItem.index==2)
            {
                chart.dataProvider=profit07;
                cs1.dataProvider=profit07;
                cs1.displayName = "2007";
                p1.title = "2007 ";
            }
            ca1.categoryField = "Month";

            level = 2;
            lbl1.text=e.hitData.chartItem.index.toString();

        } else {
            cs1.displayName = "2004";
            cs1.yField = "Profit";
            cs1.xField = "Month";
            chart.dataProvider=profit04;
            cs1.dataProvider=profit04;
            ca1.categoryField = "Month";

            p1.title = "2004 ";

            // Add the Legend back to the Panel.


            // Reset chart to original data provider.


            level = 1;
            lbl1.text=e.hitData.chartItem.index.toString();
        }
    }

]]></fx:Script>

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<s:Panel id="p1" title="2004">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <mx:ColumnChart id="chart" 
                    showDataTips="true" 
                    itemClick="zoomIntoSeries(event)" 
                    dataProvider="{profit04}">
        <mx:series> 
            <mx:ColumnSeries id="cs1" 
                             yField="Profit"
                             xField="Month"
                             displayName="2004"
                             dataProvider="{profit04}"
                             hideDataEffect="slideOut" 
                             showDataEffect="slideIn"/>
        </mx:series>            

        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca1" categoryField="Month"/>
        </mx:horizontalAxis>
    </mx:ColumnChart> 


</s:Panel>
<s:Label fontSize="40" id="lbl1"/>

However, it feels rather clumsy and I am worried that in the real implementation with a fairly complex db, I am going to end up in trouble. Isn't there a more elegant/simpler/efficient solution?

---

Use the chartItemClick event: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_eventsandeffects_11.html