Pie Explode : Pie Chart « Chart « Flex

1. Flex
2. Chart
3. Pie Chart

Pie Explode

         
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
    
      private function getWedgeLabel(item:Object,field:String,index:Number, percentValue:Number):String{
        return item.fruit + ": $" + nf.format(item.sales) + " (" + nf.format(percentValue) + "%)";
      }
  
  </mx:Script>
  
  <mx:NumberFormatter id="nf" precision="0" rounding="nearest"/>

  <mx:Model id="pieModel">
    <data>
        <row>
          <fruit>A</fruit>
          <sales>4</sales>
        </row>
        <row>
          <fruit>B</fruit>
          <sales>2</sales>
        </row>
        <row>
          <fruit>C</fruit>
          <sales>6</sales>
        </row>
    </data>
  </mx:Model>  
  <mx:ArrayCollection id="pieData" source="{pieModel.row}"/>

  <mx:PieChart dataProvider="{pieData}" height="100%" width="100%">
    <mx:series>
      <mx:PieSeries field="sales" 
                    labelFunction="getWedgeLabel"
                    labelPosition="callout" 
                    perWedgeExplodeRadius="{[0,0,explodeSlider.value]}"/>  
    </mx:series>
  </mx:PieChart>
  
  <mx:Label text="Explode Radius: {explodeSlider.value}" fontSize="10"/>
  <mx:HSlider id="explodeSlider" minimum="0" maximum="1" snapInterval=".01" liveDragging="true"/>
</mx:Application>

   
    
    
    
    
    
    
    
    
  

Related examples in the same category

1.	Pie chart with two series
2.	Pie Chart Demo
3.	SeriesSlide effect for Pie chart
4.	Create a pie chart
5.	Set horizonta lAxis and Area Series for Pie Chart
6.	Add a second tag to display two data series for Pie Chart
7.	To explode all wedges of a pie chart evenly, you use the explodeRadius property on the PieSeries
8.	Pie chart inner radius
9.	The following example defines a PieChart control:
10.	To create a doughnut chart, specify the innerRadius property on the PieChart control
11.	creates a PieChart that uses only red, white, and blue colors for the wedges:
12.	Add a drop shadow filter to a PieChart control, Flex renders that drop shadow filter in addition to the default drop shadow filter on the PieSeries.
13.	Create a PieChart control and applies a drop shadow to it
14.	Set nameField property of a PieChart control's data series to Expense
15.	PieChart with ActionScript
16.	Handle PieChart item click event
17.	Set selection model for PieChart to single selectable
18.	Describe the properties of the PieChart's PieSeries
19.	defines an Array of custom SolidColor objects, and applies it to the PieSeries object in the PieChart control.
20.	Doughnut PieChart(PieChart with a hole)
21.	Exploding PieChart
22.	creates a PieChart that uses a spectrum of reds for the wedges:
23.	Pie custom Label
24.	Pie Multiple Series
25.	Pie Set Fill Colors
26.	The fourth data point, the Car expense, is exploded
27.	Get selected index from ChartItemEvent
28.	Change chart data provider and update data series after clicking
29.	Pie Label position callout