Search Flex Components Free

Custom Search

December 27, 2007

Pie chart in Flex


<?xml version=”1.0″?>

<mx:Application xmlns:mx=”“>



import mx.formatters.*;

import mx.collections.ArrayCollection;


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} ]);

// Create a bindable Array of explode radii.


public var explodingArray:Array = [0,0,0,.2,0,0]

public function display(data:Object,field:String,index:Number,percentValue:Number):String


return data.Expense + “:$” + data.Amount + “\n” + round(percentValue,2) + “%”;


// Rounds to 2 places:

public function round(num:Number, precision:Number):Number {

var result:String;

var f:NumberFormatter = new NumberFormatter();

f.precision = precision;

result = f.format(num);

return Number(result);




<mx:Panel title=”using labels”>

<mx:PieChart id=”myChart” dataProvider=”{expenses}” showDataTips=”true” innerRadius=”.3″>

<!– by adding the radius property to the piechart we are able to create a doughnut chart. –>


<mx:PieSeries field=”Amount” nameField=”Expense” labelPosition=”callout”

explodeRadius=”.12″ perWedgeExplodeRadius=”{explodingArray}” labelFunction=”display”/>

<!– explodeRadius is a number between 0 and 1

Include one either explodeRadius or perWedgeExplodeRadius for explosion of wedges.

To explode all wedges of a pie chart evenly,adding the explodeRadius property to the

pieseries we are able to create a exploding pie chart.

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



<mx:Legend dataProvider=”{myChart}”/>



Related Flex Tutorials