I'm using the following code to generate the above google chart:
var data = google.visualization.arrayToDataTable([ ['Date', 'Tickets'], ['11/05/15',1], ['10/05/15',0], ['09/05/15',0], ['08/05/15',0], ['07/05/15',0], ['06/05/15',0], ['05/05/15',0], ['04/05/15',0], ]); var columnChartOptions = { title: "", legend: { position: 'none' }, width: '100%', height: '100%', colors: ["#27ae60", "#2980b9", "#e67e22", "#e74c3c", "#e74c3c"], chartArea: { left: '8%', top: '8%', width: "85%", height: "70%" }, vAxis: { minValue: 1, format:'#' }, new google.visualization.ColumnChart(document.getElementById('ticket-history-graph')). draw(data,columnChartOptions);
However it produces the following wrong interval counts:
What changes do I need to make to the vAxis definition to correct this? I've tried varying min and max values to no avail. I must also add that when higher numbers are used this is not a problem, it's only with lower counts.
Your problem is the format:'#', which is the reason why you get two zeros and three ones (as you round to zero decimals, and the graph tries to present the values [0, 0.25, 0.5, 0.75, 1] which are rounded to [0, 0, 1, 1, 1], therefore duplicates them).
My suggestion is that you check out the property vAxis.gridlines.count documentation.
I made a fiddle, where I check if the maxValue in the graph is 1 or 2, if so I specify the gridlines to either the count of 2 or 3, and if it's neither 1 or 2, it uses googles own automatic generation. Check and see if you follow how I've done: jsfiddle
Remember to try and change some values to higher/lower to see how it works.
//Get all distinct ticketsales, sorted ascending by default, so you have to get the last value to get the highest one. var maxValue = data.getDistinctValues(1)[data.getDistinctValues(1).length - 1] // Specify gridCount to null, so if it doesn't enter any of the if's below, it will still be null var gridCount = null //check if the highest value is 1 or 2 else leave gridCount to null if (maxValue == 1) { gridCount = 2 } if (maxValue == 2) { gridCount = 3 }
Aswell as the addition to the columnChartOptions:
vAxis: { gridlines: { //specify the amount of gridlines to var gridCount, if it's still specified as null, it will use googles automatic generation. count: gridCount },
