Google timeline chart duration in hour

Question

i'm using Google timeline chart, and i want to show the duration in hour even if the duration is over a day. Is it possible?

Thank you

An image with a thousand of samples that demostrate the different behavior 1 As you can see in red the duration is wrong, and in blue a duration calculated and printed.

Sentinel

Answer 1

there are no configuration options to change the content of the tooltip

but a custom tooltip can be provided

see following working snippet

a tooltip column is inserted and populated with information from the data

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'string', id: 'RowLabel'});
    dataTable.addColumn({type: 'string', id: 'BarLabel'});
    dataTable.addColumn({type: 'date', id: 'Start'});
    dataTable.addColumn({type: 'date', id: 'End'});

    dataTable.addRows([
      ['165414 fine-turbo          ers', 'Cpus 24 - 0.543h', new Date(2016,07,20, 13,37,32), new Date(2016,07,20, 15,43,19)],
      ['165418 fine-turbo          ers', 'Cpus 24 - 0.534h', new Date(2016,07,20, 14,47,12), new Date(2016,07,20, 16,40,09)],
      ['165427 fine-turbo          ers', 'Cpus 24 - 0.265h', new Date(2016,07,20, 18,01,23), new Date(2016,07,21, 00,02,53)],
    ]);

    dataTable.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});

    var dateFormat = new google.visualization.DateFormat({
      pattern: 'M/d/yy hh:mm:ss'
    });

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      var duration = (dataTable.getValue(i, 4).getTime() - dataTable.getValue(i, 3).getTime()) / 1000;
      var hours = parseInt( duration / 3600 ) % 24;
      var minutes = parseInt( duration / 60 ) % 60;
      var seconds = duration % 60;

      var tooltip = '<div class="ggl-tooltip"><span>' +
        dataTable.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
        dataTable.getValue(i, 0) + '</span>: ' +
        dateFormat.formatValue(dataTable.getValue(i, 3)) + ' - ' +
        dateFormat.formatValue(dataTable.getValue(i, 4)) + '</div>' +
        '<div class="ggl-tooltip"><span>Duration: </span>' +
        hours + 'h ' + minutes + 'm ' + seconds + 's ';

      dataTable.setValue(i, 2, tooltip);
    }

    chart.draw(dataTable, {
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['timeline']
});

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  padding: 6px 6px 6px 6px;
}

.ggl-tooltip span {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Luminal

Sorry but this answer it's not useful. It's easy with only one sample, but when the going gets tough it's not so easy. I'm preparing an image to demostrate that with a thousand of samples i seen the duration "1 day" even if the duration is under an hour. – Sentinel

I've added an image in the question. – Sentinel

wasn't clear earlier, picture helps. if you want to change the tooltip, must provide your own, see changed answer above... – Luminal

Hi @WhiteHat, i've just done something similar to your solution, but without tooltip, now i thing that i can improve the solution with the tooltip :) But i'm wondering if it's too early to use the google charts. Thank you for your solution. – Sentinel

Hello @WhiteHat, I tried to do the same thing jsfiddle.net/dubis/npxmso0c/40 The pop up are still the sames. When I put one series of task only. Its working, When I put several series the pop up lost the duration – Michelemichelina

@Michelemichelina the second data table column "bar label" is required when adding a tooltip -- https://jsfiddle.net/WhiteHat/nyLjc961/1/ – Luminal

Answer 2

This question already helped me too much, but if someone want change the time format in timeline

 hAxis: {
             format: 'HH:mm'
        },

Adin