Inverting an Axis on a chart

I had a case on my latest project where I had a chart that needed to not start at 0,0 as most do. Rather this chart, and the data it represented needed to have it’s Y Axis inverted. The better numbers were closer to the bottom, and higher in value. 0 was bad.

I did some searching and there seemed to be one common approach. manually invert your data. I wasn’t sure that was what I wanted, but it turned out that that approach worked really well.

in the function that creates the data for the chart, I simply invert the values by subtracting 2* the value, from itself

val.perfRank = (performance – (performance * 2));
val.availRank = (availability – (availability * 2));
val.consistRank = (consistency – (consistency * 2));

After populating my dataprovider with the inverted values, all I needed was a label function to undo my voodoo.

private function rankLabelFunction(labelValue:Object, previousLabelValue:Object, axis:IAxis):Number
{
var newAxisValue:Number = Number(labelValue);
newAxisValue = (newAxisValue + (Math.abs(newAxisValue) * 2));
return newAxisValue;
}

You’ll want to make sure to do the absolute value, LOL. Otherwise you’ll be like me, “Why is the negative number, even bigger? Oh yeah! Duh!” Math, not my strong suit.

There may be more elegant ways, I sorta hope there are or will be, but this is a pretty straight forward way to simply put your lowest value at the top of your axis, which is what I needed.

Tags: Flex