4 Replies Latest reply on Mar 22, 2011 8:57 AM by rtalton

    AxisRenderer labelRotation problem

    madhuvemuri

      labelRotaion is not working for this bellow example. Any help regarding this issue will be appriciated.

       

      Here are the two files as an example.

       

      labelRotaion is not working for this bellow example. Any help regarding this issue will be appriciated.

       

      LineChartRotateLabel.mxml

       

      <?xml version="1.0"?>
      <!-- charts/RotateAxisLabels.mxml -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
          <local:RotateAxis width="100%" height="100%">
             
          </local:RotateAxis>
      </mx:Application>

       

       

      RotateAxis.mxml

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
          <mx:Script><![CDATA[
              import mx.collections.ArrayCollection;
              [Bindable]
              public var expenses:ArrayCollection = new ArrayCollection([
                  {Month: new Date(2010,2,1), Profit: 2000, Expenses: 1500},
                  {Month: new Date(2010,2,2), Profit: 1000, Expenses: 200},
                  {Month: new Date(2010,2,3), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,4), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,5), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,6), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,7), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,8), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,9), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,10), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,11), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,12), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,13), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,14), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,15), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,16), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,17), Profit: 2000, Expenses: 500},
                  {Month: new Date(2010,2,18), Profit: 1500, Expenses: 1500},
                  {Month: new Date(2010,2,19), Profit: 2000, Expenses: 500}
              ]);
             
              private function setRotation():void {
                  haxis.setStyle("labelRotation", -45);
                 
              }
             
          ]]></mx:Script>
         
          <mx:Stroke id="axisStroke" color="#5391CD" weight="3" alpha="1" caps="none"/>
          <mx:Style>
              @font-face
              {
                  src: local("Arial");
                  fontFamily: myArial;
              }
              LineChart
              {
                  fontFamily: myArial;
                  fontSize: 8;
              }
          </mx:Style>
         
          <mx:Panel title="Rotated Axis Labels" width="100%" height="100%" horizontalAlign="left"
                    verticalAlign="middle" borderStyle="solid" backgroundAlpha="0">
             
              <mx:LineChart id="diskUsageLineChart" dataProvider="{expenses}" showDataTips="true" width="100%" height="100%" >
                  <mx:seriesFilters>
                      <mx:Array/>
                  </mx:seriesFilters>
                 
                  <mx:backgroundElements>
                      <mx:GridLines direction="none" horizontalShowOrigin="false" verticalShowOrigin="false" />
                  </mx:backgroundElements>
                 
                  <mx:horizontalAxis>
                      <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" id="timeAxis"/>
                  </mx:horizontalAxis>
                 
                  <mx:horizontalAxisRenderers>
                      <mx:AxisRenderer axis="{timeAxis}" labelRotation="-45" id="haxis" updateComplete="setRotation();" width="500" >
                          <mx:axisStroke>{axisStroke}</mx:axisStroke>
                      </mx:AxisRenderer>
                  </mx:horizontalAxisRenderers>
                 
                  <mx:verticalAxis>
                      <mx:LinearAxis id="diskSpaceAxis" baseAtZero="true" interval="2"/>
                  </mx:verticalAxis>
                 
                  <mx:verticalAxisRenderers>
                      <mx:AxisRenderer axis="{diskSpaceAxis}" canDropLabels="true" verticalAxisTitleAlignment="vertical">
                          <mx:axisStroke>{axisStroke}</mx:axisStroke>
                      </mx:AxisRenderer>
                  </mx:verticalAxisRenderers>
                 
                  <mx:series>
                      <mx:LineSeries yField="Profit" xField="Month" sortOnXField="true" form="segment" interpolateValues="false">
                          <mx:lineStroke>
                              <mx:Stroke color="#3333FF" weight="3" alpha="1"/>
                          </mx:lineStroke>
                      </mx:LineSeries>
                  </mx:series>
                 
              </mx:LineChart>
             
          </mx:Panel>
      </mx:Canvas>

       

      Here is the Image for this example.

       

      not rotated.png

       

      PLease help...

        • 1. Re: AxisRenderer labelRotation problem
          madhuvemuri Level 1

          When I have the line chart code in LineChartRotateLabel.mxml file its working fine.

           

          Here is the working code.

           

          <?xml version="1.0"?>
          <!-- charts/RotateAxisLabels.mxml -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
              <mx:Script><![CDATA[
                  import mx.collections.ArrayCollection;
                  [Bindable]
                  public var expenses:ArrayCollection = new ArrayCollection([
                      {Month: new Date(2010,2,1), Profit: 2000, Expenses: 1500},
                      {Month: new Date(2010,2,2), Profit: 1000, Expenses: 200},
                      {Month: new Date(2010,2,3), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,4), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,5), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,6), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,7), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,8), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,9), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,10), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,11), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,12), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,13), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,14), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,15), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,16), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,17), Profit: 2000, Expenses: 500},
                      {Month: new Date(2010,2,18), Profit: 1500, Expenses: 1500},
                      {Month: new Date(2010,2,19), Profit: 2000, Expenses: 500}
                  ]);
                 
                  private function setRotation():void {
                      haxis.setStyle("labelRotation", -45);
                     
                  }
                 
              ]]></mx:Script>
             
              <mx:Stroke id="axisStroke" color="#5391CD" weight="3" alpha="1" caps="none"/>
              <mx:Style>
                  @font-face
                  {
                      src: local("Arial");
                      fontFamily: myArial;
                  }
                  LineChart
                  {
                      fontFamily: myArial;
                      fontSize: 8;
                  }
              </mx:Style>
             
              <mx:Panel title="Rotated Axis Labels" width="100%" height="100%" horizontalAlign="left"
                        verticalAlign="middle" borderStyle="solid" backgroundAlpha="0">
                 
                  <mx:LineChart id="diskUsageLineChart" dataProvider="{expenses}" showDataTips="true" width="100%" height="100%" >
                      <mx:seriesFilters>
                          <mx:Array/>
                      </mx:seriesFilters>
                     
                      <mx:backgroundElements>
                          <mx:GridLines direction="none" horizontalShowOrigin="false" verticalShowOrigin="false" />
                      </mx:backgroundElements>
                     
                      <mx:horizontalAxis>
                          <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month" id="timeAxis"/>
                      </mx:horizontalAxis>
                     
                      <mx:horizontalAxisRenderers>
                          <mx:AxisRenderer axis="{timeAxis}" labelRotation="-45" id="haxis" updateComplete="setRotation();" width="500" >
                              <mx:axisStroke>{axisStroke}</mx:axisStroke>
                          </mx:AxisRenderer>
                      </mx:horizontalAxisRenderers>
                     
                      <mx:verticalAxis>
                          <mx:LinearAxis id="diskSpaceAxis" baseAtZero="true" interval="2"/>
                      </mx:verticalAxis>
                     
                      <mx:verticalAxisRenderers>
                          <mx:AxisRenderer axis="{diskSpaceAxis}" canDropLabels="true" verticalAxisTitleAlignment="vertical">
                              <mx:axisStroke>{axisStroke}</mx:axisStroke>
                          </mx:AxisRenderer>
                      </mx:verticalAxisRenderers>
                     
                      <mx:series>
                          <mx:LineSeries yField="Profit" xField="Month" sortOnXField="true" form="segment" interpolateValues="false">
                              <mx:lineStroke>
                                  <mx:Stroke color="#3333FF" weight="3" alpha="1"/>
                              </mx:lineStroke>
                          </mx:LineSeries>
                      </mx:series>
                     
                  </mx:LineChart>
                 
              </mx:Panel>
          </mx:Application>

           

          Any one know what is the issue with the 1st post.

          • 2. Re: AxisRenderer labelRotation problem
            rtalton Level 4

            What version of the SDK are you using?  Have you tried embedding the font yet?

            • 3. Re: AxisRenderer labelRotation problem
              madhuvemuri Level 1

              Thanks for reply rtalton.

               

              I got solution for this problem.We have to set the fontFamily attribute as myArial to AxisRenderer.

               


              <mx:AxisRenderer axis="{diskSpaceAxis}" canDropLabels="true" verticalAxisTitleAlignment="vertical" fontFamily="myArial">
                                  <mx:axisStroke>{axisStroke}</mx:axisStroke>
                              </mx:AxisRenderer>

               

              But I am getting another issue. Not able to set font styles like font-size,font-weight,color to axis label. Any solution for this?

              • 4. Re: AxisRenderer labelRotation problem
                rtalton Level 4

                Are you setting these styles on the AxisRenderer?