Category Archives: PieSeries

Drawing transparent pie wedges in a Flex PieChart control

The following example shows how you can create transparent wedges in a Flex PieChart control by setting the SolidColor object’s alpha property to 0, as seen in the following snippet:

<mx:PieChart dataProvider="{arrColl}" height="100%" width="100%">
    <mx:series>
        <mx:PieSeries id="pieSeries" field="data">
            <mx:fills>
                <mx:SolidColor alpha="0.0" />
                <mx:SolidColor color="haloBlue" alpha="1.0" />
            </mx:fills>
            <mx:filters>
                <mx:Array />
            </mx:filters>
        </mx:PieSeries>
    </mx:series>
</mx:PieChart>

Full code after the jump.

Continue reading Drawing transparent pie wedges in a Flex PieChart control

Exploding all wedges in a Flex PieChart control using the explodeRadius property

The following example shows how you can explode all wedges in a PieChart at once by using the explodeRadius property, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="100%" width="100%">
    <mx:series>
        <mx:PieSeries field="@data" labelPosition="callout">
            <mx:explodeRadius>0.2</mx:explodeRadius>
            <mx:filters>
                <mx:Array />
            </mx:filters>
        </mx:PieSeries>
    </mx:series>
</mx:PieChart>

If you want to explode individual wedges, simply use the perWedgeExplodeRadius property.

Full code after the jump.

Continue reading Exploding all wedges in a Flex PieChart control using the explodeRadius property

Customizing radial strokes in a Flex PieChart control

The following example shows how you can customize the radial stroke in a Flex PieChart control by using the PieSeries class’s radialStroke style and the mx.graphics.Stroke class, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="250" width="100%">
    <mx:series>
        <mx:PieSeries id="pieSeries" field="@data">
            <mx:radialStroke>
                <mx:Stroke color="black" weight="2" />
            </mx:radialStroke>
            <mx:filters>
                <mx:Array />
            </mx:filters>
        </mx:PieSeries>
    </mx:series>
</mx:PieChart>

Full code after the jump.

Continue reading Customizing radial strokes in a Flex PieChart control

Customizing callout strokes in a Flex PieChart control

The following example shows how you can customize the callout stroke in a Flex PieChart control by using the PieSeries class’s calloutStroke style and the mx.graphics.Stroke class, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="250" width="100%">
    <mx:series>
        <mx:PieSeries id="pieSeries" field="@data">
            <mx:calloutStroke>
                <mx:Stroke color="black"weight="2" />
            </mx:calloutStroke>
            <mx:filters>
                <mx:Array />
            </mx:filters>
        </mx:PieSeries>
    </mx:series>
</mx:PieChart>

To see an example of changing the stroke around the pie chart itself, see “Customizing strokes in a Flex PieChart control”.

Full code after the jump.

Continue reading Customizing callout strokes in a Flex PieChart control

Exploding wedges in a Flex PieChart control based on user input

The following example shows how you can explode individual wedges in a PieChart when the user changes the value of a Slider control, or rolls over an item in a List control. For other examples of PieChart wedge exploding, check out “Exploding wedges in a Flex PieChart control”.

Full code after the jump.

Continue reading Exploding wedges in a Flex PieChart control based on user input

Creating custom fills in a Flex PieChart control using the fillFunction property

The following example shows how you can set fill colors in a Flex PieChart by specifying a custom fill function. In this example the fill function calculates the fill color based on the percentage value of each item. The larger the wedge, the brigher the fill color.

Full code after the jump.

Continue reading Creating custom fills in a Flex PieChart control using the fillFunction property