Creating Exploding Pie Slices in Flex 3

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.

And there you have your dynamic exploding pie-slice…

Here is the link to the application and the source code… Enjoy 🙂

Application | Source

Advertisements

5 Responses to Creating Exploding Pie Slices in Flex 3

  1. Tony says:

    I noticed your pie chart has the same issue that I have. When you click on/select a pie slice and it explodes, the color of the slice changes from its original setting. Do you know of any way to prevent this color change? The result is that it no longer matches the legend colors. Any help would be appreciated – Thanks!!

  2. Matt says:

    Thank you SO MUCH for a CLEAR explanation on how to do this! Much appreciated!

    Also–would be great to look into Tony’s question about getting the pie slice colors to not change.

  3. Kiran says:

    Hi Raghu,

    Thanks for your blog and tutorial . I just started learning flex and dealing with pie charts .

    I could not able to figure out a solution for my problem .

    My problem :- Instead of clicking on pie slice , If I select the country name from combo box , it should behave the same way how it is behaving in your pie example . I mean for combo box event I want the pie-slice to be exploded dynamically . Could you please provide me a piece of code if you have any idea on it .

    Thanks
    Kiran

  4. kenneth says:

    you should check out http://kennethsutherland.com/2009/04/02/exploding-pie-charts/
    I’ve done a bit on linking the legend to the pie chart so that it explodes whatever you mouse over in the legend. I’ve also not experinced the colour issue mentioned above (can’t see the above example either, its not loading)

  5. Kiran says:

    Thanks Kenneth,

    By using the same data provider for combobox and pie chart , I am able to get the expected result, but somehow I was not happy .

    Your example really made me happy . Once again thanks for the source

    Regards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s