Sorted duration time for Google Table Chart - google-visualization

Question

I want to sort the column 2 (duration) descending or ascending.
This is the code:
https://jsfiddle.net/guilhermelight1/no7xvnLu/13/
#table_div tbody tr td:nth-child(3){
text-transform: uppercase;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['table']}]}"></script>
<div id="table_div"></div>
google.setOnLoadCallback(drawTable);
function drawTable() {
var opts = {sendMethod: 'auto'};
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=1mYtjx7_EP3k888Ep7oU92wk5J24EZn4UWwxKZAkFhHY&sheet=B', opts);
query.setQuery("select A,B,C ");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var formatter = new google.visualization.DateFormat({pattern: 'HH:mm'});
formatter.format(data, 2);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
}

Answer 1

assuming the decimal column represents seconds
the following snippet uses a DataView to add a calculated column for sorting...
google.charts.load('current', {
callback: drawTable,
packages:['table']
});
function drawTable() {
var opts = {sendMethod: 'auto'};
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=1mYtjx7_EP3k888Ep7oU92wk5J24EZn4UWwxKZAkFhHY&sheet=B', opts);
query.setQuery("select A,B,C ");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var formatter = new google.visualization.DateFormat({pattern: 'hh:mm:ss'});
var timeColumn = 2;
var viewColumns = [];
var view = new google.visualization.DataView(data);
for (var i = 0; i < data.getNumberOfColumns(); i++) {
viewColumns.push(i);
}
viewColumns.push({
label: data.getColumnLabel(timeColumn),
type: 'date',
calc: function (dt, row) {
var dateValue = new Date();
dateValue = new Date(dateValue.getFullYear(), dateValue.getMonth(), dateValue.getDate());
dateValue = new Date(dateValue.getTime() + (dt.getValue(row, timeColumn) * 1000));
return {
v: dateValue,
f: formatter.formatValue(dateValue)
};
}
});
view.setColumns(viewColumns);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(view, {showRowNumber: true});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>