How to show only integers (no decimals) in chart API x/y-axis labels

Question

I'm using a column chart with the Google Chart JS Api. I'm displaying some values (total orders by day) that can only be represented as integers.

Everything is working great, except that when one of the charts I'm displaying has values that are too low, like 1 or 2, it starts to show decimals on the y-axis. The decimals look silly b/c it's impossible to have "half" an order (which is what I'm counting), and I'd like to hide this if possible.

Answer 1

use the option

vAxis: {format: '0'} 

as in

chart.draw(data, {                    width: 800,                    height: 480,                    orientation: 'horizontal',                    vAxis: {format: '0'}                   }            ); 

Answer 2

I don't have enough rep to reply to Ian Hunter's post directly, but what that does is format the label, but doesn't set the grid lines to the same value as the label, which can have undesirable results. So let's say you have these grid lines:

10

7.5

5

2.5

0

When you format the label to only show integers it shows this: 10 8 5 3 0

But then your data on the graph doesn't tie-in with the y-scale labels. E.g If you have a value of 3 it actually shows above the '3' labels because the '3' label is actually 2.5

Unfortunately, the only solution I could think of was to monitor the min/max ranges of the data shown in the graph, and then apply some logic to set the min/max according to how many y-scale labels I have, such that they would divide with no remainders.

So in the case above, I'd set it to

        vAxis: {            viewWindow:{             max:12,             min:0           }         } 

This would give grid lines of

12

8

6

4

0

No decimals, and no problems with the data not correlating with the labels on the graph.

Answer 3

Adding {format : 0} converts the float ticks to integers but the actual values on the bars appear incorrectly.

The main issue is Google Charts API assumes you want 5 gridlines mostly which may not work out to give you integer tick values.

Adding this gave me nice round tick values -

  gridlines: { count: -1}

source - https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU