You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.3 KiB
106 lines
3.3 KiB
<html>
|
|
<head>
|
|
<title>Timeline demo</title>
|
|
|
|
<style type="text/css">
|
|
body {font: 10pt arial;}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
|
<script type="text/javascript" src="../timeline.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
|
|
|
<script type="text/javascript">
|
|
google.load("visualization", "1");
|
|
|
|
var urlSpreadsheet = "https://spreadsheets.google.com/a/almende.org/ccc?key=tpN13qnPm37g3qTXT5Hc9sg&hl=en#gid=0";
|
|
var urlData = "data.php";
|
|
|
|
var initialized = false;
|
|
var query;
|
|
var vis;
|
|
|
|
// Set callback to run when API is loaded
|
|
google.setOnLoadCallback(initialize);
|
|
|
|
function initialize() {
|
|
initialized = true;
|
|
}
|
|
|
|
function load(url) {
|
|
if (!initialized) {
|
|
alert("One moment please... still busy loading Google Visualization API");
|
|
return;
|
|
}
|
|
|
|
if (url == undefined) {
|
|
dataSourceUrl = document.getElementById("dataSourceUrl").value
|
|
} else {
|
|
dataSourceUrl = url;
|
|
}
|
|
|
|
// if the entered url is a google spreadsheet url, replace the part
|
|
// "/ccc?" with "/tq?" in order to retrieve a neat data query result
|
|
if (dataSourceUrl.indexOf("/ccc?")) {
|
|
dataSourceUrl.replace("/ccc?", "/tq?");
|
|
}
|
|
|
|
var handleQueryResponse = function(response) {
|
|
if (response.isError()) {
|
|
alert('Error in query: ' + response.getMessage() + ', ' + response.getDetailedMessage());
|
|
return;
|
|
}
|
|
|
|
// retrieve the data from the query response
|
|
var data = response.getDataTable();
|
|
|
|
// specify options
|
|
var options = {
|
|
width: "100%",
|
|
height: "300px",
|
|
editable: true,
|
|
layout: "box"
|
|
};
|
|
|
|
// Instantiate our timeline object.
|
|
vis = new links.Timeline(document.getElementById('mytimeline'), options);
|
|
|
|
// Draw our timeline with the created data and options
|
|
vis.draw(data);
|
|
}
|
|
|
|
query && query.abort();
|
|
query = new google.visualization.Query(dataSourceUrl);
|
|
query.send(handleQueryResponse);
|
|
}
|
|
|
|
function loadDataHtml() {
|
|
document.getElementById("dataSourceUrl").value = urlData;
|
|
load(urlData);
|
|
}
|
|
|
|
function loadSpreadSheet() {
|
|
document.getElementById("dataSourceUrl").value = urlSpreadsheet;
|
|
load(urlSpreadsheet);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<p>Enter a datasource and click the button "Go".</p>
|
|
<p>
|
|
Datasource: <input type="text" id="dataSourceUrl" value="data.php" style="width: 600px;">
|
|
<input type="button" value="Go" onclick="load();">
|
|
</p>
|
|
<p>
|
|
Examples:
|
|
</p>
|
|
<p>
|
|
<a href="javascript:loadDataHtml();">Open data.php</a> (Works only if you run the example on a PHP server)<br>
|
|
<a href="javascript:loadSpreadSheet();">Open a Google spreadsheet</a>
|
|
(or <a href="" onclick="window.open(urlSpreadsheet); return false;">view</a> this sheet)<br>
|
|
</p>
|
|
<div id="mytimeline"></div>
|
|
|
|
</body>
|
|
</html>
|