Duplicated Numbers on Google Charts Vertical Axis - google-visualization

Question

I was working on a bugfix with Google visualizations for a combo (column/line) chart when one of the axes went strange and started repeating numbers ( ie: 1, 1, 2, 2 instead of 1, 2, 3, 4). Please see the image below
(source: rackcdn.com)
Here are the chart option settings:
// Instantiate and draw our chart, passing in some options.
var frequency_by_day_options = {
vAxes: [
{format:'#,###', title:"Call Volume"},
{format: '#%', title:'Missed Call Rate',
viewWindow:{
max:1,
}}
],
legend: {position: 'none'},
chartArea: { height:'60%', width:'60%'},
width: 800,
height: 350,
backgroundColor: 'transparent',
bar: { groupWidth: '90%'},
isStacked: true,
seriesType: 'bars',
series: {0: {type:'bar', targetAxisIndex:0}, 1: {type:'line', targetAxisIndex:1},},
colors: ['blue', 'green'],
animation:{
duration: 1000,
easing: 'out',},
};
I have no idea what's going on here. Even when I comment out all of the vAxis options I still observe this behavior. Any ideas on what i'm doing wrong? This is driving me nuts :)

Answer 1

I was facing same issue when we have less number of boxes (let say 1 or 2). I resolved it with maxValue option.
Just add maxValue = 4 option in your vaxis. It will add 5 (0 to 4) gridlines at all times. If your maxValue is more that 4, it will adjust automatically.
Mine is working fine with options (title : 'No of boxes', format : '#', minValue:0, maxValue :4). minValue = 0 will not allow negatives as its no of boxes.

Answer 2

I am going to guess that the left-side vAxis is not 4, but actually 2. The 5 labels are 0, 0.5, 1, 1.5, 2.
Since you have format set as "#,###" it will not show decimals. If you change it to "#,###.#" then it will show 0, 0.5, 1, 1.5, 2.
There are a dozen ways to solve it, but the easiest may be to make sure that your axis values are only whole number values with a javascript function like this:
// Take the Max/Min of all data values in all graphs
var totalMax = 3;
var totalMin = -1;
// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));
// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);
// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;
// Determine the range of your values
var range = newMax - newMin;
// Calculate the best factor for number of gridlines (2-5 gridlines)
// If the range of numbers divided by 2 or 5 is a whole number, use it
for (var i = 2; i <= 5; ++i) {
if ( Math.round(range/i) = range/i) {
var gridlines = i
}
}