Flex 2 Developer's Guide > Charting Components > Chart Types > Using pie charts > Creating exploding pie charts

Creating exploding pie charts

The PieSeries chart series supports exploding wedges, both uniformly and on a per-wedge basis, so that you can achieve effects similar to the following:

A PieSeries chart with exploding wedges

The following table describes the properties that support exploding pie charts:

Property	Description
`explodeRadius`	A value from 0 to 1, representing the percentage of the available pie radius to use when exploding the wedges of the pie.
`perWedgeExplodeRadius`	An array of values from 0 to 1. The Nth value in this array is added to the value of `explodeRadius` to determine the explode amount of each individual wedge of the pie. Individual values can be left undefined, in which case the wedge will only explode according to the `explodeRadius` property.
`reserveExplodeRadius`	A value from 0 to 1, representing an amount of the available pie radius to reserve for animating an exploding wedge.

To explode all wedges of a pie chart evenly, you use the explodeRadius property on the PieSeries, as the following example shows:

<mx:PieSeries field="Amount" explodeRadius=".8" nameField="Expense"/>

To explode one or more wedges of the pie, you use an array of explodeRadius values. Each value in the array applies to the corresponding data point. In the following example, the fourth data point, the Car expense, is exploded:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    import mx.collections.ArrayCollection;
    [Bindable]
    public var expenses:ArrayCollection = new ArrayCollection([
        {Expense: "Taxes", Amount: 2000},
        {Expense: "Rent", Amount: 1000},
        {Expense: "Bills", Amount: 100},
        {Expense: "Car", Amount: 450},
        {Expense: "Gas", Amount: 100},
        {Expense: "Food", Amount: 200}
    ]);
    
    [Bindable]
    public var explodingArray:Array = [0,0,0,.2,0,0]
    </mx:Script>
    <mx:Panel>
        <mx:PieChart id="pie" dataProvider="{expenses}" showDataTips="true">
            <mx:series>
                <mx:PieSeries field="Amount" nameField="Expense"
                    perWedgeExplodeRadius="{explodingArray}"
                    labelPosition="callout"/>
            </mx:series>
        </mx:PieChart>
        <mx:Legend dataProvider="{pie}"/>
    </mx:Panel>
</mx:Application>

Flex 2

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/2/docs/00001237.html