I'm currently working on creating a column chart using Google Charts. The purpose of this chart is to display the number of pageviews for a specific page within the last 30 days. Below is the JavaScript code I used to create the chart (you can access the full, uncut fiddle here):
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Visits');
data.addRows([
// Data rows extracted from my database (timestamp + hits)
[new Date(1458691200 * 1000),null],
[new Date(1458777600 * 1000),null],
// Repeat process for each day, all with null value
[new Date(1461283200 * 1000),2],
[new Date(1461369600 * 1000),null]
]);
var options = {
chartArea: {
width: '70%',
height: '70%'
},
hAxis: {
format: 'd',
gridlines: {
count: 15
},
title: 'Day'
},
vAxis: {
baseline: 0,
format: '#',
gridlines: {
count: -1
},
title: 'Views',
viewWindowMode:'explicit',
viewWindow: {
max: 10,
min: 0
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
The current version of the chart works effectively and displays what I need. However, there is an issue where the graph is "zoomed in" on the only non-null data point:
As a result, it appears as if the 2 views on April 22 are actually representing the period from April 12 to April 22, which is incorrect.
Is there a way for me to prevent the chart from zooming in? Ideally, it should adjust itself based on the gridlines of the relevant period.