Adobe flex drill down data in column chart with animation

Adobe flex drill down data in column chart with animation

Postby haretu » Wed Mar 30, 2011 9:43 am

he following example drills down into the assets of a fictional person’s net worth. In this case, though, it shows the value of the asset classes for the clicked-on month in the drill-down view rather than the change over time of a particular asset class.

This example uses the HitData object’s item property to access the values of the current data provider. By building an Array of objects with the newly-discovered data, the chart is able to drill down into the series without making calls to any external services.

Code: Select all
<?xml version="1.0"?>
<!-- charts/DrillDownWithEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%">
    <mx:Script><![CDATA[
        import mx.collections.ArrayCollection;
        import mx.charts.HitData;
        import mx.charts.events.ChartItemEvent;
       
        [Bindable]
        public var dpac:ArrayCollection = new ArrayCollection ([
            { date:"01/01/2006", assets:1607441, cash:520000, stocks:98192,
                retirement:130101, home:850000, other:9148 },
            { date:"02/01/2006", assets:1610509, cash:520000, stocks:97309,
                retirement:133707, home:850000, other:9493 },
            { date:"03/01/2006", assets:1617454, cash:520000, stocks:97992,
                retirement:139529, home:850000, other:9933 },
            { date:"04/01/2006", assets:1615310, cash:520000, stocks:92269,
                retirement:142596, home:850000, other:10445 },
            { date:"05/01/2006", assets:1600304, cash:520000, stocks:80754,
                retirement:139029, home:850000, other:10521 },
            { date:"06/01/2006", assets:1600416, cash:520000, stocks:80667,
                retirement:139024, home:850000, other:10725 },
            { date:"07/01/2006", assets:1599340, cash:520000, stocks:78913,
                retirement:139265, home:850000, other:11162 },
            { date:"08/01/2006", assets:1608965, cash:520000, stocks:84754,
                retirement:142618, home:850000, other:11593 },
            { date:"09/01/2006", assets:1622719, cash:520000, stocks:91078,
                retirement:149257, home:850000, other:12384 },
            { date:"10/01/2006", assets:1629806, cash:520000, stocks:86452,
                retirement:160310, home:850000, other:13044 },
            { date:"11/01/2006", assets:1642285, cash:520000, stocks:92172,
                retirement:166357, home:850000, other:13756 },
            { date:"12/01/2006", assets:1651009, cash:520000, stocks:95095,
                retirement:171557, home:850000, other:14357 }]);
             
        [Bindable]
        public var drillDownDataSet:ArrayCollection;

        [Bindable]
        public var dp:ArrayCollection = dpac;
       
        private function zoomIntoSeries(e:ChartItemEvent):void {
            if (dp==dpac) {
                drillDownDataSet = new ArrayCollection(genData(e));
                cs1.displayName = "Assets";
                cs1.yField = "amount";
                cs1.xField = "type";

                ca1.categoryField = "type";
               
                p1.title = "Asset breakdown for " + e.hitData.item.date;
                dp = drillDownDataSet;
               
                // Remove the Legend. It is not needed in this view because
                // each asset class is its own column in the drill down.
                p1.removeChild(myLegend);
            } else {
                cs1.displayName = "All Assets";
                cs1.yField = "assets";
                cs1.xField = "date";
               
                ca1.categoryField = "date";
               
                p1.title = "Net Worth";
                dp = dpac;
               
                // Add the Legend back to the Panel.
                p1.addChild(myLegend);
            }
        }

        private function genData(e:ChartItemEvent):Array {
                var result:Array = [];

                trace("Cash: " + e.hitData.item.cash);
                trace("Stocks: " + e.hitData.item.stocks);
                trace("Retirement: " + e.hitData.item.retirement);
                trace("Home: " + e.hitData.item.home);
                trace("Other: " + e.hitData.item.other);
               
                var o1:Object = {
                    type:"cash",
                    amount:e.hitData.item.cash
                };                     
                var o2:Object = {
                    type:"stocks",
                    amount:e.hitData.item.stocks
                };                     
                var o3:Object = {
                    type:"retirement",
                    amount:e.hitData.item.retirement
                };                     
                var o4:Object = {
                    type:"home",
                    amount:e.hitData.item.home
                };                     
                var o5:Object = {
                    type:"other",
                    amount:e.hitData.item.other
                };                     
                trace(o1.type + ":" + o1.amount);
               
                result.push(o1);
                result.push(o2);
                result.push(o3);
                result.push(o4);
                result.push(o5);
                return result;               
        }
       
    ]]></mx:Script>

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

    <mx:Panel id="p1" title="Net Worth">
        <mx:ColumnChart id="chart"
            showDataTips="true"
            itemClick="zoomIntoSeries(event)"
            dataProvider="{dp}"
        >
            <mx:series>
                <mx:ColumnSeries id="cs1"
                    displayName="All Assets"
                    yField="assets"
                    xField="date"
                    hideDataEffect="slideOut"
                    showDataEffect="slideIn"/>
            </mx:series>           

            <mx:horizontalAxis>
                <mx:CategoryAxis id="ca1" categoryField="date"/>
            </mx:horizontalAxis>
        </mx:ColumnChart>
       
        <mx:Legend id="myLegend" dataProvider="{chart}"/>
    </mx:Panel>
</mx:Application>
Attachments
Screen shot 2011-03-30 at 9.37.48 AM.png
Screen shot 2011-03-30 at 9.37.48 AM.png (30.15 KiB) Viewed 824 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron