Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of using Google Spreadsheet and Visualization API as a multi question voting (clicker) system
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>gEVS Using Google Spreadsheet and Visualization API as a voting system wrapper</title>
<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);
}
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>
</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://spreadsheets.google.com/viewform?hl=en_GB&amp;formkey=dFFXMlh5TDBpTkJlcThtNnpyRnVNUnc6MQ#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>
@raulmtzg

This comment has been minimized.

Copy link

@raulmtzg raulmtzg commented Apr 25, 2015

Hi!,
I have a problem, because i don't know how apply to my project. Helpme please...

I have a website and from here i want load a select form, doing a simple query, (select D).
My link of spreadsheet is https://docs.google.com/spreadsheet/ccc?key=1IMdKz-VSbD_-heAx2MlLzwQFdA_dUn6aICvzXbjmua0
in the last page is where i want take the information of the column D.

I hope you help me.
thanks

@wasankds

This comment has been minimized.

Copy link

@wasankds wasankds commented May 5, 2020

How about Google Sheets that restrict access.

@mhawksey

This comment has been minimized.

Copy link
Owner Author

@mhawksey mhawksey commented May 6, 2020

@wasands ... you need to setup authorization and use a token. There is some example code here https://developers.google.com/chart/interactive/docs/spreadsheets?hl=cs#authorization

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.