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

17,843 views
Skip to first unread message

Julio

unread,
Feb 21, 2014, 5:57:12 AM2/21/14
to google-visua...@googlegroups.com
Hi, When I create a chart, decimal values ​​are not, but on the y axis shows decimal values​​, how can I do to show only integers?

asgallant

unread,
Feb 21, 2014, 10:13:34 AM2/21/14
to google-visua...@googlegroups.com
Use the vAxis.format option:

vAxis: {
    format: '#'
}

Daniel LaLiberte

unread,
Mar 3, 2014, 12:23:07 PM3/3/14
to google-visua...@googlegroups.com
If you specify a format of '#' you will only see only whole integer values.  But if a value that is rounded is not close to an integer, the tick will appear to be in the wrong position, or the label will be wrong for the tick.  

The Google Charts API assumes you want 5 gridlines in many cases, and depending on where your data values fall, 5 gridlines may not work out to give you integer tick values.

The better thing to do is to turn on the variable number of gridlines feature by specifying:

  gridlines: { count: -1}

Then it tries hard to give you nice round tick values.

You can also specify exactly what tick values you want by using the 'ticks' option.

  gridlines: { ticks: [ -4, -2, 0, 2, 4 ] }
 


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

thomas...@gmail.com

unread,
Jan 19, 2016, 3:06:04 AM1/19/16
to Google Visualization API
Daniel, thank you, it partially did the work for me.
I have these charts to show positive integer values.
I was using the format: '#' option but was giving problems when the y-values were in a range smaller than 5 ( e.g. I had only values '0' '1' '2' )  as the chart showed doubled ticks (0, 1, 1, 2, 2).
The option you give  
gridlines: { count: -1}   solve the issue, but another one comes out: if I have only 0s  the chart shows y-grids   '-1'  '0'  '1'.

Is there any way to have both issues fixed (only integer, not-doubled grids  AND only positive values ) ?

Thomas

Daniel LaLiberte

unread,
Jan 19, 2016, 8:07:06 AM1/19/16
to Google Visualization API
The tick values are currently chosen regardless of the format, and then the format is imposed on the chosen values.  So, to handle numbers smaller than 1, you would want a format like '#.##'.  

If you only have 0 values in your data (or only one single value), then the chart doesn't know how to scale the axis, so it chooses arbitrarily.  But you can override this by specifying a viewWindow option for the axis with min and max values.  You could also specify minValue and maxValue to get the same effect in this case.

The best way to get exactly the ticks that you want, with the formatting you want, is to specify the ticks option.  E.g. vAxis: { ticks: [ 0, 1, 2, 3, 4, 5 ] }  Each value could be replaced by an object to specify both the value and the formatted representation.  For example, if one of your tick values was 1/3, you could put this in your ticks array: { v: 1 / 3, f: '0.33' }.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

thomas...@gmail.com

unread,
Jan 20, 2016, 5:09:27 AM1/20/16
to Google Visualization API
I see...
"The tick values are currently chosen regardless of the format" I think this can be considered a bug, isn't ? I mean, there's no reason to show ticks with decimal values when I'm representing integer values, is there?
And forcing the tick values format to integer makes obviously appear double ticks (multiple ticks with same value), which is probably even more confusing for who reads the chart.

Furthermore, I'm already using
viewWindowMode: 'explicit',
viewWindow: {min: 0, max: 'auto'}


but the chart doesn't seem to care: when I only have 0s it show "-1", "0", "1" as y-ticks .

Unfortunately I have no way to predict which will be the range of the values, as they are read from a DB and they continuously change. I also see specifyng the ticks values is the only solution, even though I will have to calculate it considering the serie values range I have each time.

Daniel LaLiberte

unread,
Jan 20, 2016, 8:03:32 AM1/20/16
to Google Visualization API
The current tick generation code is not designed around looking at the formatted representation of tick values, unfortunately. We plan to change that at some point.

The viewWindow max should not be 'auto'.  At best, it is ignored.  So you have to set it to some particular value instead.  Did you try setting the minValue and maxValue options?  If you set a maxValue and your actual data is larger, that doesn't limit the chart to the maxValue.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

For more options, visit https://groups.google.com/d/optout.

thomas...@gmail.com

unread,
Jan 20, 2016, 9:40:03 AM1/20/16
to Google Visualization API
Ok, I guess I finally arrived at the solution that fixes all the little issues

vAxis: {
   format: '#,###',
   minValue: 0,
   maxValue: 4
}

This way: no decimal part is showed in the tick labels, only the positive part of the y-axis is showed in any case (even when there are only 0 values), the nice thousand separator is showed when needed. Furthermore no double ticks are showed in case of  y-values  <4  (I have the 0,1,2,3,4 tick showed, instead of 0,1, 1, 2, 2).

When I use logScale: true I had to set minValue: 1  , otherwise no x axis nor lowest y tick is drawn.

Thank you so much!
Thomas

Anh Tuan Nguyen

unread,
Nov 27, 2017, 10:50:10 AM11/27/17
to Google Visualization API
b/16818904 for tracking.


On Wednesday, January 20, 2016 at 2:03:32 PM UTC+1, Daniel LaLiberte wrote:
The current tick generation code is not designed around looking at the formatted representation of tick values, unfortunately. We plan to change that at some point.

The viewWindow max should not be 'auto'.  At best, it is ignored.  So you have to set it to some particular value instead.  Did you try setting the minValue and maxValue options?  If you set a maxValue and your actual data is larger, that doesn't limit the chart to the maxValue.
On Wed, Jan 20, 2016 at 5:09 AM, <thomas...@gmail.com> wrote:
I see...
"The tick values are currently chosen regardless of the format" I think this can be considered a bug, isn't ? I mean, there's no reason to show ticks with decimal values when I'm representing integer values, is there?
And forcing the tick values format to integer makes obviously appear double ticks (multiple ticks with same value), which is probably even more confusing for who reads the chart.

Furthermore, I'm already using
viewWindowMode: 'explicit',
viewWindow: {min: 0, max: 'auto'}


but the chart doesn't seem to care: when I only have 0s it show "-1", "0", "1" as y-ticks .

Unfortunately I have no way to predict which will be the range of the values, as they are read from a DB and they continuously change. I also see specifyng the ticks values is the only solution, even though I will have to calculate it considering the serie values range I have each time.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Peter Haworth

unread,
Sep 4, 2019, 9:23:40 PM9/4/19
to Google Visualization API
I came across this today while searching. My chart allows the user to select a date range for data selection with a default range to start with.  When the max value of any bar is less than 6, the decimals reappear.  With numbers greater than 6, no decimals.  I have included the suggested max and min settings but doesn't seem to make a difference.  Even when the counts are correctly formatted with no decimals, the minor gridlines still appear on the chart.

This is pretty elementary stuff, why does Google Charts not provide a simple way to do this.
Reply all
Reply to author
Forward
0 new messages