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?

Answer 1

Have you tried reversing the contents of your dataprovider.

Answer 2

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.

Answer 3

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>