1 Reply Latest reply on Oct 3, 2012 10:08 AM by bobbybeag

    Flex Chart Sorting ColumnSeries Order

    bobbybeag

      Hi there,

       

      I am trying to create a BarChart that will display values within a ColumnSeries in an order dependant of there value. 

       

      So for instance, If I had a ColumnSeries  in a BarChart , one showing profit, the other showing expenses, it will render correctly if the profit is more than the expenses because the expenses series is rendered on top.  However, if the expenses is MORE than profit, the profit will not be viewable as it will be rendered underneath expenses.

       

       

      At this point I am going to try and include an image to display my problem...

       

       

      BarChartExample1.jpg

       

       

      The image shows that profit in February is 500 BUT the profit of 300 in January is hidden because the Expenses is displaying over it.

       

       

      Below is the code used to create this example:

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

                <mx:Script><![CDATA[

                          import mx.collections.ArrayCollection;

                          [Bindable]

                          public var expenses:ArrayCollection = new ArrayCollection([

                                    {Month:"Jan", Profit:300, Expenses:500},

                                    {Month:"Feb", Profit:500, Expenses:300}

                          ]);

                ]]></mx:Script>

                <mx:Panel title="Bar Chart">

                          <mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true" type="overlaid" >

                                    <mx:verticalAxis>

                                              <mx:CategoryAxis  dataProvider="{expenses}" categoryField="Month" />

                                    </mx:verticalAxis>

       

                                    <mx:series>

                                              <mx:BarSeries yField="Month" xField="Profit" displayName="Profit" />

                                              <mx:BarSeries yField="Month" xField="Expenses" displayName="Expenses" />

                                    </mx:series>

                          </mx:BarChart>

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

                </mx:Panel>

      </mx:Application>

       

       

       

      An obvious solution to this would be to make the BarChart type 'clustered' as both values will be seen, however my client requires the BarChart to be 'overlaid', so currently some smaller values are hidden. 'Stacked' also does not provide a solution as it places the values on top of each other rather then infront/behind eachother.

       

       

      I would expect that there is a way to sort the order of the BarSeries based upon which value is the lesser/greater but I can't seem to find how and I would really appreciate someone's superior knowledge on charting.