Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>So I've looked into it an i also can't see a straightforward way of flipping the axis. However i do have a solution that would work perfectly well and is relatively elegant giving the omission of a property to do this for you.</p> <p>So consider this normal left-to-right line chart (should just be able to copy and paste this into a project to test).</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"&gt; &lt;mx:Script&gt; &lt;![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var timeValue:ArrayCollection = new ArrayCollection( [ { Time: 0, Value: 18 }, { Time: 1, Value: 20 }, { Time: 2, Value: 30 }, { Time: 3, Value: 35 }, { Time: 4, Value: 35 }, { Time: 5, Value: 32 }, { Time: 6, Value: 40 }, { Time: 7, Value: 62 }, { Time: 8, Value: 80 }, { Time: 9, Value: 75 }, { Time: 10, Value: 76 } ]); ]]&gt; &lt;/mx:Script&gt; &lt;!-- Define custom colors for use as fills. --&gt; &lt;mx:SolidColor id="sc1" color="yellow" alpha=".8"/&gt; &lt;!-- Define custom Strokes for the columns. --&gt; &lt;mx:Stroke id="s1" color="yellow" weight="2"/&gt; &lt;mx:Panel title="ColumnChart and BarChart Controls Example" height="100%" width="100%" layout="horizontal"&gt; &lt;mx:LineChart id="column" height="100%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{timeValue}" &gt; &lt;mx:horizontalAxis&gt; &lt;mx:LinearAxis maximum="10" minimum="0"/&gt; &lt;/mx:horizontalAxis&gt; &lt;mx:verticalAxis&gt; &lt;mx:LinearAxis maximum="100" minimum="0" /&gt; &lt;/mx:verticalAxis&gt; &lt;mx:series&gt; &lt;mx:LineSeries xField="Time" yField="Value" displayName="TimeValue" fill="{sc1}" stroke="{s1}" /&gt; &lt;/mx:series&gt; &lt;/mx:LineChart&gt; &lt;/mx:Panel&gt; &lt;/mx:Application&gt; </code></pre> <p>To change this to a right-to-left chart, i do some inverting of the time values to make them negative and then plot them along an axis that uses a negative minimum and zero as the maximum. I also then run a function on the labels to make them positive again to fit the original data source. </p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"&gt; &lt;mx:Script&gt; &lt;![CDATA[ import mx.charts.chartClasses.IAxisRenderer; import mx.collections.ArrayCollection; [Bindable] private var timeValue:ArrayCollection = new ArrayCollection( [ { Time: 0, Value: 18 }, { Time: 1, Value: 20 }, { Time: 2, Value: 30 }, { Time: 3, Value: 35 }, { Time: 4, Value: 35 }, { Time: 5, Value: 32 }, { Time: 6, Value: 40 }, { Time: 7, Value: 62 }, { Time: 8, Value: 80 }, { Time: 9, Value: 75 }, { Time: 10, Value: 76 } ]); private function verticalAxisParseFunction(value : Number) : Number { return value * -1; } private function horizontalAxisRenderedLabelFunction(axisRenderer:IAxisRenderer, label:String):String { var labelAsNumber : Number = Number(label); if (isNaN(labelAsNumber)) { return label; } return (labelAsNumber * -1).toString(); } ]]&gt; &lt;/mx:Script&gt; &lt;!-- Define custom colors for use as fills. --&gt; &lt;mx:SolidColor id="sc1" color="yellow" alpha=".8"/&gt; &lt;!-- Define custom Strokes for the columns. --&gt; &lt;mx:Stroke id="s1" color="yellow" weight="2"/&gt; &lt;mx:Panel title="ColumnChart and BarChart Controls Example" height="100%" width="100%" layout="horizontal"&gt; &lt;mx:LineChart id="column" height="100%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{timeValue}" &gt; &lt;mx:horizontalAxis&gt; &lt;mx:LinearAxis id="horizontalAxis" maximum="0" minimum="-10" parseFunction="{verticalAxisParseFunction}"/&gt; &lt;/mx:horizontalAxis&gt; &lt;mx:verticalAxis&gt; &lt;mx:LinearAxis id="verticalAxis" maximum="100" minimum="0" /&gt; &lt;/mx:verticalAxis&gt; &lt;mx:horizontalAxisRenderers&gt; &lt;mx:AxisRenderer axis="{horizontalAxis}" labelFunction="{horizontalAxisRenderedLabelFunction}" /&gt; &lt;/mx:horizontalAxisRenderers&gt; &lt;mx:verticalAxisRenderers&gt; &lt;mx:AxisRenderer axis="{verticalAxis}" placement="right" /&gt; &lt;/mx:verticalAxisRenderers&gt; &lt;mx:series&gt; &lt;mx:LineSeries xField="Time" yField="Value" displayName="TimeValue" fill="{sc1}" stroke="{s1}" /&gt; &lt;/mx:series&gt; &lt;/mx:LineChart&gt; &lt;/mx:Panel&gt; &lt;/mx:Application&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload