seriesIn and seriesOut effects to slide the columns in and out
<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".
This user guide is licensed for use under the terms of the Creative Commons Attribution
Non-Commercial 3.0 License.
This License allows users to copy, distribute, and transmit the user guide for noncommercial
purposes only so long as
(1) proper attribution to Adobe is given as the owner of the user guide; and
(2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms.
The best way to provide notice is to include the following link.
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
-->
<!-- charts/DrillDownWithEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%"
width="100%">
<mx:Script>
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>
Related examples in the same category
