Using Years Only (Without Months or Days) with Google Timeline Charts

Question

I want to show a timeline (with Google Charts) with years only.

However, the examples on Google Charts Timelines' webpage always comprise years, months and days (for instance, new Date(1789, 3, 30)).

I have tried reducing the new Date() to just a year (e.g. new Date(2019)), but Google Charts interprets it as seconds (2.019 seconds).

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('div_timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Nr' });
    dataTable.addColumn({ type: 'string', id: 'Journal' });
    dataTable.addColumn({ type: 'date', id: 'Founded' });
    dataTable.addColumn({ type: 'date', id: 'Now' });

    dataTable.addRows([
      [ '1', 'Journal of Leisure Research', new Date(1969), new Date(2019) ],
      [ '2', 'Critical Sociology',        new Date(2009),  new Date(2019) ],
      [ '3', 'Geographical Analysis',  new Date(1909),  new Date(2019) ]
                      ]);

    chart.draw(dataTable,options);

  }
</script>

With this code, Journal of Leisure Research is now 1.969 seconds to 2.019 seconds.

Instead, I want the chart to assign the years 1969 to 2019.

How can I do that? Thanks for your help!

Can you explain why do you want to simplify the Date() by just passing a year? — gearsdigital, May 21 '19 at 20:53
I want to show the duration during which entities have been existing (e.g. "_Journal of Leisure Research_" has been existing from 1909 to 2019, the journal "_Critical Sociology_" from 2009 to 2019, etc.) - - I do not aim to be specific about months/days. — anmipa, May 22 '19 at 12:00

Tal Angel · Answer 1 · 2019-05-28T10:51:43.887

Simply set the date to January 1st:

 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      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: 'Nr' });
    dataTable.addColumn({ type: 'string', id: 'Journal' });
    dataTable.addColumn({ type: 'date', id: 'Founded' });
    dataTable.addColumn({ type: 'date', id: 'Now' });

         dataTable.addRows([
      [ '1', 'Journal of Leisure Research', new Date(1969,1,0), new Date(2019,1,0) ],
      [ '2', 'Critical Sociology',        new Date(2009,1,0),  new Date(2019,1,0) ],
      [ '3', 'Geographical Analysis',  new Date(1909,1,0),  new Date(2019,1,0) ]]);
        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

Using Years Only (Without Months or Days) with Google Timeline Charts

1 Answers1