Team:TU-Delft/SynBioData

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
+
<!DOCTYPE html>
-
<html>
+
<html lang="en">
-
 
+
<head>
-
<script>
+
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
-
var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc#gid=0');
+
<title>gEVS Using Google Spreadsheet and Visualization API as a voting system wrapper</title>
-
query.setQuery('select id, sum(id) group by team');
+
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 +
<script type="text/javascript">
 +
google.load('visualization', '1', {packages: ['corechart']});
 +
</script>
 +
<script type="text/javascript">
 +
// To see the data that this visualization uses, browse to
 +
// https://spreadsheets.google.com/ccc?key=tQW2XyL0iNBeq8m6zrFuMRw
 +
var ssKey = "tQW2XyL0iNBeq8m6zrFuMRw";
 +
var visualization;
 +
// drawDynamicSelect() and handleSelectResponse() are used to draw the dynamic list of question ids
 +
function drawDynamicSelect(){
 +
var query = new google.visualization.Query(
 +
'http://spreadsheets.google.com/tq?key='+ssKey+'&pub=1');
 +
query.setQuery("SELECT B, Count(C) GROUP BY B ");
 +
query.send(handleSelectResponse);
 +
}
 +
function handleSelectResponse(response) {
 +
if (response.isError()) {
 +
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 +
return;
 +
}
 +
var data = response.getDataTable();
 +
var ansSet=document.myform.ansSet
 +
for (i=0; i<data.getNumberOfRows(); i++){
 +
var ansText = data.getValue(i, 0)+' (No of votes '+data.getValue(i, 1)+')';
 +
var valText = data.getValue(i, 0);
 +
ansSet.options[ansSet.options.length]=new Option(ansText,valText);
 +
}
 +
}
 +
//drawVisualization() and handleQueryResponse() draw a chart for the selected data
 +
function drawVisualization(ansSet) {
 +
var query = new google.visualization.Query(
 +
'http://spreadsheets.google.com/tq?key='+ssKey+'&pub=1');
 +
// Apply query language.
 +
query.setQuery("SELECT C, Count(B) WHERE B = '"+ansSet+"' GROUP BY C ");
 +
// Send the query with a callback function.
query.send(handleQueryResponse);
query.send(handleQueryResponse);
-
 
+
}
-
 
+
function handleQueryResponse(response) {
 +
if (response.isError()) {
 +
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 +
return;
 +
}
 +
var data = response.getDataTable();
 +
visualization = new google.visualization.BarChart(document.getElementById('visualization'));
 +
visualization.draw(data,
 +
{title:"Response Graph for "+document.myform.ansSet.value,
 +
width:600, height:400,
 +
legend:'none',
 +
vAxis: {title: "Answer Options"},
 +
hAxis: {title: "Responses"}}
 +
);
 +
}
</script>
</script>
 +
</head>
 +
<body style="font-family: Arial;border: 0 none;" onload="drawDynamicSelect();">
 +
<p>Data for this page is extracted from this <a href="https://spreadsheets.google.com/ccc?key=tQW2XyL0iNBeq8m6zrFuMRw">Google Spreadsheet</a>. Responses can be added via <a href="https://docs.google.com/spreadsheet/ccc?key=0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc#gid=0">this form</a>.</p>
 +
<form action="" name="myform">
 +
<select name="ansSet" onChange="drawVisualization(this.value)">
 +
<option value="">-Select Answer Set-</option>
 +
</select>
 +
</form>
 +
<div id="visualization" style="height: 400px; width: 600px;"></div>
 +
<footer>Created by <a href="http://twitter.com/mhawksey">mhawksey</a> | <a href="http://www.rsc-ne-scotland.org.uk/mashe/2010/12/gevs-google-visualization/">Related blog post</a></footer>
 +
</body>
</html>
</html>

Revision as of 13:55, 2 September 2013

<!DOCTYPE html> gEVS Using Google Spreadsheet and Visualization API as a voting system wrapper

Data for this page is extracted from this Google Spreadsheet. Responses can be added via this form.

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