vAxis "human readable" style numbers (e.g. 1.1K, 100K, 1.1M, etc)

[caustik]

I can't for the life of me seem to find a way to transform the values
of vertical axis labels.

There are formatters like "google.visualization.NumberFormat" - but it
doesn't seem to support custom algorithms for transforming numbers. Is
there any way to enumerate and manually transform labels?

Here's a mock-up of what I'm shooting for: http://i.imgur.com/XLEno.png

[asgallant]

Unfortunately, the only formatting you can do with the axis is via the vAxis.format option, which takes a string that is a pattern from a subset of the ICU Pattern Set.  You can transform your data manually, however, to get the units to the correct size, and then append the unit to the axis and tooltip values.  See:  http://jsfiddle.net/asgallant/6kyhf/ 

[caustik]

Thx, for the reply and workaround solution!

It seems like a flexible extension for a future version would be the ability to set a formatting callback which passes as a parameter the value, and you return whatever display value you want. Maybe that already happens under the hood somewhere for the existing formatters, and would just need to have a hook exposed.

function blah(val) { return (val / 1000000) + "M"; }

vAxis: {
                    format: 'custom("blah")'

[caustik]

oops, that's pretty much exactly what your solution does. derp :)

[asgallant]

Yeah, that's what the Formatters do (at least, insofar as I can tell), only they modify the DataTable instead of creating a DataView.

[caustik]

Looks like, with the DataView technique, it's still not possible to support both M and K (detecting the appropriate one based on size of the number), since the suffix has to be fixed for the entire column.

I suppose it's still possible to detect one or the other, depending on the v-axis min/max, maybe that's good enough.

[asgallant]

You could write it to detect which is appropriate based on the range of all values in the chart and use that instead of sticking everything with an 'M'.

[caustik]

Somehow the LineChart goes all wonky when using this method for tweaking the vAxis labels:

http://jsfiddle.net/6kyhf/1/

In this test, if you ".draw(data, ..." instead of ".draw(view, ..." it works (minus the correct vAxis labels), and if you switch from "LineChart" to "ColumnChart" it works.. very strange. Is there something obvious I'm missing, or is this a bug?

[asgallant]

It actually wasn't working right for column charts either.  The problem is that you needed to use a closure around the 'calc' parameter's function, which locks in the value of i to the internal function with each iteration of the loop.  Otherwise, when the view calculates it's data, it uses whatever the current value of the variable 'c' is that you created for the purpose.  See the fix: http://jsfiddle.net/6kyhf/2/