Search code examples
angulargoogle-visualizationtimeline

Google Timeline chart for set range of minutes instead of dates


I'm looking to use the Google Charts timeline to show a few minutes instead of dates. I don't mean limit the scale to minutes of the day. I mean just show 0:00 as the start and then something like 5:00 as the end time with steps by a certain number of seconds in between.

I've found a number of examples (e.g., http://almende.github.io/chap-links-library/js/timeline/doc/), but nothing like what I'm looking for. All the examples use either datetime or timeofday, but nothing seems to limit the scale to an arbitrary time duration. All the other features I want are there (zooming, eventlisteners, HTML annotations, JSON input, etc),

Is it possible to customize the scale to want I want? Or even hide it?

BTW -- This is for an Angular (4) project so I'm using the angular2-google-chart module to access the Google Charts from TypeScript. If there's another Angular component that would be better suited, I'd love to hear about it.


Solution

  • just use the same date for all the rows -- start / end dates

    only adjust the seconds portion on the date objects

    new Date(year, month, date, hours, minutes, seconds);
    

    see following working snippet...

    google.charts.load('current', {
      callback: drawChart,
      packages: ['timeline']
    });
    
    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: 'Category'});
      dataTable.addColumn({type: 'date', id: 'Start'});
      dataTable.addColumn({type: 'date', id: 'End'});
      dataTable.addRows([
        ['A', new Date(2017, 4, 26, 10, 0, 1), new Date(2017, 4, 26, 10, 0, 2)],
        ['B', new Date(2017, 4, 26, 10, 0, 2), new Date(2017, 4, 26, 10, 0, 3)],
        ['C', new Date(2017, 4, 26, 10, 0, 3), new Date(2017, 4, 26, 10, 0, 4)]
      ]);
      chart.draw(dataTable, {
        hAxis: {
          format: 'mm:ss',
          maxValue: new Date(2017, 4, 26, 10, 0, 5),
          minValue: new Date(2017, 4, 26, 10, 0, 0)
        }
      });
    }
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="timeline"></div>