Flex Examples
The following example shows how you can display the selected pie series item when the user clicks a wedge in a PieChart control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/15/displaying-a-pieseries-items-data-when-a-user-clicks-an-item-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.controls.Alert;
import mx.charts.series.items.PieSeriesItem;
import mx.charts.events.ChartItemEvent;
private function pieChart_itemClick(evt:ChartItemEvent):void {
var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
Alert.show("data=" + psi.item.@data + "\n" + "percentValue=" + psi.percentValue.toFixed(1) + "%", "label=" + psi.item.@label);
}
]]>
</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}"
itemClick="pieChart_itemClick(event);"
showDataTips="true"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
labelPosition="callout">
<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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hey Peter, I must tell you, this is really the gratest site about Flex.
I have learned by myself and visiting this site. Congratulatios.
Great Work, Do you have any examples on Webdynpro ABAP using Adobe Flex…
Thank you so much for this Peter.
This helped me get to where I needed to be.
Here is an updated version that uses the spark components;
>?xml version=”1.0″ encoding=”utf-8″?<
>s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”
<
>fx:Script<
>![CDATA[
import mx.charts.series.items.PieSeriesItem;
import mx.charts.events.ChartItemEvent;
[Bindable]
public var chartDP:Array = [
{wedgeName:'Pie wedge 1', percent:45 },
{wedgeName:'Pie wedge 2', percent:25},
{wedgeName:'Pie wedge 5', percent:22},
{wedgeName:'Pie wedge 4', percent:8}
];
private function pieChart_itemClick(evt:ChartItemEvent):void {
var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
myTextArea.text += “\rwedgeName: “+psi.item.wedgeName+” percent: “+ psi.item.percent;
}
]]<
>/fx:Script<
>s:VGroup<
>mx:PieSeries id=”pieSeries”
field=”percent”<
>/mx:PieSeries<
>/mx:series<
>/mx:PieChart>
>s:TextArea id=”myTextArea” y=”82″ width=”350″ height=”250″ /<
>/s:VGroup<
>/s:Application<
Ooos.
Switched the < and >
Damn this html formatting!
Here it is fixed (I hope)
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”
>
<fx:Script>
<![CDATA[
import mx.charts.series.items.PieSeriesItem;
import mx.charts.events.ChartItemEvent;
[Bindable]
public var chartDP:Array = [
{wedgeName:'Pie wedge 1', percent:45 },
{wedgeName:'Pie wedge 2', percent:25},
{wedgeName:'Pie wedge 5', percent:22},
{wedgeName:'Pie wedge 4', percent:8}
];
private function pieChart_itemClick(evt:ChartItemEvent):void {
var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
myTextArea.text += “\rwedgeName: “+psi.item.wedgeName+” percent: “+ psi.item.percent;
}
]]<
</fx:Script>
<s:VGroup>
<mx:PieSeries id=”pieSeries”
field=”percent”>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<s:TextArea id=”myTextArea” y=”82″ width=”350″ height=”250″ />
</s:VGroup>
</s:Application>