google charts - when single row chart is zoomed out - charts

Question

I have a chart with a single row
{"cols":[{"id":"time","label":"Time","type":"datetime"},{"id":"Value","label":"Value","type":"number"}],"rows":[{"c":[{"v":"Date(2018,7,31, 14, 49, 48, 0)"}]}]}. When I view the chart on my screen I am present with a "zoomed out" version. I much rather have something that would be "zoomed in" with correct date displayed on the axis. How can this be achieved?
I have tried hAxis.viewWindowMode: 'pretty' with no luck.

Answer 1

you can use hAxis.viewWindow.min & max to set the range of the axis.
and hAxis.ticks to control which axis label(s) appear.
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
"cols":[
{"id":"time","label":"Time","type":"datetime"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
],
"rows":[
{"c":[{"v":"Date(2018,7,31, 14, 49, 48, 0)"}, {"v": 50}, {"v": 31}, {"v": 16}, {"v": 14}, {"v": 5}]}
]
});
var dateRange = data.getColumnRange(0);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 24,
right: 16,
bottom: 60,
left: 60
},
hAxis: {
format: 'MM/dd/yyyy HH:mm:ss',
viewWindow: {
min: new Date(dateRange.min.getFullYear(), dateRange.min.getMonth(), dateRange.min.getDate() - 30),
max: new Date(dateRange.max.getFullYear(), dateRange.max.getMonth(), dateRange.max.getDate() + 30)
},
ticks: data.getDistinctValues(0),
title: 'Time'
},
vAxis: {
ticks: [0, 15, 30, 45, 60]
},
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>