views:

1150

answers:

2

I'm trying to use a BarChart in Flex. I'd like it to order the bars according to the order of the ArrayCollection I fed it. i.e. data at index 0 should be the first bar on top. However, Flex is giving me the exact reverse order. i.e. data at index 0 is not the last bar in bottom.

How could I tell the BarChart to reverse the order other than reversing the order of my ArrayCollection? Thanks!!

Here's the block of code in my script tag:

[Bindable]
private var optionsArray:ArrayCollection = new ArrayCollection([
   new VotingOption('Yes, it rocks!', 'yes', 5),
  new VotingOption('Meh, it is okay!', 'ok', 10),
  new VotingOption('No, it sucks!', 'no', 15)
]);

And here's my BarChart code:

<mx:BarChart x="9.1" y="8" id="barchart1" width="563.0303" height="454.01514" maxBarWidth="30" 
 type="overlaid" dataProvider="{optionsArray}" showAllDataTips="true">

 <mx:verticalAxis>
  <mx:CategoryAxis id="vertAxis" categoryField="optionSMSCode"/>
 </mx:verticalAxis>

 <mx:verticalAxisRenderers>
  <mx:AxisRenderer axis="{vertAxis}" showLabels="false"/>  
 </mx:verticalAxisRenderers>

 <mx:series>
  <mx:BarSeries xField="optionResult" showDataEffect="morph"/>
 </mx:series>
</mx:BarChart>
+2  A: 

The output that you are getting is correct according to how Flex BarCharts work, and this is also the output you should be expecting. The origin is at the bottom_left, and as such objects/lists start at the bottom_left and continue outward towards the the top and to the right.
http://livedocs.adobe.com/flex/3/html/help.html?content=charts%5Ftypes%5F03.html

I do understand visually how you would interpret it the reverse way. So let's say that someone gave you that dataProvider/ArrayCollection in that order, but you wanted to visualize in the reverse order. I would either 1)

//public var data:ArrayCollection;
data.source.reverse();

http://livedocs.adobe.com/flex/3/langref/Array.html

or 2)
reverse the labels on the vertical axis using the AxisRenderer.labelFunction property.
http://stackoverflow.com/questions/904681/flex-inverting-linearaxis-values

Luis B
Thanks a lot for the answer. It's insightful that you pointed out that the origin is at bottom_left. I tried switching the origin to top_left, hoping it'll reverse the order, by placing the horizontal axix on top. But it still didn't work. Is there other ways?Reversing the data source order does not work for me, because I have other things relying on the orginal order. But thx for pointing the function out. Now I can hack it to return a new reversed array.As for reversing the label, I couldn't think of a good way to reverse my categorical axis, as they did with the linear axis (* -1).
tomato
A: 

The solution is simple. Make a new array or array collection (you might have to override the dataProvider property of the chart) using the same objects and sort them.

Prashant Jain