The following example shows how you can create a simple PieChart in Flex using ActionScript instead of MXML.

Full code after the jump.

View MXML

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

 
 
About The Author

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.

17 Responses to Creating a simple PieChart in Flex using ActionScript

  1. Anonymous says:

    that piechart and pieseries functions are not working properly

  2. peterd says:

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

    Peter

  3. yurec says:

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

  4. peterd says:

    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:

    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

  5. marco says:

    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 says:

    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 says:

    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 says:

    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

  9. murali says:

    Hai,

    how to apply the effects in the above chart using action script?

  10. mike says:

    i NEED to load a pie chart using data from a database using coldfusion 8 back end!!!! send me the codes please….

  11. Jeck says:

    How can I drag the edge of the per Explored Wedge to change its amount (percentage)

    • Peter deHaan says:

      @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

  12. Kiran says:

    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

    • Kiran says:

      I think its the same question asked by Jeck. I would appreciate any help ..an idea on how to approach this problem.

      Phani

      • Peter deHaan says:

        @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

  13. digsafe says:

    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.

  14. Anonymous says:

    Thanks….good article

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree