|
|
| Line 1: |
Line 1: |
| - | <!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 = "0ArsDNt8sj-LBdEdCREdxUTFmVXpPaTVnZm43d0RTdmc";
| + | |
| - | 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="hhttps://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>
| + | |
"
