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.

By John Wilker

I'm a science fiction writer and conference organizer. In 2017 I published my first book, 'Space Rogues', a fun Sci-Fi adventure with a fun cast of characters. I'm also the co-founder of 360|Conferences, a conference and event logistics consulting company.

Privacy Preference Center

Necessary

Visitor behavior tracking, to improve the site for visitors

Google Analytics, Facebook

Advertising

Analytics

Other

%d bloggers like this: