CODEWITHSUNDEEP
javascripthtmlcsschartsgoogle-visualization
MarlZ15199
MarlZ15199

Reputation: 288

How to always show day on google time chart

I'm using timeline chart of google once you hover on data it will show the duration, start and end date but only in Month and Year. If the time span is short like a week it will show the day but if month or year it will show only the month and year.

I want also to show the day but I'm struggling to do that, can't find any instruction. Please see the js fiddle link and code below.

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawTimeline);
function drawTimeline() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Target Date', new Date(2016, 10, 15), new Date(2017, 11, 18)],
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Actual Date', new Date(2016, 11, 25), new Date(2017, 11, 30)]



]);


chart.draw(dataTable);
}

https://jsfiddle.net/mt15199/xsnru9oq/

Upvotes: 3

Views: 2014

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

only option to customize the tooltip is to provide your own...

problem there is you must calculate the duration yourself

see the following working snippet for an example...

a tooltip column is added and populated based on the dates found on each row 

google.charts.load('current', {
  callback: function () {
    drawTimeline();
    window.addEventListener('resize', drawTimeline, false);
  },
  packages:['timeline']
});
function drawTimeline() {
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    ['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Target Date', new Date(2016, 10, 15), new Date(2017, 11, 18)],
    ['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Actual Date', new Date(2016, 11, 25), new Date(2017, 11, 30)]
  ]);
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MM/dd/yyyy'
  });
  dataTable.insertColumn(2, { type: 'string', role: 'tooltip', p: {html: true} });
  for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
    var duration = Math.abs(dataTable.getValue(i, 4).getTime() - dataTable.getValue(i, 3).getTime()) / 1000;
    var days = Math.floor(duration / 86400);
    duration -= days * 86400;
    var hours = Math.floor(duration / 3600) % 24;
    duration -= hours * 3600;
    var minutes = Math.floor(duration / 60) % 60;
    duration -= minutes * 60;
    var seconds = duration % 60;  // in theory the modulus is not required

    var tooltip = '';
    tooltip += '<div class="ggl-tooltip"><div>';
    tooltip += '<span>' + dataTable.getValue(i, 1) + '</span>';
    tooltip += '</div><div>';
    tooltip += '<span>' + dataTable.getValue(i, 0) + ':&nbsp;</span>';
    tooltip += formatDate.formatValue(dataTable.getValue(i, 3)) + ' - ';
    tooltip += formatDate.formatValue(dataTable.getValue(i, 4));
    tooltip += '</div><div>';
    tooltip += '<span>Duration:&nbsp;</span>';
    tooltip += days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds';
    tooltip += '</div></div>';
    dataTable.setValue(i, 2, tooltip);
  }
  chart.draw(dataTable, {
    tooltip: {
      isHtml: true
    }
  });
}
.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
}

.ggl-tooltip div {
  border: 1px solid #E0E0E0;
  padding: 8px 8px 8px 8px;
}

.ggl-tooltip span {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions