Placement of Axes in a Flex Chart

February 29, 2008

In Flex 3, we added multiple axes and renderers feature, where the developer could have any number of axes and they could place the horizontal axes either on bottom / top and the vertical axes on left / right. However there were some requests to place it in the middle of the chart.

One could easily customize the Charting API to achieve this, just override the function updateAxisLayout in a customized chart as shown and change the positions of the axisrenderers, you should get something like the screenshot below

override protected function updateAxisLayout(unscaledWidth:Number, unscaledHeight:Number):void
{

super.updateAxisLayout(unscaledWidth,unscaledHeight);

verticalAxisRenderer.move(verticalAxisRenderer.x – unscaledWidth / 2, verticalAxisRenderer.y);
horizontalAxisRenderer.move(horizontalAxisRenderer.x,horizontalAxisRenderer.y – unscaledHeight / 2);

}

axes_placement.jpg

 

You can notice that there is some amount of overlap between the labels of the verticalAxisRenderer and the horizontalAxisRenderer, you could circumvent this by using your own labelRenderer for the AxisRenderer, something like this.

 

<mx:horizontalAxisRenderer>
<mx:AxisRenderer>

<mx:labelRenderer>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[

override public function set data(value:Object):void

{

super.data = data;

l1.text = value.text;

}

]]>

</mx:Script>

<mx:Label paddingTop=”-25” id = “l1/>
</mx:HBox>
</mx:Component>
</mx:labelRenderer>
</mx:AxisRenderer>
</mx:horizontalAxisRenderer>

 

 

 

About these ads

3 Responses to “Placement of Axes in a Flex Chart”

  1. Jonathan Jarvis Says:

    Do you know of a way to stack multiple axes on a flex chart? I’d like to put a line chart and bar chart together, and place the line chart on top of the column chart:

    [Line Chart 1-100
    100 ———–\
    … \______________
    0
    ]
    [Column Chart
    10 20 20
    ]

    The x axis will line up between the two charts.

  2. sunban Says:

    This is not possible in Flex 3, there is a bug to have this feature http://bugs.adobe.com/jira/browse/FLEXDMV-1283, you can vote for this enhancement to be done in the next Flex release.

  3. Rick Holland Says:

    updateAxisLayout() is not a local or inherited method of LineChart in the Flex 3 documentation. Am i looking in the wrong place?

    Thank you

    Rick Holland


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: