Google Tabellen

Auf dieser Seite wird beschrieben, wie Sie Google Charts mit Google Tabellen verwenden.

  1. Einführung
  2. Diagramme in Tabellen einfügen
  3. Diagramm aus einer separaten Tabelle erstellen

Einführung

Google Charts und Google Tabellen sind eng miteinander verknüpft. Sie können ein Google-Diagramm in eine Google-Tabelle einfügen und mit Google Charts können Daten aus Google-Tabellen extrahiert werden. In dieser Dokumentation wird beschrieben, wie Sie beides tun können.

Unabhängig von der ausgewählten Methode ändert sich das Diagramm, wenn sich die zugrunde liegende Tabelle ändert.

Diagramme in eine Tabelle einbetten

Es ist ganz einfach, ein Diagramm in eine Tabelle einzufügen. Wählen Sie in der Symbolleiste „Tabellen“ die Option „Einfügen“ und dann „Diagramm“ aus. Anschließend können Sie den Diagrammtyp und verschiedene Optionen auswählen:

Diagramm aus einer separaten Tabelle erstellen

In der Regel erstellen Nutzer Google-Diagramme, indem sie eine Datentabelle ausfüllen und das Diagramm anhand dieser Daten zeichnen. Wenn Sie stattdessen die Daten aus einer Google-Tabelle abrufen möchten, fragen Sie die Tabelle ab, um die Daten abzurufen, die im Diagramm dargestellt werden sollen:

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);
}

Das funktioniert, da Google Tabellen die Abfragesprache von Google Charts unterstützt, um Daten zu sortieren und zu filtern. Jedes System, das die Abfragesprache unterstützt, kann als Datenquelle verwendet werden.

Beachten Sie, dass Diagramme die Berechtigungen der Person, die sie ansieht, nicht ohne ausdrückliche Autorisierung verwendet werden können. Die Tabelle muss entweder für alle sichtbar sein oder die Seite muss explizit die Anmeldedaten von Endnutzern erhalten, wie im Abschnitt Autorisierung dieser Seite beschrieben.

Wenn Sie eine Google-Tabelle als Datenquelle verwenden möchten, benötigen Sie deren URL:

  1. Öffnen Sie eine vorhandene Tabelle. Diese Tabelle sollte das für die Visualisierung erwartete Format haben und die Anzeigeberechtigungen müssen korrekt festgelegt sein. Am einfachsten ist es, sich die Berechtigungen „Öffentlich im Web“ oder „Jeder, der über den Link verfügt“ anzusehen. Bei der Anleitung in diesem Abschnitt wird von einer auf diese Weise eingerichteten Tabelle ausgegangen. Sie können die Einschränkung einschränken, indem Sie die Tabelle auf „Privat“ setzen und einzelnen Google-Konten Zugriff gewähren. Dazu müssen Sie jedoch die Anweisungen zur Autorisierung befolgen.
  2. Kopieren Sie die URL aus Ihrem Browser. Weitere Informationen zum Auswählen bestimmter Bereiche finden Sie unter Abfragequellbereiche.
  3. Gib die URL zu google.visualization.Query() an. Die Abfrage unterstützt die folgenden optionalen Parameter:
    • headers=N: gibt an, wie viele Zeilen Kopfzeilen sind, wobei N eine Ganzzahl von null oder größer ist. Diese werden aus den Daten ausgeschlossen und als Spaltenlabels in der Datentabelle zugewiesen. Wenn Sie diesen Parameter nicht angeben, wird in der Tabelle geschätzt, wie viele Zeilen Kopfzeilen sind. Wenn alle Spalten Stringdaten sind, ist es für die Tabelle möglicherweise schwierig, zu ermitteln, welche Zeilen Kopfzeilen ohne diesen Parameter sind.
    • gid=N: Gibt an, mit welchem Tabellenblatt in einem mehrseitigen Dokument eine Verknüpfung hergestellt werden soll, wenn keine Verknüpfung mit dem ersten Tabellenblatt erfolgt. N ist die ID-Nummer des Tabellenblatts. Sie finden die ID-Nummer, indem Sie die veröffentlichte Version des Tabellenblattes aufrufen und in der URL nach dem Parameter gid=N suchen. Sie können auch den Parameter sheet anstelle dieses Parameters verwenden. Gotcha: Google Tabellen kann den gid-Parameter in der URL neu anordnen, wenn er in einem Browser angezeigt wird. Achte beim Kopieren aus einem Browser darauf, dass alle Parameter vor dem #-Zeichen der URL stehen. Beispiel: gid=1545912003.
    • sheet=sheet_name: Gibt an, mit welchem Tabellenblatt in einem Mehrblattdokument eine Verknüpfung besteht, wenn Sie nicht mit dem ersten Tabellenblatt verlinken. sheet_name ist der Anzeigename des Tabellenblatts. Beispiel: sheet=Sheet5.

Hier ein vollständiges Beispiel:

Im Folgenden finden Sie zwei Möglichkeiten zum Zeichnen dieses Diagramms: eine mit dem Parameter gid und die andere mit dem Parameter sheet. Wenn Sie eine der URLs im Browser eingeben, erhalten Sie dieselben Ergebnisse/Daten für das Diagramm.

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 });
    }
Tabelle
    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 });
    }

Quellbereiche der Abfrage

Die URL der Abfragequelle gibt an, welcher Teil einer Tabelle in der Abfrage verwendet werden soll: eine bestimmte Zelle, ein Zellenbereich, Zeilen oder Spalten oder eine ganze Tabelle. Geben Sie den Bereich mit der Syntax „range=<range_expr>“ an. Beispiel:

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

Die folgenden Beispiele veranschaulichen die Syntax:

  • A1:B10: ein Bereich von Zelle A1 bis B10
  • 5:7 – Zeilen 5–7
  • D:F – Spalten D–F
  • A:A70: die ersten 70 Zellen in Spalte A
  • A70:A – Spalte A von Zeile 70 bis zum Ende
  • B5:5: B5 bis zum Ende von Zeile 5
  • D3:D: D3 bis zum Ende der Spalte D
  • C:C10: vom Anfang der Spalte C bis C10

Autorisierung

Google Tabellen benötigt Anmeldedaten von Endnutzern, um über die Google Visualization API ("/tq-Anfragen") auf private Tabellen zugreifen zu können.

Hinweis: Für Tabellen, die für „Jeder, der über den Link verfügt, dürfen ansehen“ freigegeben werden, sind keine Anmeldedaten erforderlich. Das Ändern der Freigabeeinstellungen für Ihre Tabelle ist viel einfacher als die Implementierung der Autorisierung.

In Fällen, in denen die Linkfreigabe keine praktikable Lösung ist, müssen Entwickler ihren Code ändern, um für den Google Sheets API-Bereich autorisierte OAuth 2.0-Anmeldedaten weiterzugeben (https://www.googleapis.com/auth/spreadsheets).

Weitere Hintergrundinformationen zu OAuth 2.0 finden Sie unter OAuth 2.0 für den Zugriff auf Google APIs verwenden.

Beispiel: OAuth für den Zugriff auf /gviz/tq verwenden

Voraussetzung: Client-ID über die Google Developers Console abrufen

Eine ausführlichere Anleitung zur Einbindung in die Identity Platform von Google findest du unter Google Log-in und unter Google API Console-Projekt und Client-ID erstellen.

Um OAuth-Tokens für einen Endnutzer zu erhalten, müssen Sie Ihr Projekt zuerst in der Google Developer Console registrieren und eine Client-ID erwerben.

  1. Erstellen Sie in der Entwicklerkonsole eine neue OAuth-Client-ID.
  2. Wählen Sie als Anwendungstyp Webanwendung aus.
  3. Wählen Sie einen beliebigen Namen aus. Dieser dient nur zu Informationszwecken.
  4. Fügen Sie den Namen Ihrer Domain und aller Testdomains als Autorisierte JavaScript-Quellen hinzu.
  5. Lassen Sie Autorisierte Weiterleitungs-URIs leer.

Nachdem Sie auf „Erstellen“ geklickt haben, kopieren Sie die Client-ID zur späteren Verwendung. Der Clientschlüssel ist für diese Übung nicht erforderlich.

Aktualisieren Sie Ihre Website, um OAuth-Anmeldedaten zu erhalten.

Google bietet die Bibliothek gapi.auth, die das Abrufen von OAuth-Anmeldedaten stark vereinfacht. Das folgende Codebeispiel verwendet diese Bibliothek, um Anmeldedaten zu erhalten (falls erforderlich) und übergibt die resultierenden Anmeldedaten an den Endpunkt /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));
}

Nach der Autorisierung gibt gapi.auth.getToken() alle Anmeldedaten zurück, einschließlich access_token, die an /gviz/tq-Anfragen angehängt werden können.

Weitere Informationen zur Verwendung der gapi-Bibliothek für die Authentifizierung finden Sie unter:

Bereich „drive.file“ verwenden

Im vorherigen Beispiel wird der Google Sheets API-Bereich verwendet, der Lese- und Schreibzugriff auf den gesamten Tabelleninhalt eines Nutzers gewährt. Je nach Anwendung ist dies möglicherweise umfangreicher als erforderlich. Verwenden Sie für den schreibgeschützten Zugriff den Bereich spreadsheets.readonly, mit dem schreibgeschützter Zugriff auf die Tabellenblätter und ihre Eigenschaften des Nutzers gewährt wird.

Der Bereich drive.file (https://www.googleapis.com/auth/drive.file) gewährt nur Zugriff auf die Dateien, die der Nutzer explizit mit der Google Drive-Dateiauswahl öffnet, die über die Picker API gestartet wird.

Mit der Auswahl können Sie den Ablauf Ihrer Anwendung ändern. Anstatt eine URL einzufügen oder eine hartcodierte Tabelle wie im Beispiel oben zu verwenden, muss der Nutzer über das Auswahldialogfeld auswählen, auf welche Tabelle die Seite zugreifen soll. Folgen Sie dem Auswahlbeispiel „Hello World“ und verwenden Sie google.picker.ViewId.SPREADSHEETS anstelle von google.picker.ViewId.PHOTOS.