bachir
/
performance-art.fr


			
				
					
						
						
							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>