Flex Examples
The following example shows how you can create a simple PieChart in Flex using ActionScript instead of MXML.
Full code after the jump.
<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/07/creating-a-simple-piechart-in-flex-using-actionscript/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.charts.PieChart;
import mx.charts.series.PieSeries;
import mx.collections.ArrayCollection;
private var medalsAC:ArrayCollection;
private var chart:PieChart;
private var series:PieSeries;
/**
* Create and return a simple ArrayCollection to
* use as a data provider.
*/
private function getDataProvider():ArrayCollection {
var arr:Array = [];
arr.push({label:"Product 1", data:3});
arr.push({label:"Product 2", data:1});
arr.push({label:"Product 3", data:4});
arr.push({label:"Product 4", data:1});
arr.push({label:"Product 5", data:5});
arr.push({label:"Product 6", data:9});
return new ArrayCollection(arr);
}
private function init():void {
medalsAC = getDataProvider();
/* Define pie series. */
series = new PieSeries();
series.nameField = "label";
series.field = "data";
/* Remove default dropshadow filter. */
series.filters = [];
/* Define pie chart. */
chart = new PieChart();
chart.percentWidth = 100;
chart.percentHeight = 100;
chart.showDataTips = true;
chart.dataProvider = medalsAC;
chart.series = [series];
/* Add chart to the display list. */
addChild(chart);
}
]]>
</mx:Script>
</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
that piechart and pieseries functions are not working properly
What error are you seeing?
Also, which version/build of the Flex SDK are you using?
Peter
Great! But how get the selected item on mouseclick on piece of the pie (actualy label and data selected piece)?
yurec,
Check out “Displaying a PieSeries item’s data when a user clicks an item in a Flex PieChart control”.
The trick is setting an event listener for the
itemClickevent on the PieChart, and then doing something like the following:private function pieChart_itemClick(evt:ChartItemEvent):void { var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem; var obj:Object = psi.item; Alert.show("data=" + obj.@data + "\\n" + "percentValue=" + psi.percentValue.toFixed(1) + "%", "label=" + obj.@label); }Hope that helps,
Peter
Have any sample for bar chart using AS3??
in the mxml part the bar chart should have categoryField=”month” like below
but in AS3 “columnID.horizontalAxis.” after “.” hasn’t “categoryField” so how can i set up the categoryField in AS3?
this is your data provider function below
private function getDataProvider():ArrayCollection { var arr:Array = []; arr.push({label:"Product 1", data:3}); ..... return new ArrayCollection(arr); }i want to dynamically assign the values of data to the results gotten from your rpc remote call result. for instance the array collection would be:
private function getDataProvider():ArrayCollection { var arr:Array = []; arr.push({label:"Product 1", data:result.result[0]}); ..... return new ArrayCollection(arr); }Any Help on this ? Thanks
How an I set the labelPosition property to “callout”. Seems as if this property is not available when defining the pie chart in as3 rather then mxml.
Todd,
I haven’t tried it, but
labelPositionseems to be a style, not a property (in case that helps): http://livedocs.adobe.com/flex/3/langref/mx/charts/series/PieSeries.html#style:labelPositionPeter
Hai,
how to apply the effects in the above chart using action script?
i NEED to load a pie chart using data from a database using coldfusion 8 back end!!!! send me the codes please….
How can I drag the edge of the per Explored Wedge to change its amount (percentage)
@Jeck,
As far as I know, the Flex components do not support that by default. You’d have to code that logic yourself, or find a custom component that supports that.
Peter
Thanks so much. How to create the pie chart with two fragments where the user should be able to adjust the angle of the selected pie fragment by dragging angle selector. When a user changes a selected pie fragment, the chart should display % or degree of rotation.
Kiran
I think its the same question asked by Jeck. I would appreciate any help ..an idea on how to approach this problem.
Phani
@Kiran/Phani,
I don’t know how/if you could do that with the PieChart in Flex. You could either try extending the PieChart component and adding that logic yourself, or maybe there is a third party component that does something like this. I recommend asking on the FlexCoders mailing list and see if anybody has any ideas or knows of any other components that would do this.
Peter
Peter,
First off thank you so much for all of these fantastic examples. They have helped me so much.
Am hoping you can help with this;
I am trying to embed a font for the pie series but it disables the text completely. I can style it for legacy fonts though.
Haven’t been able to find anything that speaks to this issue.
Thanks….good article