
I have a Google chart api Line chart where the horizontal axis units don't match the corresponding points on the chart. See the image.
I have used those options that makes sure that the h axis don't use decimal numbers:
hAxis: { title: 'some title', format: '#' }
I have used no other relevant options, and haven't found any options in the documentation that seems to could solve the issue..
Update: Code to generate the chart:
var options = { title: '<%# Strings.GameStatisticsView_GameProgressChart %>', hAxis: { title: '<%# Strings.ScoreBoard_RoundNr %>', format: '#' }, vAxis: { title: '<%# Strings.Common_Points %>' }, backgroundColor: { fill: 'transparent' }, elementId: 'GameProgressChart', column1: 'Round Nr' };
drawLineChart(response.d.Data, options);
...
drawLineChart: function (data, options) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', options.column1);
for (var j = 0; j < data.key.length; j++) {
dataTable.addColumn('number', data.key[j]);
}
dataTable.addRows(data.value.length);
for (var i = 0; i < data.value.length; i++) {
dataTable.setValue(i, 0, data.value[i].key);
for (var k = 0; k < data.key.length; k++) {
dataTable.setValue(i, k+1, data.value[i].value[k]);
}
}
var chart = new google.visualization.LineChart(document.getElementById(options.elementId));
chart.draw(dataTable, options);
},
Solution from comments: The steps in your x axis can't be hardcoded but you can hardcode how many gridlines to have, see link.