Team:TU-Delft/SynBioData

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
   <head>
+
    
-
    <meta charset="UTF-8">
+
<script type="text/javascript">
-
    <title>Fusion Tables API Example: Google Chart Tools Data Table</title>
+
var isFirstTime = true;
 +
var options = {'showRowNumber': true};
 +
var data;
 +
var queryInput;
-
    <link href="/apis/fusiontables/docs/samples/style/default.css"
+
var query = new google.visualization.Query(
-
        rel="stylesheet" type="text/css">
+
     'https://docs.google.com/spreadsheet/ccc?key=0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc#gid=0');
-
     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+
-
    <script type="text/javascript">
+
-
      google.load('visualization', '1', { packages: ['table'] });
+
-
      function drawTable() {
 
-
        var query = "SELECT 'Scoring Team' as id, " +
 
-
            "'Receiving Team' as Receiving, 'Minute of goal' as Minute " +
 
-
            'FROM 1VlPiBCkYt_Vio-JT3UwM-U__APurJvPb6ZEJPg';
 
-
        var team = document.getElementById('team').value;
 
-
        if (team) {
 
-
          query += " WHERE 'Scoring Team' = '" + team + "'";
 
-
        }
 
-
        var queryText = encodeURIComponent(query);
 
-
        var gvizQuery = new google.visualization.Query(
 
-
            'https://docs.google.com/spreadsheet/ccc?key=0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc#gid=' + queryText);
 
-
        gvizQuery.send(function(response) {
+
query.setQuery('SELECT A');
-
          var table = new google.visualization.Table(
+
-
              document.getElementById('visualization'));
+
-
          table.draw(response.getDataTable(), {
+
-
            showRowNumber: true
+
-
          });
+
-
        });
+
-
      }
+
-
      google.setOnLoadCallback(drawTable);
+
function sendAndDraw() {
-
    </script>
+
  // Send the query with a callback function.
-
   </head>
+
   query.send(handleQueryResponse);
-
   <body>
+
}
-
     <div>
+
 
-
      <label>Scoring Team:</label>
+
function handleQueryResponse(response) {
-
      <select id="team" onchange="drawTable();">
+
   if (response.isError()) {
-
        <option value="">All</option>
+
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
-
        <option value="Germany">Germany</option>
+
    return;
-
        <option value="New Zealand">New Zealand</option>
+
  }
-
        <option value="Uruguay">Uruguay</option>
+
  data = response.getDataTable();
-
      </select>
+
  var table = new google.visualization.Table(document.getElementById('querytable'));
-
    </div>
+
  table.draw(data, {'showRowNumber': false});
-
    <div id="visualization"></div>
+
  if (isFirstTime) {
-
   </body>
+
  init();
 +
  }
 +
}
 +
 
 +
function setQuery(queryString) {
 +
  // Query language examples configured with the UI
 +
  query.setQuery(queryString);
 +
  sendAndDraw();
 +
  queryInput.value = queryString;
 +
}
 +
 
 +
 
 +
 
 +
google.setOnLoadCallback(sendAndDraw);
 +
 
 +
function init() {
 +
  isFirstTime = false;
 +
  (new google.visualization.Table(document.getElementById('table'))).draw(data, options);
 +
   queryInput = document.getElementById('display-query');
 +
}
 +
 
 +
function setQueryFromUser() {
 +
  setQuery(queryInput.value);
 +
}
 +
 
 +
 
 +
</script>
</html>
</html>

Revision as of 12:44, 2 September 2013

Retrieved from "http://2013.igem.org/Team:TU-Delft/SynBioData"