123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- <html>
- <head>
- <title>Timeline demo</title>
- <style>
- 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?");
- }
- 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
- options = {
- width: "100%",
- height: "300px",
- editable: true,
- layout: "box"
- };
- // Instantiate our timeline object.
- vis = new links.Timeline(document.getElementById('mytimeline'));
-
- // Draw our timeline with the created data and options
- vis.draw(data, options);
- }
-
- 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="javascript:window.open(urlSpreadsheet); return false;">view</a> this sheet)<br>
- </p>
- <div id="mytimeline"></div>
- </body>
- </html>
|