Creating a simple PieChart in Flex using ActionScript at 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.

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

November 2007
M	T	W	T	F	S	S
« Oct		Dec »
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

November 2007

« Oct

Dec »

8 Responses to “Creating a simple PieChart in Flex using ActionScript”

Feed for this Entry View blog reactions

1 Anonymous Nov 12th, 2007 at 12:17 am

that piechart and pieseries functions are not working properly
2 peterd Nov 12th, 2007 at 10:20 am

What error are you seeing?
Also, which version/build of the Flex SDK are you using?

Peter
3 yurec Nov 15th, 2007 at 3:08 am

Great! But how get the selected item on mouseclick on piece of the pie (actualy label and data selected piece)?

4 peterd Nov 15th, 2007 at 8:42 am

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 itemClick event on the PieChart, and then doing something like the following:

Hope that helps,

Peter

5 marco May 7th, 2008 at 9:31 pm

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?

6 Hardin Sep 12th, 2008 at 6:57 pm

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

7 Todd Oct 30th, 2008 at 4:20 pm

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.
8 peterd Oct 30th, 2008 at 10:50 pm

Todd,

I haven’t tried it, but labelPosition seems to be a style, not a property (in case that helps): http://livedocs.adobe.com/flex/3/langref/mx/charts/series/PieSeries.html#style:labelPosition

Peter