<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
    <mx:Script><![CDATA[
        import mx.charts.HitData;
        import mx.charts.chartClasses.IAxis;
        import mx.charts.chartClasses.Series;
        import mx.collections.Sort;
        import mx.collections.SortField;
        import mx.collections.ArrayCollection;
        [Bindable]
        public var ac:ArrayCollection = new ArrayCollection([
            {X: "A", Y: 2000},
            {X: "B", Y: 1000},
            {X: "C", Y: 1500}
        ]);
        
        [Bindable]
        private var vax_location:String="left";
        [Bindable]
        private var hax_location:String="bottom";
        
        
        private function sortXY(Xdescending:Boolean, Ydescending:Boolean):void{
            
            var dataSortFieldX:SortField = new SortField();
                dataSortFieldX.name = "X";
                dataSortFieldX.descending=Xdescending;
                
            var dataSortFieldY:SortField = new SortField();
                dataSortFieldY.name = "Y";
                dataSortFieldY.descending=Ydescending;
                dataSortFieldY.numeric=true;                
                /* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
                var dataSort:Sort = new Sort();
                dataSort.fields = [dataSortFieldX, dataSortFieldY];

                /* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */
                ac.sort = dataSort;
                ac.refresh();
            
        }
        
        private function dataFunc(series:Series, item:Object, fieldName:String):Object {
            if(fieldName == "yValue"){
                if(hax_location=='top'){
                    return -item.Y;    
                }else {
                    return item.Y;
                 }
            }  
            else if(fieldName == "xValue"){
                return item.X;
            }
            else return null;  
        }
        
        private function labelFuncY(labelValue:Object, previousValue:Object, axis:IAxis):String{
            if(hax_location=='top'){
                return (-Number(labelValue)).toString();    
            }else {
                return Number(labelValue).toString();
            }
        }

        private function dataTipFunc(item:HitData):String {
            return "X: " + item.item.X + " , Y: " +  item.item.Y
            
        }
        
    ]]></mx:Script>
    <mx:Panel title="Line Chart">
        <mx:LineChart dataProvider="{ac}" showDataTips="true" dataTipFunction="dataTipFunc">
            <mx:horizontalAxis>
                <mx:CategoryAxis id="h1" dataProvider="{ac}" categoryField="X" title="X" />
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis id="v1" title="Y" labelFunction="labelFuncY"/>
            </mx:verticalAxis>
            
            <mx:series>
                <mx:LineSeries yField="Y" xField="X" displayName="X vs Y" dataFunction="dataFunc" />
            </mx:series>

            <mx:verticalAxisRenderers>                
                <mx:AxisRenderer id="vax" axis="{v1}" placement="{vax_location}"/>
            </mx:verticalAxisRenderers>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer id="hax" axis="{h1}" placement="{hax_location}"/>
            </mx:horizontalAxisRenderers>
            
        </mx:LineChart>
        
        <mx:ControlBar>
            <mx:Button label="X-bottom, Y-left" click="hax_location='bottom';vax_location='left';sortXY(false,false)"/>
            <mx:Button label="X-top, Y-left" click="hax_location='top';vax_location='left';sortXY(false,true)"/>
            <mx:Button label="X-top, Y-right" click="hax_location='top';vax_location='right';sortXY(true,true)"/>
            <mx:Button label="X-bottom, Y-right" click="hax_location='bottom';vax_location='right';sortXY(true,true)"/>
        </mx:ControlBar>
        
    </mx:Panel>
</mx:Application>