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.
|
|
<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>
|
