Google Charts Date axis labels not correct - charts

Question

I have been working on Google Line charts having a date axis. I have noticed that the axis labels ticks are determined by the number of gridlines and are not same to the data that I am passing. Could someone please tell me how I could force the axis labels to be in sync with the data I am passing.
Please find the link for the fiddle: https://jsfiddle.net/FarhanI/5ga6xu44/
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addRows([
[new Date(2015, 0, 1), 5],
[new Date(2015, 0, 7), 3],[new Date(2015, 0, 14), 3], [new Date(2015, 0, 21), 2],[new Date(2015, 0, 28), 8],
]);
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
width: 900,
height: 500,
hAxis: {
format: 'M/d/yy',
gridlines: {count: 9}
},
vAxis: {
gridlines: {color: 'none'},
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
Also I am trying to have the gridline appear as the y axis since I was unable to get the Y axis with line charts. I tried specifying gridline as 1, but I was able to get only 1 gridline that too in the middle of the X axis.
Could someone please let me know if I could get Y axis with the line chart.
Appreciate the assistance,
Farhan.

Answer 1

you can provide custom hAxis.ticks
to sync with the data, build an array with the dates from each row
// load custom ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
then use the array in the config options
hAxis: {
format: 'M/d/yy',
ticks: ticks
}
note: not following what is needed for the y-axis, could you please clarify...
--> get Y axis with the line chart
if you just simply want to see gridlines, remove the following from config options...
vAxis: {
gridlines: {color: 'none'}
}
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addRows([
[new Date(2015, 0, 1), 5],
[new Date(2015, 0, 7), 3],
[new Date(2015, 0, 14), 3],
[new Date(2015, 0, 21), 2],
[new Date(2015, 0, 28), 8]
]);
// load custom ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
width: 900,
height: 500,
hAxis: {
format: 'M/d/yy',
ticks: ticks
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" id="change" value="Change" />
<div id="chart_div"></div>