I don't know if thats the correct term or not, but I'm trying to
change the behavior of the BarChart to match ColumnChart (in my mind
at least)

In the example below (modified from livedocs) theres a Column and Bar
chart side by side with a datagrid bound to the same array collection
at the bottom.  When you sort the datagrid by Gold Medals, highest to
lowest, the Column chart puts the tallest block first and shortest
last.  The BarChart however places the largest bar at the bottom and
the smallest at the top.  I'd like to have the largest result at the
top of the BarChart.

Is there a simple attribute that I'm not seeing or will it involve
changing around how the BarChart draws itself to get it to read 'Top
to Bottom' like the ColumnChart does 'Left to Right'


Example code, sort by medals:

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>

    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 45, Silver:19, Bronze: 29 },
                { Country: "China", Gold: 32, Silver:27, Bronze: 44 },
            { Country: "Russia", Gold: 27, Silver:37, Bronze: 18 } ]);

        ]]>
    </mx:Script>

    <mx:Panel title="ColumnChart and BarChart Controls Example"
        height="100%" width="100%" layout="horizontal">

        <mx:ColumnChart id="column" height="100%" width="45%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{medalsAC}">

            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:ColumnSeries xField="Country" yField="Gold"
displayName="Gold"/>
                <mx:ColumnSeries xField="Country" yField="Silver"
displayName="Silver"/>
                <mx:ColumnSeries xField="Country" yField="Bronze"
displayName="Bronze"/>
            </mx:series>
        </mx:ColumnChart>

        <mx:Legend dataProvider="{column}"/>

         <mx:BarChart id="bar" height="100%" width="45%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{medalsAC}">

            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:verticalAxis>

            <mx:series>
                <mx:BarSeries yField="Country" xField="Gold"
displayName="Gold"/>
                <mx:BarSeries yField="Country" xField="Silver"
displayName="Silver"/>
                <mx:BarSeries yField="Country" xField="Bronze"
displayName="Bronze"/>
            </mx:series>
        </mx:BarChart>

        <mx:Legend dataProvider="{bar}"/>

    </mx:Panel>
    <mx:Panel title="Raw Data">
        <mx:DataGrid dataProvider="{medalsAC}"/>
    </mx:Panel>
</mx:Application>

Reply via email to