Google charts hAxis grid lines at months - google-visualization

Question

I've got problem with LineChart - I've got my chart date values from mid april to mid june and I want to make hAxis grid lines showing only borders between months from my data. Manually I've made it this way:
hAxis: {
textStyle: { fontSize: 10, color: '#999999' },
gridlines:{ color: '#eee' },
textPosition: 'in',
baselineColor: '#eee',
format: 'M',
ticks: [
new Date(2016, 4, 1),
new Date(2016, 5, 1),
new Date(2016, 6, 1)
]
}
But I want it to be made automatically fitting my data. Anyone can help?

Answer 1

read the data prior to drawing the chart,
and collect the ticks you need displayed
in the following working snippet,
the first day, of each month found, is added to tickMarks
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '2015');
data.addColumn('number', '2016');
data.addRows([
[new Date('04/20/2016'), 200, 210],
[new Date('04/30/2016'), 190, 220],
[new Date('05/06/2016'), 205, 200],
[new Date('05/18/2016'), 220, 230],
[new Date('05/24/2016'), 212, 210],
[new Date('06/01/2016'), 185, 193],
[new Date('06/16/2016'), 196, 207]
]);
var tickMarks = [];
var curMonth = -1;
for (var i = 0; i < data.getNumberOfRows(); i++) {
var testDate = data.getValue(i, 0);
if (testDate.getMonth() > curMonth) {
curMonth = testDate.getMonth();
tickMarks.push(new Date(testDate.getFullYear(), testDate.getMonth(), 1));
}
}
var options = {
height: 400,
hAxis: {
textStyle: { fontSize: 10, color: '#999999' },
gridlines:{ color: '#eee' },
textPosition: 'in',
baselineColor: '#eee',
format: 'M',
ticks: tickMarks
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>