Skip to content

Instantly share code, notes, and snippets.

Created December 13, 2010 21:06
  • Star 8 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
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 (
<!DOCTYPE html>
<html lang="en">
<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=""></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
<script type="text/javascript">
// To see the data that this visualization uses, browse to
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(
query.setQuery("SELECT B, Count(C) GROUP BY B ");
function handleSelectResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
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(
// Apply query language.
query.setQuery("SELECT C, Count(B) WHERE B = '"+ansSet+"' GROUP BY C ");
// Send the query with a callback function.
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
var data = response.getDataTable();
visualization = new google.visualization.BarChart(document.getElementById('visualization'));
{title:"Response Graph for "+document.myform.ansSet.value,
width:600, height:400,
vAxis: {title: "Answer Options"},
hAxis: {title: "Responses"}}
<body style="font-family: Arial;border: 0 none;" onload="drawDynamicSelect();">
<p>Data for this page is extracted from this <a href="">Google Spreadsheet</a>. Responses can be added via <a href=";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>
<div id="visualization" style="height: 400px; width: 600px;"></div>
<footer>Created by <a href="">mhawksey</a> | <a href="">Related blog post</a></footer>
Copy link

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
in the last page is where i want take the information of the column D.

I hope you help me.

Copy link

wasankds commented May 5, 2020

How about Google Sheets that restrict access.

Copy link

mhawksey commented May 6, 2020

@wasands ... you need to setup authorization and use a token. There is some example code here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment