Created
December 13, 2010 21:06
-
-
Save mhawksey/739602 to your computer and use it in GitHub Desktop.
Example of using Google Spreadsheet and Visualization API as a multi question voting (clicker) system
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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&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> |
How about Google Sheets that restrict access.
@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
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