I'm trying to visualise speedrun times in a linechart, per date. I have the following data:
| ID | Date | Time |
|---|---|---|
| 1 | 2021-10-20 00:00:00 | 1:59:11.19 |
| 2 | 2021-10-21 00:00:00 | 1:55:33.43 |
| 3 | 2021-10-22 00:00:00 | 1:54:52.82 |
| 4 | 2021-10-23 00:00:00 | 1:53:44.15 |
The data will be converted to an array, as such;
var runs = [
[1, "2021-10-20 00:00:00", "1:59:11.19"],
[2, "2021-10-21 00:00:00", "1:55:33.43"],
[3, "2021-10-22 00:00:00", "1:54:52.82"],
[4, "2021-10-23 00:00:00", "1:53:44.15"]
];
I tried following the example from the dev docs, and the example JSFiddle without any luck. As they only show examples that support numbers or absolute datetimes / created times.
Is there a way to make a linechart work with relative times (including ms), showing all times chronologically per date?
if you are wanting to display the date on the x-axis and the time on the y-axis,
you can use google's timeofday data type for the y-axis
The DataTable timeofday column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively.
For example, the time 8:30am would be: [8, 30, 0, 0]
following is routine used to build data table
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('timeofday', 'Time');
for (var i = 0; i < runs.length; i++) {
// convert date
var rowDate = new Date(runs[i][1]);
// convert time to timeofday data type [h, m, sec, ms]
var rowTime = runs[i][2].split(':');
var ms = rowTime[rowTime.length - 1].split('.');
rowTime = rowTime.map(function (timeValue, index) {
if (index === (rowTime.length - 1)) {
return parseInt(ms[0]);
} else {
return parseInt(timeValue);
}
});
rowTime.push(parseInt(ms[1]));
// add data row
data.addRow([rowDate, rowTime]);
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var runs = [
[1, "2021-10-20 00:00:00", "1:59:11.19"],
[2, "2021-10-21 00:00:00", "1:55:33.43"],
[3, "2021-10-22 00:00:00", "1:54:52.82"],
[4, "2021-10-23 00:00:00", "1:53:44.15"]
];
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('timeofday', 'Time');
for (var i = 0; i < runs.length; i++) {
// convert date
var rowDate = new Date(runs[i][1]);
// convert time to timeofday data type [h, m, sec, ms]
var rowTime = runs[i][2].split(':');
var ms = rowTime[rowTime.length - 1].split('.');
rowTime = rowTime.map(function (timeValue, index) {
if (index === (rowTime.length - 1)) {
return parseInt(ms[0]);
} else {
return parseInt(timeValue);
}
});
rowTime.push(parseInt(ms[1]));
// add data row
data.addRow([rowDate, rowTime]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, {
chartArea: {
height: '100%',
width: '100%',
top: 40,
left: 64,
right: 40,
bottom: 40
},
hAxis: {
format: 'MM/dd/yyyy',
ticks: data.getDistinctValues(0)
},
height: '100%',
legend: {
position: 'top'
},
width: '100%'
});
});html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
min-height: 400px;
height: 100%;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>