Team:TU-Delft/SynBioData

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:TU-Delft/Templates/Navigation}}
 
-
{{:Team:TU-Delft/Templates/Style}}
 
-
{{:Team:TU-Delft/Templates/Frog}}
 
-
{{:Team:TU-Delft/Templates/Logo}}
 
-
 
<html>
<html>
 +
  <head>
 +
    <meta charset="UTF-8">
-
<table width="100%">
+
    <title>Fusion Tables API Example: Google Chart Tools Data Table</title>
-
<tr>
+
-
<td>
+
-
 
+
-
<div style="width:300px;border:1px solid #c0c0c0;text-align:center; padding:15px;background-color:#f0f0f0;">
+
-
<b>F</b><br/><br/>
+
-
Key Word: <input type="text" id="rollNum" onKeyUp="checkEnter(event.keyCode)"> &nbsp;
+
-
<input type="button" value="Show" onClick="showModalWindow(document.getElementById('rollNum').value)">
+
-
</div>
+
-
<br/><br/>
+
-
 
+
-
<iframe id="iframeResDis" width="100%" frameborder="0" style="border:none; height:100px;display:none;"></iframe>
+
-
dd
+
-
</td>
+
-
</tr>
+
-
</table>
+
-
 
+
-
<script language="JavaScript">
+
    <link href="/apis/fusiontables/docs/samples/style/default.css"
 +
        rel="stylesheet" type="text/css">
 +
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 +
    <script type="text/javascript">
 +
      google.load('visualization', '1', { packages: ['table'] });
-
  var data;
+
      function drawTable() {
-
  function showModalWindow(data)
+
        var query = "SELECT 'Scoring Team' as Scoring, " +
-
  {
+
            "'Receiving Team' as Receiving, 'Minute of goal' as Minute " +
-
      var url1="https://docs.google.com/spreadsheet/pub?key=0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc&single=true&gid=0&output=html";
+
            'FROM 1VlPiBCkYt_Vio-JT3UwM-U__APurJvPb6ZEJPg';
-
      document.getElementById('iframeResDis').style.display="block";
+
        var team = document.getElementById('team').value;
-
      document.getElementById('iframeResDis').src=url1;
+
        if (team) {
-
  }
+
          query += " WHERE 'Scoring Team' = '" + team + "'";
-
function checkEnter(code){
+
        }
 +
        var queryText = encodeURIComponent(query);
 +
        var gvizQuery = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc&single=true&gid=0&output=html');
-
showModalWindow(document.getElementById('id').value);
+
        gvizQuery.send(function(response) {
 +
          var table = new google.visualization.Table(
 +
              document.getElementById('visualization'));
 +
          table.draw(response.getDataTable(), {
 +
            showRowNumber: true
 +
          });
 +
        });
 +
      }
-
}
+
      google.setOnLoadCallback(drawTable);
-
  </script>
+
    </script>
 +
  </head>
 +
  <body>
 +
    <div>
 +
      <label>Scoring Team:</label>
 +
      <select id="team" onchange="drawTable();">
 +
        <option value="">All</option>
 +
        <option value="Germany">Germany</option>
 +
        <option value="New Zealand">New Zealand</option>
 +
        <option value="Uruguay">Uruguay</option>
 +
      </select>
 +
    </div>
 +
    <div id="visualization"></div>
 +
  </body>
</html>
</html>

Revision as of 11:58, 2 September 2013

Fusion Tables API Example: Google Chart Tools Data Table

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