Question

I have a column chart in flex that has quite a few columns, the user can choose to display in column order or overlaid. Depending on the users screen it makes the chart more readable.
However, is then any call I can make to have the overlay order change depending on the data. i.e. Largest data column a the back, overlaid by the next largest so on and so fourth until the smallest column is on top.
Currently default behavior some of the small columns are obscured by the larger columns, I don’t want to change alpha values to do this. (first of all thanks to flashharry! as
I have seen this question 2-3 times in some discussion forums, but not answered any where). Is this possible in flex column chart???

Any help would be immensely appreciated.

Thanks in advance..

@Serge Him

Code sample:- in the below code the profit of last two months are lesser than expense, so we cannot see the series as it is behind the expense series. I want the greater value will be always behind lesser value

<s:Application 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:Script>
        <![CDATA[

            import mx.collections.ArrayCollection;
            [Bindable]
            public var expenses:ArrayCollection = new ArrayCollection([
                {Month:"Jan", Profit:2000, Expenses:1500},
                {Month:"Feb", Profit:1000, Expenses:200},
                {Month:"Mar", Profit:1100, Expenses:500},
                {Month:"Apr", Profit:1300, Expenses:900},
                {Month:"May", Profit:900, Expenses:1200},
                {Month:"June", Profit:1500, Expenses:2500}
            ]);


        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:BorderContainer width="100%" height="100%" >
        <s:layout>
            <s:VerticalLayout horizontalAlign="center"/>
        </s:layout>
        <mx:ColumnChart id="myChart" width="65%"
                      dataProvider="{expenses}" 
                      showDataTips="true" 
                      type="overlaid"
                      >
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses}" 
                    categoryField="Month"
                    />
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries 
                    yField="Profit" 
                    displayName="Profit"
                    >
                    <mx:fill>
                        <s:SolidColor color="0x00ff00"/>
                    </mx:fill>
                    </mx:ColumnSeries>
                <mx:ColumnSeries 
                    yField="Expenses"
                    displayName="Expenses"
                    >
                    <mx:fill>
                        <s:SolidColor color="0xff0000"/>
                    </mx:fill>
                    </mx:ColumnSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
        <mx:DataGrid dataProvider="{expenses}" editable="true">
            <mx:columns>
                <mx:DataGridColumn dataField="Month" editable="true"/>
                <mx:DataGridColumn dataField="Profit" editable="true"/>
                <mx:DataGridColumn dataField="Expenses" editable="true"/>
            </mx:columns>
        </mx:DataGrid>
    </s:BorderContainer>
</s:Application>

Answer 1

I’ve studied your problem, deeping in initializing ColumnChart component. There is a feature, that all columns from series is placed in separate layer. So, either green columns are on the top or red. No posibility to change parent of one column from series…I’m afraid you have to override the basic behavior of component and place all columns in the same container and sort their depths. I drew an example:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="900" height="600">
    <fx:Script>
        <![CDATA[
            import mx.charts.series.items.ColumnSeriesItem;
            import mx.collections.ArrayCollection;

            [Bindable]
            public var expenses:ArrayCollection = new ArrayCollection([
                {Month:"Jan", Profit:200, Expenses:100, Expenses2:50},
                {Month:"Feb", Profit:1000, Expenses:2000, Expenses2:500},
                {Month:"Mar", Profit:1100, Expenses:500, Expenses2:100},
                {Month:"Apr", Profit:1300, Expenses:900, Expenses2:1000},
                {Month:"May", Profit:900, Expenses:1200, Expenses2:1000},
                {Month:"June", Profit:1000, Expenses:2000, Expenses2:1500}
            ]);

            private var items:Array = [];

            private function init():void
            {
                items = [];
                for (var i:int=0; i<myChart.series.length; i++)
                {
                    var series:ColumnSeries = myChart.series[i] as ColumnSeries;
                    for (var j:int=0; j<series.items.length; j++)
                    {
                        if (!items[j])
                            items[j] = [];

                        var item:ColumnSeriesItem = series.items[j] as ColumnSeriesItem;
                        items[j][i] = item;
                        series.parent.addChild(item.itemRenderer as DisplayObject);
                    }
                }
                sort();
            }

            private function sort():void
            {
                var h:Number = myChart.height - 50;
                for (var i:int=0; i<items.length; i++)
                {
                    var group:Array = items[i];
                    group.sort(sortFunction);
                    for (var j:int=0; j<group.length; j++)
                    {
                        var item:ColumnSeriesItem = group[j] as ColumnSeriesItem;
                        item.itemRenderer.parent.setChildIndex(item.itemRenderer as DisplayObject, group.length - j - 1);
                        item.min = NaN;
                        if (j > 0)
                            item.min = h - group[j-1].itemRenderer.height;
                    }
                }
            }

            private function sortFunction(item1:ColumnSeriesItem, item2:ColumnSeriesItem):int 
            {
                var yValue1:int = item1.item[Object(item1.element).yField];
                var yValue2:int = item2.item[Object(item2.element).yField];
                return (yValue1 < yValue2) ? -1 : (yValue1 > yValue2) ? 1 : 0;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:BorderContainer width="100%" height="100%" >
        <s:layout>
            <s:VerticalLayout horizontalAlign="center"/>
        </s:layout>
        <mx:ColumnChart id="myChart" width="65%"
                        dataProvider="{expenses}" 
                        showDataTips="true" 
                        type="overlaid"
                        updateComplete="init()"
                        >
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses}" 
                    categoryField="Month"
                    />
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries
                    yField="Profit" 
                    displayName="Profit"
                    >
                    <mx:fill>
                        <s:SolidColor color="0x00ff00"/>
                    </mx:fill>
                </mx:ColumnSeries>
                <mx:ColumnSeries 
                    yField="Expenses"
                    displayName="Expenses"
                    >
                    <mx:fill>
                        <s:SolidColor color="0xff0000"/>
                    </mx:fill>
                </mx:ColumnSeries>
                <mx:ColumnSeries 
                    yField="Expenses2"
                    displayName="Expenses2"
                    >
                    <mx:fill>
                        <s:SolidColor color="0xffff00"/>
                    </mx:fill>
                </mx:ColumnSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
        <mx:DataGrid dataProvider="{expenses}" editable="true">
            <mx:columns>
                <mx:DataGridColumn dataField="Month" editable="true"/>
                <mx:DataGridColumn dataField="Profit" editable="true"/>
                <mx:DataGridColumn dataField="Expenses" editable="true"/>
                <mx:DataGridColumn dataField="Expenses2" editable="true"/>
            </mx:columns>
        </mx:DataGrid>
    </s:BorderContainer>
</s:Application>