Fogli di lavoro Google

In questa pagina viene descritto come utilizzare i grafici Google con i fogli di lavoro Google.

  1. Introduzione
  2. Incorporare un grafico in un foglio di lavoro
  3. Creazione di un grafico da un foglio di lavoro separato

Introduzione

I grafici e i fogli di lavoro Google sono strettamente integrati. Puoi inserire un grafico di Google grafico in un foglio di lavoro Google e i grafici di Google possono estrarre i dati da fogli di lavoro Google. In questa documentazione viene spiegato come eseguire entrambe le operazioni.

Qualsiasi sia il metodo scelto, il grafico cambierà ogni volta che il foglio di lavoro sottostante cambia.

Incorporare un grafico in un foglio di lavoro

È facile includere un grafico in un foglio di lavoro. Nella barra degli strumenti dei fogli di lavoro, seleziona "Inserisci", poi "Grafico" e potrai scegliere il tipo di grafico e selezionare le seguenti opzioni:

Creazione di un grafico da un foglio di lavoro separato

In genere, le persone creano grafici Google compilando una tabella di dati e disegnando il grafico utilizzando tali dati. Se invece vuoi recuperare i dati da un foglio di lavoro Google, esegui una query sul foglio di lavoro per recuperarli:

function drawChart() {
  var query = new google.visualization.Query(URL);
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  chart.draw(data, null);
}

Questa soluzione funziona perché i fogli di lavoro di Google supportano il linguaggio di query di Google Graphs per ordinare e filtrare i dati; qualsiasi sistema che supporta il linguaggio di query può essere utilizzato come origine dati.

Tieni presente che i grafici non possono utilizzare i privilegi della persona che li visualizza senza autorizzazione esplicita. Il foglio di lavoro deve essere visibile a tutti oppure la pagina deve acquisire esplicitamente una credenziale dell'utente finale come documentato nella sezione Autorizzazione di questa pagina.

Per utilizzare un foglio di lavoro Google come origine dati, è necessario il suo URL:

  1. Apri un foglio di lavoro esistente. Il foglio di lavoro deve avere il formato previsto dalla visualizzazione e dovrebbe avere i privilegi di visualizzazione impostati correttamente. La visualizzazione dei privilegi "Pubblico sul Web" o "Chiunque abbia il link" è più semplice e le istruzioni in questa sezione presuppongono un foglio di lavoro configurato in questo modo. Puoi limitare l'accesso mantenendo il foglio di lavoro "Privato" e concedendo l'accesso a singoli Account Google, ma dovrai seguire le istruzioni di autorizzazione di seguito.
  2. Copia l'URL dal browser. Per ulteriori dettagli sulla selezione di intervalli specifici, consulta la pagina Intervalli di origini delle query.
  3. Fornisci l'URL a google.visualization.Query(). La query supporta i seguenti parametri facoltativi:
    • headers=N: specifica quante righe sono righe di intestazione, dove N è un numero intero pari a zero o maggiore. Verranno esclusi dai dati e assegnati come etichette di colonna nella tabella dei dati. Se non specifichi questo parametro, il foglio di lavoro indovina quante righe sono righe di intestazione. Tieni presente che se tutte le colonne sono dati relative a stringhe, nel foglio di lavoro potrebbe essere difficile determinare quali righe sono righe di intestazione senza questo parametro.
    • gid=N: specifica a quale foglio in un documento di più fogli collegare un link, se non intendi collegarlo al primo foglio. N è l'ID del foglio. Puoi ottenere l'ID andando alla versione pubblicata del foglio e cercando il parametro gid=N nell'URL. Puoi anche utilizzare il parametro sheet invece di questo parametro. Gotcha: i fogli di lavoro di Google potrebbero riorganizzare il parametro rigido nell'URL quando vengono visualizzati in un browser; se copi da un browser, assicurati che tutti i parametri siano prima del segno # dell'URL. Esempio: gid=1545912003.
    • sheet=sheet_name: specifica il foglio di un documento di più fogli che vuoi collegare se non stai eseguendo il collegamento al primo foglio. nome_foglio è il nome visualizzato del foglio. Esempio: sheet=Sheet5.

Ecco un esempio completo:

Di seguito sono riportati due modi per disegnare questo grafico: uno utilizzando il parametro gid e l'altro utilizzando il parametro sheet. Se inserisci uno degli URL nel browser, otterrai lo stesso risultato/dati per il grafico.

GID
    function drawGID() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }
Foglio
    function drawSheetName() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }

Intervalli di origini delle query

L'URL dell'origine della query specifica la parte di un foglio di lavoro da utilizzare nella query: una cella specifica, un intervallo di celle, righe o colonne o un intero foglio di lavoro. Specifica l'intervallo utilizzando la sintassi "range=<range_expr>", ad esempio:

https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4

Ecco alcuni esempi che mostrano la sintassi:

  • A1:B10: intervallo da cella A1 a B10
  • 5:7 - Righe 5-7
  • D:F - Colonne D-F
  • A:A70: le prime 70 celle nella colonna A
  • A70:A - Colonna A dalla riga 70 alla fine
  • B5:5 - B5 fino alla fine della riga 5
  • D3:D: D3 alla fine della colonna D
  • C:C10: dall'inizio della colonna C a C10

Autorizzazione

Fogli Google richiede all'utente finale le credenziali per accedere ai fogli di lavoro privati tramite l'API di visualizzazione Google ("/tq requests").

Nota: i fogli di lavoro condivisi con "Chiunque abbia il link può visualizzare" non richiedono le credenziali. Cambiare le impostazioni di condivisione del foglio di lavoro è molto più facile che implementare l'autorizzazione.

Nei casi in cui la condivisione tramite link non sia una soluzione attuabile, gli sviluppatori dovranno modificare il proprio codice per passare una credenziale OAuth 2.0 autorizzata per l'ambito dell'API Google Sheets (https://www.googleapis.com/auth/spreadsheets).

Ulteriori informazioni sul contesto di OAuth 2.0 sono disponibili nell'articolo Utilizzo di OAuth 2.0 per accedere alle API di Google

Esempio: utilizzo di OAuth per accedere a /gviz/tq

Prerequisito: richiesta di ID cliente dalla Google Developer Console

Puoi trovare istruzioni più dettagliate sull'integrazione con Identity Platform di Google nella pagina Accedi con Google e creare un progetto e un ID client per la console delle API di Google.

Per acquisire i token OAuth per un utente finale, devi prima registrare il tuo progetto nella Google Developers Console e acquisire un Client-ID.

  1. Dalla console per gli sviluppatori, crea un nuovo ID client OAuth.
  2. Scegli Applicazione web come tipo di applicazione.
  3. Scegli un nome, è solo a scopo informativo.
  4. Aggiungi il nome del tuo dominio (ed eventuali domini di test) come Origini JavaScript autorizzate.
  5. Lascia vuoto il campo URI di reindirizzamento autorizzati.

Dopo aver fatto clic su Crea, copia l'ID client per riferimento futuro. Il client secret non è necessario per questo esercizio.

Aggiorna il tuo sito per acquisire le credenziali OAuth.

Google fornisce la libreria gapi.auth, che semplifica notevolmente il processo di acquisizione di una credenziale OAuth. L'esempio di codice riportato di seguito utilizza questa libreria per acquisire una credenziale (se richiede l'autorizzazione, se necessario) e passa la credenziale risultante all'endpoint /gviz/tq.

demo.html 
<html>
<body>
  <button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script src="./demo.js" type="text/javascript"></script>
  <script src="https://apis.google.com/js/auth.js?onload=init"></script>
</body>
</html>
demo.js 
// NOTE: You must replace the client id on the following line.
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);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult && !authResult.error) {
    authorizeButton.style.visibility = 'hidden';
    makeApiCall();
  } else {
    authorizeButton.style.visibility = '';
    authorizeButton.onclick = handleAuthClick;
  }
}

function handleAuthClick(event) {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: false},
      handleAuthResult);
  return false;
}

function makeApiCall() {
  // Note: The below spreadsheet is "Public on the web" and will work
  // with or without an OAuth token.  For a better test, replace this
  // URL with a private spreadsheet.
  var tqUrl = 'https://docs.google.com/spreadsheets' +
      '/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
      '?tqx=responseHandler:handleTqResponse' +
      '&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));
}

Una volta eseguita l'autorizzazione, gapi.auth.getToken() restituirà tutti i dettagli delle credenziali, tra cui access_token che può essere aggiunto alle richieste /gviz/tq.

Per saperne di più sull'utilizzo della libreria gapi per l'autenticazione, consulta:

Utilizzo dell'ambito di drive.file

L'esempio precedente utilizza l'ambito dell'API Fogli Google, che concede l'accesso in lettura e scrittura a tutti i contenuti del foglio di lavoro di un utente. A seconda della richiesta, potrebbe essere più permissivo del necessario. Per l'accesso di sola lettura, utilizza l'ambito spreadsheets.readonly che concede l'accesso di sola lettura ai fogli e alle relative proprietà dell'utente.

L'ambito di drive.file (https://www.googleapis.com/auth/drive.file) concede l'accesso solo ai file che l'utente apre esplicitamente con il selettore file di Google Drive, lanciato tramite l'API Picker.

L'utilizzo del selettore modifica il flusso della tua applicazione. Invece di incollare un URL o di avere un foglio di lavoro hardcoded come nell'esempio precedente, l'utente deve utilizzare la finestra di dialogo Selettore per scegliere il foglio di lavoro a cui vuole accedere la sua pagina. Segui l'esempio di selettore "Hello World", utilizzando google.picker.ViewId.SPREADSHEETS al posto di google.picker.ViewId.PHOTOS.