Flex Examples
The following example shows how you can explode specific wedges in a PieChart control when the user clicks an item in the chart.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/06/exploding-wedges-in-a-flex-piechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.charts.events.ChartItemEvent;
private function pieChart_itemClick(evt:ChartItemEvent):void {
var arr:Array = [];
arr[evt.hitData.chartItem.index] = 0.2;
pieSeries.perWedgeExplodeRadius = arr;
}
]]>
</mx:Script>
<mx:XML id="dp">
<products>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</products>
</mx:XML>
<mx:PieChart id="pieChart"
dataProvider="{dp.product}"
selectionMode="single"
showDataTips="true"
itemClick="pieChart_itemClick(event);"
height="250"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries" field="@data">
<mx:stroke>
<mx:Stroke color="black" weight="0" />
</mx:stroke>
<mx:filters>
<mx:Array />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Oh, this answers my last quiestion jejeje.
Here’s another one: can you use an interpolatios when the wedge explodes??
By the way, sorry for bothering, but I could really use your help.
Thank you.
DaRk6,
I just found this out last night. Check out “Creating Exploding Pie Slices in Flex” and check out the Application/Source at the bottom.
Peter
I have a related question. What controls the effect of the colors changing on hover-over and itemclick on this pie chart? Is there a way to turn this effect off and only show the true/defined color of the pie slice?
Thanks!!
Tony
To Tony:
I found that the inclusion of
selectionMode="single"for the pie chart allows the “hover” or “roll over” effect to occur. So without that property (or is it style?) the pie chart does not have that effect.As to the second part about modifying the effect I am unsure. As a 2nd day Flex programmer I am trying to solve that problem right now. My intuition is leading me to the properties (or are they styles?)
itemRollOveranditemRollOutwith an effect such as fade.I will be eagerly awaiting any guidance or will post additional information as I uncover it.
Thanks Peter!
Benjamin
Thanks a lot Peter..
This is what I;m looking for..
Just an FYI for using selectionMode, I had encountered the following error when i set the selectionMode
cannot convert mx.charts.events::ChartItemEvent to mx.events.IndexChangedEvent
I avoided it by setting the following
change=”event.stopImmediatePropagation()”
Vijay, you are a lifesaver!