Search code examples
actionscript-3apache-flexpie-chartflex4.6flex-mobile

Display 3 pie charts in a Flex mobile View - test case and screenshots attached

I display 3 pie charts for every user of a game in a very simple View (the source code is pasted below).

The charts represent opinions of other players - if the displayed user plays good, fair, nice.

So I fetch the JSON data from a PHP script using 3 URLLoaders and place it into 3 ArrayCollections: _acGood, _acFair and _acNice

My problem is the layout - in portrait mode the pie charts have different sizes (probably depending on when which data loads):

portrait

And in the landscape mode they aren't readable (too small):

landscape

My intention is actually to display all pie charts "full-sized" and in a Scroller - scrollable vertically (in portrait mode) and horizontally (when in landscape mode).

Here is my current test code - it will work instantly if you place these 2 files into a Flash Builder project -

Main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.Home" />

Home.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        viewActivate="startLoading(event)"
        title="Display 3 pie charts">

    <fx:Declarations>
        <s:ArrayCollection id="_acGood" />
        <s:ArrayCollection id="_acFair" />
        <s:ArrayCollection id="_acNice" />
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import spark.events.ViewNavigatorEvent;

            private static const PLAYER_ID:String = 'DE11198';

            private static const STATS_GOOD:String = 'http://preferans.de/rep-json.php?title=good&id=';
            private static const STATS_FAIR:String = 'http://preferans.de/rep-json.php?title=fair&id=';
            private static const STATS_NICE:String = 'http://preferans.de/rep-json.php?title=nice&id=';

            private var _urlLoaderGood:URLLoader = new URLLoader();
            private var _urlLoaderFair:URLLoader = new URLLoader();
            private var _urlLoaderNice:URLLoader = new URLLoader();

            private function startLoading(event:ViewNavigatorEvent):void {
                _urlLoaderGood.addEventListener(Event.COMPLETE, handleCompleteGood);
                _urlLoaderFair.addEventListener(Event.COMPLETE, handleCompleteFair);
                _urlLoaderNice.addEventListener(Event.COMPLETE, handleCompleteNice);

                _urlLoaderGood.load(new URLRequest(STATS_GOOD + PLAYER_ID));
                _urlLoaderFair.load(new URLRequest(STATS_FAIR + PLAYER_ID));
                _urlLoaderNice.load(new URLRequest(STATS_NICE + PLAYER_ID));
            }

            private function handleCompleteGood(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);

                _acGood.removeAll();
                for each (var row:Object in obj.rows) {
                    _acGood.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteFair(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acFair.removeAll();
                for each (var row:Object in obj.rows) {
                    _acFair.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteNice(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acNice.removeAll();
                for each (var row:Object in obj.rows) {
                    _acNice.addItem({ label: 'Общаться ' + row.c[0].v, data: row.c[1].v });
                }
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="portrait"/>
        <s:State name="landscape"/>
    </s:states> 

    <s:layout.portrait>
        <s:VerticalLayout horizontalAlign="center" />
    </s:layout.portrait>
    <s:layout.landscape>
        <s:HorizontalLayout verticalAlign="middle" />
    </s:layout.landscape>

    <mx:PieChart id="_good" 
                 height="100%" 
                 width="100%"
                 dataProvider="{_acGood}" >

        <mx:series>
            <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                <mx:fills>
                    <mx:SolidColor color="0x66CC66" />
                    <mx:SolidColor color="0xCC0000" />
                </mx:fills>             
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

    <mx:PieChart id="_fair" 
                 height="100%" 
                 width="100%"
                 dataProvider="{_acFair}" >

        <mx:series>
            <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                <mx:fills>
                    <mx:SolidColor color="0x66CC66" />
                    <mx:SolidColor color="0xCC0000" />
                </mx:fills>             
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>  

    <mx:PieChart id="_nice" 
                 height="100%" 
                 width="100%"
                 dataProvider="{_acNice}" >

        <mx:series>
            <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                <mx:fills>
                    <mx:SolidColor color="0x66CC66" />
                    <mx:SolidColor color="0xCC0000" />
                </mx:fills>             
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>  

</s:View>

UPDATE:

My new code with Scroller still has same usability problems (labels unreadable, pies of uneven sizes):

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        viewActivate="startLoading(event)"
        title="Display 3 pie charts">

    <fx:Declarations>
        <s:ArrayCollection id="_acGood" />
        <s:ArrayCollection id="_acFair" />
        <s:ArrayCollection id="_acNice" />
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import spark.events.ViewNavigatorEvent;

            private static const PLAYER_ID:String = 'DE11198';

            private static const STATS_GOOD:String = 'http://preferans.de/rep-json.php?title=good&id=';
            private static const STATS_FAIR:String = 'http://preferans.de/rep-json.php?title=fair&id=';
            private static const STATS_NICE:String = 'http://preferans.de/rep-json.php?title=nice&id=';

            private var _urlLoaderGood:URLLoader = new URLLoader();
            private var _urlLoaderFair:URLLoader = new URLLoader();
            private var _urlLoaderNice:URLLoader = new URLLoader();

            private function startLoading(event:ViewNavigatorEvent):void {
                _urlLoaderGood.addEventListener(Event.COMPLETE, handleCompleteGood);
                _urlLoaderFair.addEventListener(Event.COMPLETE, handleCompleteFair);
                _urlLoaderNice.addEventListener(Event.COMPLETE, handleCompleteNice);

                _urlLoaderGood.load(new URLRequest(STATS_GOOD + PLAYER_ID));
                _urlLoaderFair.load(new URLRequest(STATS_FAIR + PLAYER_ID));
                _urlLoaderNice.load(new URLRequest(STATS_NICE + PLAYER_ID));
            }

            private function handleCompleteGood(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);

                _acGood.removeAll();
                for each (var row:Object in obj.rows) {
                    _acGood.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteFair(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acFair.removeAll();
                for each (var row:Object in obj.rows) {
                    _acFair.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteNice(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acNice.removeAll();
                for each (var row:Object in obj.rows) {
                    _acNice.addItem({ label: 'Общаться ' + row.c[0].v, data: row.c[1].v });
                }
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="portrait"/>
        <s:State name="landscape"/>
    </s:states> 

    <s:Scroller 
        width="100%" 
        height="100%"
        verticalScrollPolicy.portrait="on"
        horizontalScrollPolicy.landscape="on">

        <s:Group width="100%" height="100%">

            <s:layout.portrait>
                <s:VerticalLayout />
            </s:layout.portrait>
            <s:layout.landscape>
                <s:HorizontalLayout />
            </s:layout.landscape>

            <mx:PieChart id="_good" 
                         width.portrait="100%"
                         height.landscape="100%"
                         paddingRight="8" 
                         paddingLeft="8" 
                         dataProvider="{_acGood}" >

                <mx:series>
                    <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                        <mx:fills>
                            <mx:SolidColor color="0x66CC66" />
                            <mx:SolidColor color="0xCC0000" />
                        </mx:fills>             
                    </mx:PieSeries>
                </mx:series>
            </mx:PieChart>

            <mx:PieChart id="_fair" 
                         width.portrait="100%"
                         height.landscape="100%"
                         paddingRight="8" 
                         paddingLeft="8" 
                         dataProvider="{_acFair}" >

                <mx:series>
                    <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                        <mx:fills>
                            <mx:SolidColor color="0x66CC66" />
                            <mx:SolidColor color="0xCC0000" />
                        </mx:fills>             
                    </mx:PieSeries>
                </mx:series>
            </mx:PieChart>  

            <mx:PieChart id="_nice" 
                         width.portrait="100%"
                         height.landscape="100%"
                         paddingRight="8" 
                         paddingLeft="8" 
                         dataProvider="{_acNice}" >

                <mx:series>
                    <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                        <mx:fills>
                            <mx:SolidColor color="0x66CC66" />
                            <mx:SolidColor color="0xCC0000" />
                        </mx:fills>             
                    </mx:PieSeries>
                </mx:series>
            </mx:PieChart>

        </s:Group>
    </s:Scroller>
</s:View>
Solution

  • If you place each pie chart inside a container with a set width, then the scroller will become active. I pie charts will always resize small to fit the screen if set to 100%.

    B

    P.S. the comment above about the pie chart labels is also correct. There is an option to place the labels inside the piechart - PieSeries.labelPosition = inside