Position of axis labels on a Flex Chart, and how to position things relative to them

Question

I am using an AxisRenderer that is positioned to the right of a BarChart and am looking for a way to position a title for the values in the AxisRenderer above them.

How do you find the position of the labels in an axis renderer? It seems like AxisRenderer.width returns the width of the chart and AxisRenderer.x returns the edge of the whole charts.

Here's an attempts at a picture:

                                Title
xxxxxxxxxxxxxxxxxxxxx   
xxxxxxxxxxxxxxxxxxxxx           axis value
xxxxxxxxxxxxxxxxxxxxx   

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  axis value
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  

xxxxxxxxx   
xxxxxxxxx                       axis value
xxxxxxxxx

I'm trying to position the title above the "axis values" positioned by the AxisRenderer. Basically, for a non absolutely positioned axis, how do you determine where it is?

Answer 1

Check out Adobe's tutorial on data labels:

Adding data labels to charts

Is this what you are looking for or did I misunderstand your question?

Answer 2

Personally, I don't have the source to flex-charting. You've probably already done this, but maybe take a look in the flex source to see what you can figure out?

Otherwise, maybe since you know the values of each bar on the graph and scale of the axis... you could theoretically calculate the position where you want to place your text?

Answer 3

I've done a bit of digging into this problem and i've probably come to the same conclusion that you have - there's no easy way to do this. In my experience AxisRenderers are pretty bloody complicated under the hood (and not written in a particularly understandable way).

However to achieve what you want to achieve you could create your own IAxisRenderer to construct exactly what you want (this is a nightmare... i've done it and it was painful). You could also attempt to extend AxisRenderer and try to override the particular method that positions it's in built titleRenderer (again this isn't particularly easy or clean as in my opinion AxisRenderer hasn't been built with extension in mind).

Two easy solutions that will save you a massive amount of time. Hard code the position of the title in a place that looks ok. I would say in the majority of cases the axis labels won't change that often although obviously i'm making an assumption there. In my opinion the easiest solution... change the design. You're probably going to take quite a bit of time to get the title exactly as you want it. You need to ask yourself if the value you get from it is worth the effort you're putting in.

Sorry I can't be any more help.

J

Answer 4

Look into this using the CarthesianDataCanvas into your Chart.

<Chart>
    <mx:annotationElements>
        <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
    </mx:annotationElements>
</Chart>

see documentation Adobe: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_06.html -> Using Events and Effects in Charts -> Drawing on chart controls

Answer 5

Using something similar to the above suggestion I was able to calculate the desired x and width of an AxisRenderer positioned to the right. In my case I used GridLines instead of CartesianDataCanvas and I also had both a left and right vertical AxisRenderer.

Add an event listener for the UPDATE_COMPLETE event to the vertical AxisRenderers. Calculate the width of the right AxisRenderer:

var rightGutterWidth:Number = chart.width - gridLines.width - Math.abs(leftAxisRenderer.gutters.width);

For the X label position in your case, you could do something similar like:

var rightGutterX:Number = chart.x + gridLines.width + Math.abs(leftAxisRenderer.gutters.width);