As is typical in my experience, times and durations are causing me trouble with graphs and Javascript. I’m graphing duration in mm:ss on the vAxis and date on the hAxis and trying to expand the min and max of the graph, so that it goes beyond the data points, above and below. For example, I’d like to have a min of 11:00 and a max of 14:00. However, I’m unable to do this. I read on one suggestion (cannot recall the URL and if it was stackoverflow and can’t find right now) that I could convert the mm:ss to just seconds as a whole number, and use that for max and min. When I do that, I get this error: ‘a.getTime is not a function’. I’m guessing that my numbers are not being carried over from my google sheet as a time duration…and maybe just a string. Of course when I use a colon in the max/min, I get an error that it’s not expecting a ‘:’. Thanks for any assistance.
Here’s the code, which has already been assisted by this site once. It works fine if the “viewWindow” portion is removed.
var query = new google.visualization.Query(queryUri + queryString);
// run query
query.send(function (response) {
// determine if error occurred
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// extract data from response
var data = response.getDataTable();
// need to create dataview to use column as annotation
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}]);
// create options
var options = {
title: 'L's 2024 Cross Country Run Times',
width: 900,
height: 500,
trendlines: {
0: {
color: 'blue'
}
},
vAxis: {
format: 'mm:ss',
viewWindow : {min : 660,max : 840}
}
};
// draw chart
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(view, options);
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>