Exploding wedges in a Flex PieChart control

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.

View MXML

<?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.

7 thoughts on “Exploding wedges in a Flex PieChart control

  1. 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.

  2. 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

  3. 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?) itemRollOver and itemRollOut with an effect such as fade.

    I will be eagerly awaiting any guidance or will post additional information as I uncover it.

    Thanks Peter!
    Benjamin

  4. 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()”

Comments are closed.