47 lines
1.9 KiB
HTML
47 lines
1.9 KiB
HTML
|
<!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>
|