Creating a simple PieChart in Flex using ActionScript

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.

17 thoughts on “Creating a simple PieChart in Flex using ActionScript

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

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

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

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

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

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

    1. @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

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

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

      Phani

      1. @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

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

Comments are closed.