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.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="horizontal"

verticalAlign="middle"

backgroundColor="white">

<mx:Script>

<![CDATA[

import mx.events.ListEvent;

import mx.events.SliderEvent;

private function slider_change(evt:SliderEvent):void {

var arr:Array = [];

if (evt.value >= 0) {

arr[evt.value] = 0.2;

}

series.perWedgeExplodeRadius = arr;

}

private function list_itemRollOver(evt:ListEvent):void {

var arr:Array = [];

arr[evt.rowIndex] = 0.2;

series.perWedgeExplodeRadius = arr;

/* Update the slider. */

slider.value = evt.rowIndex;

}

private function comboBox_change(evt:ListEvent):void {

var field:String = evt.currentTarget.selectedItem.label;

series.field = field;

}

private function series_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {

return item.name + ":\n" + field + ":" + Number(item[field]).toFixed(3);

}

]]>

</mx:Script>

<mx:ArrayCollection id="arrColl">

<mx:source>

<mx:Array>

<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />

<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />

<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />

<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />

<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />

</mx:Array>

</mx:source>

</mx:ArrayCollection>

<mx:ApplicationControlBar dock="true">

<mx:Form styleName="plain">

<mx:FormItem label="explode wedge:">

<mx:HSlider id="slider"

minimum="-1"

maximum="{arrColl.length - 1}"

snapInterval="1"

liveDragging="true"

dataTipPrecision="0"

change="slider_change(event);" />

</mx:FormItem>

<mx:FormItem label="field">

<mx:ComboBox id="comboBox"

change="comboBox_change(event);">

<mx:dataProvider>

<mx:Array>

<mx:Object label="avg" />

<mx:Object label="obp" />

<mx:Object label="slg" />

</mx:Array>

</mx:dataProvider>

</mx:ComboBox>

</mx:FormItem>

</mx:Form>

</mx:ApplicationControlBar>

<mx:List id="list"

dataProvider="{arrColl}"

labelField="name"

width="100"

height="100%"

itemRollOver="list_itemRollOver(event);" />

<mx:PieChart id="chart"

height="100%"

width="100%"

showDataTips="true"

dataProvider="{arrColl}">

<mx:series>

<mx:PieSeries id="series"

nameField="name"

field="avg"

labelPosition="callout"

labelFunction="series_labelFunc"

filters="[]" />

</mx:series>

</mx:PieChart>

</mx:Application>

Flex Samples

Latest Flex Samples

Flex Top Links

Exploding wedges in a Flex PieChart control based on user input

0 comments:

Related Flex Samples

Search Flex Samples
	Submit search form