Difference between revisions of "Web Element: Data"

Revision as of 12:44, 28 April 2020

https://docs.google.com/spreadsheets/d/1YUqF27YsO2tVdFL1R6Oxu5BT5itjA_ozZDrekzfFclk/edit?usp=sharing

'); } function handleTqResponse(resp) { document.write(JSON.stringify(resp)); }

@@ Line 185: / Line 185: @@
 <html>
-  <head>
+<body>
-    <!--Load the AJAX API-->
+  <button id="authorize-button" style="visibility: hidden">Authorize</button>
-    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <script type="text/javascript">
-    <script type="text/javascript">
-    function drawSheetName() {
+// NOTE: You must replace the client id on the following line.
-       var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
+var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com';
+var scopes = 'https://www.googleapis.com/auth/spreadsheets';
+function init() {
+  gapi.auth.authorize(
+       {client_id: clientId, scope: scopes, immediate: true},
+      handleAuthResult);
+}
-      var query = new google.visualization.Query(
+function handleAuthResult(authResult) {
-          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
+  var authorizeButton = document.getElementById('authorize-button');
-      query.send(handleSampleDataQueryResponse);
+  if (authResult && !authResult.error) {
-     }
+    authorizeButton.style.visibility = 'hidden';
+    makeApiCall();
+  } else {
+    authorizeButton.style.visibility = '';
+     authorizeButton.onclick = handleAuthClick;
+  }
+}
-    function handleSampleDataQueryResponse(response) {
+function handleAuthClick(event) {
-      if (response.isError()) {
+  gapi.auth.authorize(
-        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
+      {client_id: clientId, scope: scopes, immediate: false},
-        return;
+      handleAuthResult);
-      }
+  return false;
+}
-      var data = response.getDataTable();
+function makeApiCall() {
-       var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_3'));
+  // Note: The below spreadsheet is "Public on the web" and will work
-      chart.draw(data, { height: 400 });
+  // with or without an OAuth token.  For a better test, replace this
-    }
+  // URL with a private spreadsheet.
-    </script>
+  var tqUrl = 'https://docs.google.com/spreadsheets' +
-   </head>
+      '/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
-<body>
+      '?tqx=responseHandler:handleTqResponse' +
-<div id="chart_div_3"></div>
+       '&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);
+  document.write('<script src="' + tqUrl +'" type="text/javascript"></script>');
+}
+function handleTqResponse(resp) {
+  document.write(JSON.stringify(resp));
+}
+  </script>
+   <script src="https://apis.google.com/js/auth.js?onload=init"></script>
 </body>
 </html>