Flex Examples » PieChart http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the font weight on the MX Legend control in Flex 4 http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/ http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/#comments Wed, 24 Feb 2010 07:08:41 +0000 Peter deHaan http://blog.flexexamples.com/?p=2511 In a previous example, “Setting the font weight on a charting Legend control in Flex”, we saw how you could set the font weight of a Flex Charting Legend control by setting the fontWeight style on the LegendItem CSS selector.

The following example shows how you can set the font weight of an MX [...]]]> In a previous example, “Setting the font weight on a charting Legend control in Flex”, we saw how you could set the font weight of a Flex Charting Legend control by setting the fontWeight style on the LegendItem CSS selector.

The following example shows how you can set the font weight of an MX Legend control by setting the fontWeight style on the LegendItem CSS selector in Flex 4.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/ -->
<s:Application name="MX_LegendItem_fontWeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|LegendItem {
            fontWeight: normal;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:XMLListCollection id="dp">
            <s:source>
                <fx:XMLList>
                    <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" />
                </fx:XMLList>
            </s:source>
        </s:XMLListCollection>
    </fx:Declarations>
 
    <s:Panel left="20" right="20" top="20" bottom="20">
        <s:controlBarContent>
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </s:controlBarContent>
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

Or, if you wanted to use an embedded font, you could use the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/ -->
<s:Application name="MX_LegendItem_fontWeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/comic.ttf");
            fontFamily: myEmbeddedFont;
            fontWeight: normal;
            embedAsCFF: false;
        }
 
        mx|LegendItem {
            color: white;
            fontFamily: myEmbeddedFont;
            fontSize: 16;
            fontWeight: normal;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:XMLListCollection id="dp">
            <s:source>
                <fx:XMLList>
                    <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" />
                </fx:XMLList>
            </s:source>
        </s:XMLListCollection>
    </fx:Declarations>
 
    <s:Panel left="20" right="20" top="20" bottom="20">
        <s:controlBarContent>
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </s:controlBarContent>
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
    </s:Panel>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/23/setting-the-font-weight-on-the-mx-legend-control-in-flex-4/feed/ 0 Setting the horizontal and vertical gaps on a Legend control in Flex http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/#comments Tue, 30 Sep 2008 06:57:03 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ The following example shows how you can set the horizontal and vertical gaps on a Flex Legend control by setting the horizontalGap and verticalGap styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ --> <mx:Application name="Legend_horizontalGap_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <product label="Product 1" data="3" [...]]]> The following example shows how you can set the horizontal and vertical gaps on a Flex Legend control by setting the horizontalGap and verticalGap styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:">
                <mx:HSlider id="sliderHGap"
                        minimum="0"
                        maximum="100"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true"
                        dataTipPrecision="0" />
            </mx:FormItem>
            <mx:FormItem label="verticalGap:">
                <mx:HSlider id="sliderVGap"
                        minimum="0"
                        maximum="100"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true"
                        dataTipPrecision="0" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="{sliderHGap.value}"
                    verticalGap="{sliderVGap.value}"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

You can also set the horizontalGap and verticalGap styles in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Legend {
            horizontalGap: 100;
            verticalGap: 30;
        }
    </mx:Style>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Or, you can set the horizontalGap and verticalGap styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function sliderHGap_change(evt:SliderEvent):void {
                legend.setStyle("horizontalGap", evt.value);
            }

            private function sliderVGap_change(evt:SliderEvent):void {
                legend.setStyle("verticalGap", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:">
                <mx:HSlider id="sliderHGap"
                        minimum="0"
                        maximum="100"
                        value="8"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true"
                        dataTipPrecision="0"
                        change="sliderHGap_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="verticalGap:">
                <mx:HSlider id="sliderVGap"
                        minimum="0"
                        maximum="100"
                        value="6"
                        snapInterval="1"
                        tickInterval="25"
                        liveDragging="true"
                        dataTipPrecision="0"
                        change="sliderVGap_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend id="legend"
                    dataProvider="{pieChart}"
                    direction="horizontal"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/feed/ 0 Setting the marker width and height on a Legend control in Flex http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/#comments Mon, 29 Sep 2008 06:58:56 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ The following example shows how you can set the marker width and marker height on a Flex Legend control by setting the markerWidth and markerHeight styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ --> <mx:Application name="Legend_markerHeight_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <product label="Product 1" [...]]]> The following example shows how you can set the marker width and marker height on a Flex Legend control by setting the markerWidth and markerHeight styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="markerWidth:">
                <mx:HSlider id="markerWSlider"
                        minimum="5"
                        maximum="15"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="markerHeight:">
                <mx:HSlider id="markerHSlider"
                        minimum="5"
                        maximum="15"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar>
            <mx:Legend id="legend"
                    dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    markerWidth="{markerWSlider.value}"
                    markerHeight="{markerHSlider.value}" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

You can also set the markerWidth and markerHeight styles in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Legend {
            markerWidth: 5;
            markerHeight: 5;
        }
    </mx:Style>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Panel id="panel"
            styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar>
            <mx:Legend id="legend"
                    dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Or, you can set the markerWidth and markerHeight styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function markerWSlider_change(evt:SliderEvent):void {
                legend.setStyle("markerWidth", evt.value);
            }

            private function markerHSlider_change(evt:SliderEvent):void {
                legend.setStyle("markerHeight", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="markerWidth:">
                <mx:HSlider id="markerWSlider"
                        minimum="5"
                        maximum="15"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="markerWSlider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="markerHeight:">
                <mx:HSlider id="markerHSlider"
                        minimum="5"
                        maximum="15"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="markerHSlider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar>
            <mx:Legend id="legend"
                    dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    markerWidth="10"
                    markerHeight="10" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.charts.Legend;
            import mx.charts.PieChart;
            import mx.charts.series.PieSeries;
            import mx.collections.XMLListCollection;
            import mx.containers.ApplicationControlBar;
            import mx.containers.ControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.Panel;
            import mx.containers.TileDirection;
            import mx.controls.HSlider;
            import mx.events.SliderEvent;

            private var dp:XMLListCollection;
            private var legend:Legend;
            private var markerHSlider:HSlider;
            private var markerWSlider:HSlider;
            private var panel:Panel;
            private var pieChart:PieChart;
            private var pieSeries:PieSeries;

            private function init():void {
                var xmlDP:XML = <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>;

                dp = new XMLListCollection(xmlDP.product);

                markerWSlider = new HSlider();
                markerWSlider.minimum = 5;
                markerWSlider.maximum = 15;
                markerWSlider.value = 10;
                markerWSlider.snapInterval = 1;
                markerWSlider.tickInterval = 1;
                markerWSlider.liveDragging = true;
                markerWSlider.addEventListener(SliderEvent.CHANGE,
                            markerWSlider_change);

                markerHSlider = new HSlider();
                markerHSlider.minimum = 5;
                markerHSlider.maximum = 15;
                markerHSlider.value = 10;
                markerHSlider.snapInterval = 1;
                markerHSlider.tickInterval = 1;
                markerHSlider.liveDragging = true;
                markerHSlider.addEventListener(SliderEvent.CHANGE,
                            markerHSlider_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "markerWidth:";
                formItem1.addChild(markerWSlider);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "markerHeight:";
                formItem2.addChild(markerHSlider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];

                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = true;
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];

                legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.setStyle("horizontalGap", 100);
                legend.setStyle("markerWidth", markerWSlider.value);
                legend.setStyle("markerHeight", markerHSlider.value);

                var controlBar:ControlBar = new ControlBar();
                controlBar.addChild(legend);

                panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(controlBar);
                addChild(panel);
            }

            private function markerWSlider_change(evt:SliderEvent):void {
                legend.setStyle("markerWidth", evt.value);
            }

            private function markerHSlider_change(evt:SliderEvent):void {
                legend.setStyle("markerHeight", evt.value);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/feed/ 0 Setting the label placement on a Legend control in Flex http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/#comments Sun, 28 Sep 2008 05:28:47 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ The following example shows how you can set the label placement on a Flex Legend control by setting the labelPlacement style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ --> <mx:Application name="Legend_labelPlacement_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <product label="Product 1" data="3" /> <product label="Product 2" [...]]]> The following example shows how you can set the label placement on a Flex Legend control by setting the labelPlacement style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="directionCB">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="horizontal" />
                            <mx:Object label="vertical" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="labelPlacementCB" selectedIndex="1">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="right" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="{directionCB.value}"
                    labelPlacement="{labelPlacementCB.value}"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

You can also set the labelPlacement style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Legend {
            labelPlacement: left;
        }
    </mx:Style>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="directionCB">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="horizontal" />
                            <mx:Object label="vertical" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="{directionCB.value}"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Or, you can set the labelPlacement style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function directionCB_change(evt:ListEvent):void {
                legend.direction = directionCB.value.toString();
            }

            private function labelPlacementCB_change(evt:ListEvent):void {
                legend.setStyle("labelPlacement", labelPlacementCB.value);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="directionCB"
                        change="directionCB_change(event);">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="horizontal" />
                            <mx:Object label="vertical" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="labelPlacementCB"
                        selectedIndex="1"
                        change="labelPlacementCB_change(event);">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="right" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend id="legend"
                    dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.charts.Legend;
            import mx.charts.PieChart;
            import mx.charts.series.PieSeries;
            import mx.collections.XMLListCollection;
            import mx.containers.ApplicationControlBar;
            import mx.containers.ControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.Panel;
            import mx.containers.TileDirection;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.ComboBox;
            import mx.events.ListEvent;

            private var directionCB:ComboBox;
            private var dp:XMLListCollection;
            private var labelPlacementCB:ComboBox;
            private var legend:Legend;
            private var panel:Panel;
            private var pieChart:PieChart;
            private var pieSeries:PieSeries;

            private function init():void {
                var data:XML = <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>;

                dp = new XMLListCollection(data.product);

                var directionDP:Array = [];
                directionDP.push({label:TileDirection.HORIZONTAL});
                directionDP.push({label:TileDirection.VERTICAL});

                directionCB = new ComboBox();
                directionCB.dataProvider = directionDP;
                directionCB.addEventListener(ListEvent.CHANGE,
                            directionCB_change);

                var labelPlacementDP:Array = [];
                labelPlacementDP.push({label:ButtonLabelPlacement.LEFT});
                labelPlacementDP.push({label:ButtonLabelPlacement.RIGHT});

                labelPlacementCB = new ComboBox();
                labelPlacementCB.dataProvider = labelPlacementDP;
                labelPlacementCB.selectedIndex = 1;
                labelPlacementCB.addEventListener(ListEvent.CHANGE,
                            labelPlacementCB_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "direction:";
                formItem1.addChild(directionCB);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "labelPlacement:";
                formItem2.addChild(labelPlacementCB);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];

                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];

                legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.percentWidth = 100;
                legend.setStyle("horizontalGap", 100);

                var controlBar:ControlBar = new ControlBar();
                controlBar.addChild(legend);

                panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(controlBar);
                addChild(panel);
            }

            private function directionCB_change(evt:ListEvent):void {
                legend.direction = directionCB.value.toString();
            }

            private function labelPlacementCB_change(evt:ListEvent):void {
                legend.setStyle("labelPlacement", labelPlacementCB.value);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/feed/ 1 Setting a custom label function on a PieChart in Flex http://blog.flexexamples.com/2008/09/26/setting-a-custom-label-function-on-a-piechart-in-flex/ http://blog.flexexamples.com/2008/09/26/setting-a-custom-label-function-on-a-piechart-in-flex/#comments Fri, 26 Sep 2008 13:02:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/26/setting-a-custom-label-function-on-a-piechart-in-flex/ The following example shows how you can set a custom label function on a Flex PieChart control by setting the labelFunction property on the PieSeries object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/26/setting-a-custom-label-function-on-a-piechart-in-flex/ --> <mx:Application name="PieSeries_labelFunction_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.utils.StringUtil; private function pieSeries_labelFunc(item:Object, [...]]]> The following example shows how you can set a custom label function on a Flex PieChart control by setting the labelFunction property on the PieSeries object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/26/setting-a-custom-label-function-on-a-piechart-in-flex/ -->
<mx:Application name="PieSeries_labelFunction_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.StringUtil;

            private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
                return StringUtil.substitute("{0} ({1}%)",
                            item.@label,
                            percentValue.toFixed(1));
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="false"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        labelPosition="callout"
                        labelFunction="pieSeries_labelFunc" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/26/setting-a-custom-label-function-on-a-piechart-in-flex/ -->
<mx:Application name="PieSeries_labelFunction_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.charts.Legend;
            import mx.charts.PieChart;
            import mx.charts.chartClasses.Series;
            import mx.charts.series.PieSeries;
            import mx.collections.XMLListCollection;
            import mx.containers.ControlBar;
            import mx.containers.Panel;
            import mx.containers.TileDirection;
            import mx.utils.StringUtil;

            private var dp:XMLListCollection;
            private var legend:Legend;
            private var panel:Panel;
            private var pieChart:PieChart;
            private var pieSeries:PieSeries;

            private function init():void {
                var productsXML:XML = <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>;

                dp = new XMLListCollection(productsXML.product);

                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.labelFunction = pieSeries_labelFunc;
                pieSeries.setStyle("labelPosition", "callout");

                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = false;
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];

                legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.setStyle("horizontalGap", 100);
                legend.percentWidth = 100;

                var controlBar:ControlBar = new ControlBar();
                controlBar.percentWidth = 100;
                controlBar.addChild(legend);

                panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(controlBar);
                addChild(panel);
            }

            private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
                return StringUtil.substitute("{0} ({1}%)",
                            item.@label,
                            percentValue.toFixed(1));
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/26/setting-a-custom-label-function-on-a-piechart-in-flex/feed/ 3 Setting the font weight on a charting Legend control in Flex http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/ http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/#comments Fri, 26 Sep 2008 06:31:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/ The following example shows how you can set the font weight of a Flex Charting Legend control by setting the fontWeight style on the LegendItem CSS selector.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/ --> <mx:Application name="LegendItem_fontWeight_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Style> LegendItem { fontWeight: normal; } </mx:Style>   <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <product label="Product [...]]]> The following example shows how you can set the font weight of a Flex Charting Legend control by setting the fontWeight style on the LegendItem CSS selector.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/ -->
<mx:Application name="LegendItem_fontWeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        LegendItem {
            fontWeight: normal;
        }
    </mx:Style>
 
    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>
 
</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/ -->
<mx:Application name="LegendItem_fontWeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.charts.Legend;
            import mx.charts.PieChart;
            import mx.charts.series.PieSeries;
            import mx.collections.XMLListCollection;
            import mx.containers.ControlBar;
            import mx.containers.Panel;
            import mx.containers.TileDirection;
 
            private var dp:XMLListCollection;
            private var legend:Legend;
            private var panel:Panel;
            private var pieChart:PieChart;
            private var pieSeries:PieSeries;
 
            private function init():void {
                dp = new XMLListCollection();
                dp.addItem(<product label="Product 1" data="3" />);
                dp.addItem(<product label="Product 2" data="1" />);
                dp.addItem(<product label="Product 3" data="4" />);
                dp.addItem(<product label="Product 4" data="1" />);
                dp.addItem(<product label="Product 5" data="5" />);
                dp.addItem(<product label="Product 6" data="9" />);
 
                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];
 
                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = true;
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];
 
                legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.percentWidth = 100;
                legend.setStyle("horizontalGap", 100);
 
                var controlBar:ControlBar = new ControlBar();
                controlBar.percentWidth = 100;
                controlBar.addChild(legend);
 
                panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(legend);
                addChild(panel);
 
                var legendItemCSS:CSSStyleDeclaration;
                legendItemCSS = StyleManager.getStyleDeclaration("LegendItem");
                legendItemCSS.setStyle("fontWeight", "normal");
            }
        ]]>
    </mx:Script>
 
</mx:Application>

For an example of changing the fontWeight style on the MX Legend control in Flex 4, see “Setting the font weight on the MX Legend control in Flex 4″.

 
]]> http://blog.flexexamples.com/2008/09/25/setting-the-font-weight-on-a-charting-legend-control-in-flex/feed/ 7 Toggling data tip targets on a PieChart in Flex http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/#comments Sun, 14 Sep 2008 05:19:59 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ In a previous example, “Toggling data tips on a PieChart in Flex”, we saw how you could toggle data tips on a Flex PieChart control by setting the showDataTips property.

The following example shows how you can toggle data tip targets on a Flex PieChart control by setting the showDataTipTargets style.

Full code after [...]]]> In a previous example, “Toggling data tips on a PieChart in Flex”, we saw how you could toggle data tips on a Flex PieChart control by setting the showDataTips property.

The following example shows how you can toggle data tip targets on a Flex PieChart control by setting the showDataTipTargets style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showDataTipTargets:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                showDataTipTargets="{checkBox.selected}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

You can also set the showDataTipTargets style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        PieChart {
            showDataTipTargets: false;
        }
    </mx:Style>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Or, you can set the showDataTipTargets style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                pieChart.setStyle("showDataTipTargets", checkBox.selected);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showDataTipTargets:"
                labelPlacement="left"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="true"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.charts.Legend;
            import mx.charts.PieChart;
            import mx.charts.series.PieSeries;
            import mx.collections.XMLListCollection;
            import mx.containers.ApplicationControlBar;
            import mx.containers.ControlBar;
            import mx.containers.Panel;
            import mx.containers.TileDirection;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.CheckBox;

            private var dp:XMLListCollection;
            private var checkBox:CheckBox;
            private var pieChart:PieChart;
            private var pieSeries:PieSeries;

            private function init():void {
                var productsXML:XML = <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>;
                dp = new XMLListCollection(productsXML.product);

                checkBox = new CheckBox();
                checkBox.label = "showDataTipTargets:";
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(checkBox);
                addChildAt(appControlBar, 0);

                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];

                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = true;
                pieChart.setStyle("showDataTipTargets", true);
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];

                var legend:Legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.setStyle("horizontalGap", 100);
                legend.percentWidth = 100;

                var panelControlBar:ControlBar = new ControlBar();
                panelControlBar.percentWidth = 100;
                panelControlBar.addChild(legend);

                var panel:Panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(panelControlBar);
                addChild(panel);
            }

            private function checkBox_change(evt:Event):void {
                pieChart.setStyle("showDataTipTargets", checkBox.selected);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/feed/ 2 Toggling data tips on a PieChart in Flex http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/#comments Sun, 14 Sep 2008 05:08:14 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ The following example shows how you can toggle data tips on a Flex PieChart control by setting the showDataTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ --> <mx:Application name="PieChart_showDataTips_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <product label="Product 1" data="3" /> <product label="Product 2" data="1" [...]]]> The following example shows how you can toggle data tips on a Flex PieChart control by setting the showDataTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTips_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showDataTips:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                showDataTips="{checkBox.selected}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.


You can also set the showDataTips using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTips_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                pieChart.showDataTips = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showDataTips:"
                labelPlacement="left"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:Panel styleName="opaquePanel"
            width="100%"
            height="100%">
        <mx:PieChart id="pieChart"
                dataProvider="{dp}"
                height="100%"
                width="100%">
            <mx:series>
                <mx:PieSeries id="pieSeries"
                        field="@data"
                        nameField="@label"
                        filters="[]" />
            </mx:series>
        </mx:PieChart>
        <mx:ControlBar width="100%">
            <mx:Legend dataProvider="{pieChart}"
                    direction="horizontal"
                    horizontalGap="100"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTips_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.charts.Legend;
            import mx.charts.PieChart;
            import mx.charts.series.PieSeries;
            import mx.collections.XMLListCollection;
            import mx.containers.ApplicationControlBar;
            import mx.containers.ControlBar;
            import mx.containers.Panel;
            import mx.containers.TileDirection;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.CheckBox;

            private var dp:XMLListCollection;
            private var checkBox:CheckBox;
            private var pieChart:PieChart;
            private var pieSeries:PieSeries;

            private function init():void {
                var productsXML:XML = <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>;
                dp = new XMLListCollection(productsXML.product);

                checkBox = new CheckBox();
                checkBox.label = "showDataTips:";
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change)

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(checkBox);
                addChildAt(appControlBar, 0);

                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];

                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = true;
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];

                var legend:Legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.setStyle("horizontalGap", 100);
                legend.percentWidth = 100;

                var panelControlBar:ControlBar = new ControlBar();
                panelControlBar.percentWidth = 100;
                panelControlBar.addChild(legend);

                var panel:Panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(panelControlBar);
                addChild(panel);
            }

            private function checkBox_change(evt:Event):void {
                pieChart.showDataTips = checkBox.selected;
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/feed/ 2 Animating a Flex PieChart control’s rotation when a user clicks on an item http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/ http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/#comments Thu, 22 Nov 2007 08:12:46 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/ In a previous example, “Rotating a Flex PieChart control when a user clicks on an item”, we looked at changing a PieChart’s rotation when the user clicked on a pie wedge. In the following example, we look at how to add a nice animation effect with some easing to make the effect a bit [...]]]> In a previous example, “Rotating a Flex PieChart control when a user clicks on an item”, we looked at changing a PieChart’s rotation when the user clicked on a pie wedge. In the following example, we look at how to add a nice animation effect with some easing to make the effect a bit more smooth.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
            import mx.charts.series.items.PieSeriesItem;
            import mx.charts.events.ChartItemEvent;

            private function pieChart_itemClick(evt:ChartItemEvent):void {
                var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
                var degrees:Number = radiansToDegrees(item.startAngle);
                var arr:Array = [];
                if (checkBox.selected) {
                    arr[item.index] = 0.2;
                }
                pieSeries.perWedgeExplodeRadius = arr;
                pieSeries.startAngle -= degrees;

                dp.refresh();
            }

            private function radiansToDegrees(radians:Number):Number {
                return radians * (180 / Math.PI);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="Use perWedgeExplodeRadius:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:PieChart id="pieChart"
            dataProvider="{dp}"
            showDataTips="true"
            itemClick="pieChart_itemClick(event);"
            height="100%"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data"
                    nameField="@label">
                <mx:showDataEffect>
                    <mx:SeriesInterpolate duration="1500"
                            easingFunction="{Elastic.easeOut}" />
                </mx:showDataEffect>
                <mx:filters>
                    <mx:DropShadowFilter />
                </mx:filters>
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

    <mx:Legend dataProvider="{pieChart}" direction="horizontal" />

</mx:Application>

View source is enabled in the following example.

But remember kids, just because you can add easing, doesn’t mean you always should! ;)

 
]]> http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/feed/ 11 Displaying a PieSeries item’s data when a user clicks an item in a Flex PieChart control http://blog.flexexamples.com/2007/11/15/displaying-a-pieseries-items-data-when-a-user-clicks-an-item-in-a-flex-piechart-control/ http://blog.flexexamples.com/2007/11/15/displaying-a-pieseries-items-data-when-a-user-clicks-an-item-in-a-flex-piechart-control/#comments Thu, 15 Nov 2007 15:40:47 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/15/displaying-a-pieseries-items-data-when-a-user-clicks-an-item-in-a-flex-piechart-control/ 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.

View MXML

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

View MXML

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

 
]]> http://blog.flexexamples.com/2007/11/15/displaying-a-pieseries-items-data-when-a-user-clicks-an-item-in-a-flex-piechart-control/feed/ 5