1

I have a very simple question that I'm struggling to find out:

Instead of this enter image description here

I want this: enter image description here

The problem is that google charts resizes it based on the screen size. But I want to show all hours even on a small screen.

I also want to add an extra line for every 15 minutes between the hours. Just the lines, not the label. Is it possible?

Here is my code:

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

  dataTable.addColumn({ type: 'string', id: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Work', new Date(2018, 4, 25, 8, 30), new Date(2018, 4, 25, 17, 30) ],
    [ 'Rest', new Date(2018, 4, 25, 0, 0),  new Date(2018, 4, 25, 8, 30) ],
    [ 'Rest', new Date(2018, 4, 25, 17, 30),  new Date(2018, 4, 26, 0, 0) ]
  ]);

  chart.draw(dataTable, {

  });
}

https://jsfiddle.net/8xpkLe46/

Rafael Grilli
  • 1,959
  • 13
  • 25
  • these options are not available, you would need to hide the default labels and add your own -- here is an example of adding a single label --> [vertical reference line in google timeline visualization](https://stackoverflow.com/a/48509661/5090771) – WhiteHat May 02 '18 at 11:25

0 Answers0