1 Reply Latest reply on Jun 9, 2009 9:54 AM by m.miller

    Adding custom axis titles for Bubble Chart

    Sen Imagines Level 1

      How to add custom axis titles (for each group of axis values) as shown in the attached figure to a bubble chart ?

       

      - Sen

        • 1. Re: Adding custom axis titles for Bubble Chart
          m.miller

          I'm trying to do essentially the same thing with a LineChart and I think I've got part of it figured out.

           

          I've subclassed CategoryAxis and overridden reduceLabels to return only certain labels (the "group" labels). Then I create a new axis by adding a LineSeries to the chart's <series> element with the new axis within the LineSeries. Then I have an AxisRenderer in the chart's horizontalAxisRenderers tag that refers to the new axis from within the LineSeries.

           

          Subclassed axis:

              public class MonthCategoryAxis extends CategoryAxis

              {

                  public function MonthCategoryAxis()

                  {

                      super();

                  }

                 

                  override public function reduceLabels(intervalStart:AxisLabel, intervalEnd:AxisLabel):AxisLabelSet

                  {

                      var currentLabels:AxisLabelSet = this.getLabels(0); // Param is ignored by super class

                      var newLabels:Array = []; // Labels to keep

                     

                      var label:AxisLabel;

                      var previousLabel:AxisLabel;

                      for (var i:int = 0; i < currentLabels.labels.length; i++)

                      {

                          label = currentLabels.labels[i];

                         

                          if (i == 0) // Keep the first label

                          {

                              newLabels.push(label);

                          }

                          else if (label.value.month != previousLabel.value.month)

                          {

                              // Only keep a label if the previous label has a different month

                              newLabels.push(label);

                          }

                         

                          previousLabel = label;

                      }

                     

                      // Return a new AxisLabelSet with just the labels we want

                      var newLabelSet:AxisLabelSet = new AxisLabelSet();

                      newLabelSet.labels = newLabels;

                      return newLabelSet;

                  }

              }

          New series to create the subclassed axis in.
                      <mx:LineSeries>
                          <mx:horizontalAxis>
                              <charts:MonthCategoryAxis id="MonthAxis" labelFunction="calendarMonthAxisLabelFunction"/>
                          </mx:horizontalAxis>
                      </mx:LineSeries>
          The AxisRenderer. canDropLabels must be "true".
                      <mx:AxisRenderer axis="{MonthAxis}" canDropLabels="true" showLine="false" tickPlacement="none">
                          <mx:labelRenderer>
                              <mx:Component>
                                      <mx:Label width="100%">
                                      <mx:Script>
                                          <![CDATA[
                                          override public function set data(axisLabel:Object):void
                                          {
                                              this.text = outerDocument.getMonthLabel(axisLabel.value);
                                          }
                                          ]]>
                                      </mx:Script>
                                      </mx:Label>
                              </mx:Component>
                          </mx:labelRenderer>
                      </mx:AxisRenderer>