Google Charts und Google Spreadsheets sind eng verknüpft. Sie können ein Google-Diagramm in eine Google-Tabelle einfügen und Google Diagramme können Daten aus Google-Tabellen extrahieren. Dieser Artikel zeigt Ihnen, wie Sie beides tun können.

Einbetten eines Diagramms in eine Tabelle

Das Einfügen eines Diagramms in eine Tabelle ist einfach. Wählen Sie in der Spreadsheets-Symbolleiste „Einfügen“ und dann „Diagramm“, und Sie können den Diagrammtyp und verschiedene Optionen auswählen.

Erstellen eines Diagramms aus einer separaten Tabelle

Typischerweise erstellen Leute Google Diagramme, indem sie eine Datentabelle füllen und das Diagramm mit diesen Daten zeichnen. Wenn Sie die Daten stattdessen aus einer Google-Tabelle abrufen möchten, fragen Sie die Tabelle ab, um die darzustellenden Daten abzurufen:

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

Dies funktioniert, weil Google Spreadsheets die Google Charts -Abfragesprache zum Sortieren und Filtern von Daten unterstützt. Als Datenquelle kann jedes System verwendet werden, das die Abfragesprache unterstützt.

Autorisierung

Beachten Sie, dass Diagramme die Privilegien der Person, die sie anzeigt, nicht ohne ausdrückliche Genehmigung nutzen können. Die Tabelle muss entweder für alle sichtbar sein, oder die Seite muss explizit Endbenutzer-Anmeldeinformationen erwerben, wie im Abschnitt „ Autorisierung “ auf dieser Seite dokumentiert.

Um eine Google-Tabelle als Datenquelle zu verwenden, benötigen Sie ihre URL:

1. Öffnen Sie eine vorhandene Tabelle. Diese Tabelle sollte das von Ihrer Visualisierung erwartete Format haben und die Anzeigeberechtigungen sollten richtig eingestellt sein. (Die Anzeigerechte von „Öffentlich im Web“ oder „Jeder mit dem Link“ sind am einfachsten, und die Anweisungen in diesem Abschnitt gehen von einer Tabelle aus, die auf diese Weise eingerichtet wurde. Sie können sie einschränken, indem Sie die Tabelle „Privat“ lassen und gewähren Zugriff auf einzelne Google-Konten, aber Sie müssen die Autorisierungsanweisungen unten befolgen).
2. Kopieren Sie die URL aus Ihrem Browser. Weitere Informationen zum Auswählen bestimmter Bereiche finden Sie unter Abfragequellbereiche .
3. Geben Sie die URL ein: google.visualization.Query(). Die Abfrage unterstützt die folgenden optionalen Parameter:

• headers=N: Gibt an, wie viele Zeilen Kopfzeilen sind, wobei N eine ganze Zahl von null oder größer ist. Diese werden von den Daten ausgeschlossen und als Spaltenbeschriftungen in der Datentabelle zugewiesen. Wenn Sie diesen Parameter nicht angeben, schätzt die Tabelle, wie viele Zeilen Kopfzeilen sind. Beachten Sie, dass die Tabelle ohne diesen Parameter möglicherweise Schwierigkeiten hat, zu bestimmen, welche Zeilen Kopfzeilen sind, wenn alle Ihre Spalten Zeichenfolgendaten sind.
• gid=N: Gibt an, mit welchem ​​Blatt in einem Dokument mit mehreren Blättern verknüpft werden soll, wenn Sie nicht mit dem ersten Blatt verknüpfen. N ist die ID-Nummer des Blatts. Sie können die ID-Nummer erfahren, indem Sie zur veröffentlichten Version dieses Blatts navigieren und in der URL nach dem Parameter suchen . Anstelle dieses Parameters können Sie auch den Parameter verwenden. Gotcha: Google Spreadsheets könnte den gid-Parameter in der URL neu anordnen, wenn es in einem Browser angezeigt wird; Achten Sie beim Kopieren von einem Browser darauf, dass alle Parameter vor der URL- Markierung stehen. Beispiel: .gid=Nsheet#gid=1545912003
• sheet=sheet_name: Gibt an, mit welchem ​​Blatt in einem Dokument mit mehreren Blättern Sie verknüpfen, wenn Sie nicht mit dem ersten Blatt verknüpfen. Blattname ist der Anzeigename des Blatts. Beispiel: sheet=Sheet5.

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