Mega Code Archive
SeriesSlide effect for Pie chart
<![CDATA[
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()" backgroundColor="#FFFFFF">
<mx:Script>
import mx.charts.events.ChartItemEvent;
import mx.collections.ArrayCollection;
import mx.charts.HitData;
[Bindable]
private var productSales:ArrayCollection;
public function myListener(e:ChartItemEvent):void {
var pieData:ArrayCollection = new ArrayCollection( [
{Product: "PC", Total: e.hitData.item.PC},
{Product: "Mac", Total: e.hitData.item.Mac},
{Product: "Gadgets", Total: e.hitData.item.Gadgets},
]);
pieChart.dataProvider=pieData;
}
private function initApp():void{
productSales = new ArrayCollection( [
{ Quarter: "1", PC: 10000, Mac: 3000, Gadgets: 1000, Total: 14000 },
{ Quarter: "2", PC: 12000, Mac: 4000, Gadgets: 2000, Total: 18000 },
{ Quarter: "3", PC: 15000, Mac: 8000, Gadgets: 5000, Total: 28000 },
{ Quarter: "4", PC: 20000, Mac: 10000, Gadgets: 9000, Total: 39000 }
]);
columnChart.addEventListener(ChartItemEvent.ITEM_CLICK,myListener);
}
public function display(data:Object, field:String, index:Number,percentValue:Number):String {
return data.Product + ": " + data.Total;
}
</mx:Script>
<mx:SeriesSlide id="showPieEffect" duration="1000"/>
<mx:Panel title="Effects" width="100%" height="100%">
<mx:ColumnChart id="columnChart" height="100%" width="100%" showDataTips="true" dataProvider="{productSales}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Quarter"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="Quarter" yField="Total" displayName="Quarter"/>
</mx:series>
</mx:ColumnChart>
<mx:PieChart id="pieChart" height="100%" width="100%" showDataTips="true">
<mx:series>
<mx:PieSeries showDataEffect="{showPieEffect}" labelPosition="callout" field="Total" labelFunction="display"/>
</mx:series>
</mx:PieChart>
</mx:Panel>
</mx:Application>
]]>