20 | November | 2007 | FLEXing My Muscle

Creating Exploding Pie Slices in Flex 3

November 20, 2007

This post is about creating exploding pie charts in Flex. We will look at both static pie slices as well as dynamic & animated pie slices.

It is very easy to create a static exploding pie. There is a property called explodeRadius on the PieSeries class, whose default value is 0, which can be set to a value between 0 and 1 to get a static exploded pie very easily.

<mx:PieChart id=”pie0″ dataProvider=”{expenses}” showDataTips=”true” >
<mx:series>
<mx:PieSeries field=”Amount” nameField=”Expense” explodeRadius=”.1″/>
</mx:series>
</mx:PieChart>

If you want a dynamic way of pie slicing, like in the Dashboard app, you would need to do more . Here are the steps to achieve something like that…

Firstly, in dynamic pie slicing you have to enable mouse clicks on the pie chart. This can be achieved by setting the selectionMode property on the PieChart to single (as we need only a single selection here)
You need to also bind the perWedgeExplodeRadius property on the PieSeries to an array object which has items with value between 0 and 1. This array has items as many as there are slices in the pie and all of them are set to zero to begin with. These will decide the explode radiusfor the corresponding wedge.
On click, we will have to have a listener configured for an itemClick event on the PieChart and by trapping it, we can assign the explode-radius to that particular slice only by modifying the perWedgeExplodeRadius array. We then reset the array to the PieSeries and refresh it to attain the dynamic slicing.
But, the slicing action is still abrupt at this point. To provide a smooth animation, you need to set the showDataEffect on the PieSeries to interpolate.