<!DOCTYPE html>
<html>
<head>
<link href="timeline_setter.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="timeline"></div>
<!-- Don't need jQuery or Underscore for Tabletop, but you do for TimelineSetter -->
<script type="text/javascript" src="../common/jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="timeline_setter.js"></script>
<script type="text/javascript" src="../../src/tabletop.js"></script>
<script type="text/javascript">
var public_spreadsheet_url = "https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdHk2akhfdG5iTk96OUt6UjJJX1dYMFE&single=true&gid=0&output=html"
$(document).ready( function() {
/*
Need to post-process elements because Google Spreadsheets abbreviates
'display_date' column as 'displaydate' and you need to parse the date
into the 'timestamp' field for TimelineSetter
simpleSheet: true sends array of rows to callback, so you don't need to
do the whole Tabletop.sheets('Sheet1').all() thing.
*/
Tabletop.init( { key: public_spreadsheet_url,
callback: drawTimeline,
simpleSheet: true,
postProcess: function(element) {
element["display_date"] = element["displaydate"];
element["timestamp"] = Date.parse( element["date"] );
}
})
})
function drawTimeline(data) {
var currentTimeline = TimelineSetter.Timeline.boot(
data,
{"container":"#timeline","interval":""}
);
}
document.write("The published spreadsheet is located at <a target='_new' href='" + public_spreadsheet_url + "'>" + public_spreadsheet_url + "</a>");
</script>
</body>
</html>