Flex: Inverting LinearAxis values

Question

I have a line chart that is updated every so and so seconds, similar to the one you see in Windows' Task Manager. The chart goes right-to-left, with the most recent data on the right, and going leftwards. How would I invert the values of the X axis so that the lowest value is on the right and the highest on the left? It's a LinearAxis.

I tried making it a CategoryAxis and putting the numbers in manually, but that doesn't work the way it should (the labels are not aligned with the ticks).

Or, is there a way to have the labels in a CategoryAxis align with the ticks?

James Hay · Accepted Answer · 2009-07-03T08:22:55.403

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.

So consider this normal left-to-right line chart (should just be able to copy and paste this into a project to test).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![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 } ]);
        ]]>
    </mx:Script>

    <!-- Define custom colors for use as fills. -->
    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="yellow" weight="2"/>

    <mx:Panel title="ColumnChart and BarChart Controls Example" 
        height="100%" width="100%" layout="horizontal">
        <mx:LineChart id="column" 
            height="100%" 
            width="100%" 
            paddingLeft="5" 
            paddingRight="5" 
            showDataTips="true" 
            dataProvider="{timeValue}" >

            <mx:horizontalAxis>
                <mx:LinearAxis maximum="10" minimum="0"/>
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis maximum="100" minimum="0" />         
            </mx:verticalAxis>

            <mx:series>
                <mx:LineSeries 
                    xField="Time" 
                    yField="Value" 
                    displayName="TimeValue"
                    fill="{sc1}"
                    stroke="{s1}"
                />
            </mx:series>
        </mx:LineChart>

    </mx:Panel>
</mx:Application>

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.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![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();
            }

        ]]>
    </mx:Script>

    <!-- Define custom colors for use as fills. -->
    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="yellow" weight="2"/>

    <mx:Panel title="ColumnChart and BarChart Controls Example" 
        height="100%" width="100%" layout="horizontal">
        <mx:LineChart id="column" 
            height="100%" 
            width="100%" 
            paddingLeft="5" 
            paddingRight="5" 
            showDataTips="true" 
            dataProvider="{timeValue}" >

            <mx:horizontalAxis>
                <mx:LinearAxis id="horizontalAxis" maximum="0" minimum="-10" parseFunction="{verticalAxisParseFunction}"/>
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis id="verticalAxis" maximum="100" minimum="0" />           
            </mx:verticalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer
                    axis="{horizontalAxis}"
                    labelFunction="{horizontalAxisRenderedLabelFunction}" />
            </mx:horizontalAxisRenderers>

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer
                    axis="{verticalAxis}"
                    placement="right" />
            </mx:verticalAxisRenderers>


            <mx:series>
                <mx:LineSeries 
                    xField="Time" 
                    yField="Value" 
                    displayName="TimeValue"
                    fill="{sc1}"
                    stroke="{s1}"
                />
            </mx:series>
        </mx:LineChart>

    </mx:Panel>
</mx:Application>

That's long! Too bad I won't have a chance to test it out before the bounty ends. — Aethex, Jul 04 '09 at 14:07

score 0 · Answer 2 · answered Jul 02 '09 at 17:52

0

How are you populating the data in the chart? If you sort the data going into the chart in descending order, you can have it display with the highest on the left and lowest on the right.

answered Jul 02 '09 at 17:52

darronschall

859
5
7

Doesn't matter if it's a CategoryAxis, since it uses Minimum and Maximum values. – Aethex Jul 04 '09 at 14:03

score 0 · Answer 3 · answered May 25 '09 at 09:51

0

Have you tried reversing the contents of your dataprovider.

answered May 25 '09 at 09:51

kenneth

1,055
1
8
15

And how would I... Is there an option for that, or do I have to do it manually? – Aethex May 26 '09 at 20:08
use a filter or just do it manually. create a new arraycollection (or whatever you DP is). Then loop through it from the end to the start). Say something like for(var i : int = (AC.length -1); i >= 0; i--){ populate new AC }. Hope that make sense. – kenneth May 27 '09 at 08:26
Yes, but LinearAxis doesn't have a dataprovider. I already tried that with the CategoryAxis before, but it doesn't look good for a line chart. – Aethex May 29 '09 at 22:10
ah I just presummed all charts used a DP, I've not actually used the LinearAxis, might have a look later out of curiousity if I get time. – kenneth Jun 04 '09 at 07:35

Flex: Inverting LinearAxis values

3 Answers3

Linked