Team:TU-Delft/SynBioData

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
    
+
   <head>
-
<table width="100%">
+
    <meta charset="UTF-8">
-
<tr>
+
-
<td>
+
-
<div style="width:300px;border:1px solid #c0c0c0;text-align:center; padding:15px;background-color:#f0f0f0;">
+
    <title>Fusion Tables API Example: Google Chart Tools Data Table</title>
-
<b>First Semester Result Published</b><br/><br/>
+
-
Roll No: <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>
+
    <link href="/apis/fusiontables/docs/samples/style/default.css"
-
dd
+
        rel="stylesheet" type="text/css">
-
</td>
+
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-
</tr>
+
    <script type="text/javascript">
-
</table>
+
      google.load('visualization', '1', { packages: ['table'] });
 +
      function drawTable() {
 +
        var query = "SELECT 'Scoring Team' as Scoring, " +
 +
            "'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(
 +
            'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
-
<script language="JavaScript">
+
        gvizQuery.send(function(response) {
 +
          var table = new google.visualization.Table(
 +
              document.getElementById('visualization'));
 +
          table.draw(response.getDataTable(), {
 +
            showRowNumber: true
 +
          });
 +
        });
 +
      }
-
  var data;
+
      google.setOnLoadCallback(drawTable);
-
  function showModalWindow(data)
+
    </script>
-
  {
+
  </head>
-
       var url1="https://docs.google.com/spreadsheet/ccc?key=0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc#gid=0";
+
  <body>
-
      document.getElementById('iframeResDis').style.display="block";
+
    <div>
-
      document.getElementById('iframeResDis').src=url1;
+
       <label>Scoring Team:</label>
-
  }
+
      <select id="team" onchange="drawTable();">
-
function checkEnter(code){
+
        <option value="">All</option>
-
if(code==13){
+
        <option value="Germany">Germany</option>
-
showModalWindow(document.getElementById('id').value);
+
        <option value="New Zealand">New Zealand</option>
-
}
+
        <option value="Uruguay">Uruguay</option>
-
}
+
      </select>
-
  </script>
+
    </div>
-
 
+
    <div id="visualization"></div>
-
</script>
+
  </body>
</html>
</html>

Revision as of 13:14, 2 September 2013

Fusion Tables API Example: Google Chart Tools Data Table

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