1 Reply Latest reply on Apr 15, 2011 12:57 AM by HenrySeng-CH

    AxisRenderer In ActionScript Weird Behavior

    HenrySeng-CH

      Hello everyone,

       

      I'm really confused by the AxisRenderer. I want to place my horizontalAxis on the top of the chart but can't do it in actionscript.

       

      Here is the code, the verticalAxis can switch correctly from left to right but the horizontal one can't. any idea why? I think I miss something but don't know what.. Thanks

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark" 
                        xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
           
           <fx:Script><![CDATA[
                import flashx.textLayout.formats.Category;
                
                import mx.charts.CategoryAxis;
                import mx.collections.ArrayCollection;
                import mx.events.FlexEvent;
                import mx.events.ListEvent;
                [Bindable]
                public var expenses:ArrayCollection = new ArrayCollection([
                {Month:"Jan", Profit:2000, Expenses:1500},
                {Month:"Feb", Profit:1000, Expenses:200},
                {Month:"Mar", Profit:1500, Expenses:500}
                ]);
                
                [Bindable]
                private var horChoices:Array = ["bottom","top"];
                
                [Bindable]
                private var vertChoices:Array = ["left","right"];
                
                private var horAxisRend:AxisRenderer;
      
                protected function completeHandler(event:FlexEvent):void
                {
                     // TODO Auto-generated method stub
                     myChart.horizontalAxisRenderers = new Array();
                     horAxisRend = new AxisRenderer();
                     var axis1:CategoryAxis = new CategoryAxis();
                     axis1.dataProvider = expenses;
                     axis1.categoryField = "Month";
                     myChart.horizontalAxis = axis1;
                     horAxisRend.axis = axis1;
                     myChart.horizontalAxisRenderers.push(horAxisRend);
                }
      
      
                protected function myHorBoxChange(event:ListEvent):void
                {
                     // TODO Auto-generated method stub
                     horAxisRend.placement = myHorBox.selectedLabel;
                }
      
           ]]></fx:Script>
           <mx:Panel title="Variable Axis Placement">
                <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true" creationComplete="completeHandler(event)">
                     
                     <mx:verticalAxisRenderers>
                          <mx:AxisRenderer id="vertAxisRend" 
                                               axis="{axis2}" 
                                               placement="{myVertBox.selectedItem}"
                                               />
                     </mx:verticalAxisRenderers>            
                     
                     
                     
                     <mx:verticalAxis>
                          <mx:LinearAxis id="axis2"/>
                     </mx:verticalAxis>
                     
                     <mx:series>
                          <mx:ColumnSeries 
                               xField="Month" 
                               yField="Profit" 
                               displayName="Profit"
                               />
                          <mx:ColumnSeries 
                               xField="Month" 
                               yField="Expenses" 
                               displayName="Expenses"
                               />
                     </mx:series>
                </mx:ColumnChart>
                <mx:Legend dataProvider="{myChart}"/>
                
                <mx:Form>
                     <mx:FormItem label="Horizontal Axis Location:">
                          <mx:ComboBox id="myHorBox" dataProvider="{horChoices}" change="myHorBoxChange(event)"/>     
                     </mx:FormItem>
                     <mx:FormItem label="Vertical Axis Location:">
                          <mx:ComboBox id="myVertBox" dataProvider="{vertChoices}"/>     
                     </mx:FormItem>
                </mx:Form>
                
           </mx:Panel>
      </s:Application>