Timeline Diary example

Trying out the Google Charts Timelines for Autumn 2015 USA schedule.

by Brecht De Man

HTML

<h2> New York </h2>

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div id="timeline" style="height: 280px;"></div>

<h2> Chicago</h2>

<h2> Philadelphia </h2>

<div id="timeline3" style="height: 180px;"></div>

JavaScript

google.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: 'Day'
          });
          dataTable.addColumn({
              type: 'string',
              id: 'Event'
          });
          dataTable.addColumn({
              type: 'date',
              id: 'Start'
          });
          dataTable.addColumn({
              type: 'date',
              id: 'End'
          });
          dataTable.addRows([
              ['Wednesday 28 October 2015', 'Arrival JFK', new Date(0, 0, 0, 17, 0), new Date(0, 0, 0, 19, 0)],
              // THURSDAY
              ['Thursday 29 October 2015', 'Student Delegate Assembly 1', new Date(0, 0, 0, 14, 15), new Date(0, 0, 0, 15, 30)],
              ['Thursday 29 October 2015', 'Registration Student Recording Critiques', new Date(0, 0, 0, 15, 30), new Date(0, 0, 0, 16, 0)],
              ['Thursday 29 October 2015', 'Unofficial party, TBC', new Date(0, 0, 0, 22, 0), new Date(0, 0, 0, 23, 0)],
              ['Thursday 29 October 2015', 'Official Student Party, NYU', new Date(0, 0, 0, 20, 0), new Date(0, 0, 0, 22, 0)],

              // FRIDAY
              ['Friday 30 October 2015', 'Mixing Meets Mastering: Where the Line becomes Blurred', new Date(0, 0, 0, 15, 0), new Date(0, 0, 0, 17, 0)],
              ['Friday 30 October 2015', 'Student Recording Competition 1', new Date(0, 0, 0, 17, 30), new Date(0, 0, 0, 19, 30)],

              // SATURDAY
              ['Saturday 31 October 2015', 'Student Design Competition', new Date(0, 0, 0, 9, 0), new Date(0, 0, 0, 10, 30)],
              ['Saturday 31 October 2015', 'Education/Career Fair', new Date(0, 0, 0, 11, 0), new Date(0, 0, 0, 12, 30)],
              ['Saturday 31 October 2015', 'Regions and Sections...