Erste Schritte mit Diagrammen

Auf dieser Seite werden die Grundlagen der Erstellung von Diagrammen mit der Chart API beschrieben.

Nutzungsrichtlinie für Google-Diagramme

Die Anzahl der Aufrufe an die Google Chart API pro Tag ist nicht begrenzt. Wir behalten uns jedoch das Recht vor, jegliche Nutzung zu sperren, die wir als missbräuchlich ansehen.

Überblick

Diagramme in dieser Dokumentation ansehen

Alle Diagrammbilder in dieser Dokumentation werden mithilfe der Chart API live generiert. So rufen Sie die URL eines Bildes auf:

  • Wenn Sie Firefox verwenden, klicken Sie mit der rechten Maustaste und wählen Sie "Bild anzeigen" oder "Eigenschaften" aus.
  • Wenn du Internet Explorer verwendest, klicke mit der rechten Maustaste und wähle dann „Eigenschaften“ aus.

Damit eine URL leichter zu lesen ist, wird sie in diesem Dokument oft in mehreren Zeilen angezeigt. Wenn Sie das Google Chart API verwenden, müssen Sie eine URL in einer einzigen Zeile angeben.

Die Google Chart API gibt als Antwort auf eine URL-GET- oder POST-Anfrage ein Diagramm zurück. Die API kann viele Arten von Diagrammen generieren, von Kreisdiagrammen oder Liniendiagrammen bis hin zu QR-Codes und Formeln. Alle gewünschten Informationen zum Diagramm, z. B. Diagrammdaten, Größe, Farben und Labels, sind Teil der URL. (Bei POST-Anfragen sieht das etwas anders aus, aber machen Sie sich darüber im Moment keine Sorgen.)

Für ein möglichst einfaches Diagramm müssen in der URL nur Diagrammtyp, Daten und Größe angegeben werden. Du kannst diese URL direkt in deinen Browser eingeben oder mit einem <img>-Tag auf deiner Webseite darauf verweisen. Über diesen Link können Sie beispielsweise ein Kreisdiagramm erstellen:

https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World

 

Der obige Link ist ein Beispiel für eine einfache Chart API-URL. Alle Diagramm-URLs haben das folgende Format:

https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...

Alle URLs beginnen mit https://chart.googleapis.com/chart?, gefolgt von den Parametern, die Diagrammdaten und Darstellung festlegen. Parameter sind name=value-Paare, die durch ein Und-Zeichen (&) getrennt sind. Parameter können nach ? in beliebiger Reihenfolge angegeben werden. Für alle Diagramme sind mindestens die folgenden Parameter erforderlich: cht (Diagrammtyp), chd (Daten) und chs (Diagrammgröße). Es gibt jedoch noch viele weitere Parameter für zusätzliche Optionen und Sie können so viele zusätzliche Parameter angeben, wie das Diagramm unterstützt.

Sehen wir uns die URL oben genauer an:

URL Komponenten

Gelbes Kreisdiagramm

https://chart.googleapis.com/chart?
  cht=p3&
  chs=250x100&
  chd=t:60,40&
  chl=Hello|World


https://chart.googleapis.com/chart?
Das ist die Basis-URL für alle Diagrammanfragen.
cht=p3
Der Diagrammtyp: hier ein 3D-Kreisdiagramm.
chs=250x100
Die Diagrammgröße (Breite x Höhe) in Pixeln. Hier finden Sie die Maximalwerte.
chd=t:60,40
Die Diagrammdaten. Diese Daten liegen im einfachen Textformat vor, es gibt aber auch andere Formate.
chl=Hello|World
Die Segmentlabels.
&
Die Parameter werden durch ein Et-Zeichen (&) getrennt. Hinweis:Wenn Sie eine URL in HTML einbetten, z. B. als src-Attribut eines <img>-Tags, müssen Sie den & zwischen den Parametern durch die Zeichen &amp; ersetzen. Dies gilt auch, wenn Sie den HTML-Code der Seite mit PHP oder einer anderen Sprache generieren. Wenn Sie jedoch eine URL im Browser eingeben oder eine URL im Code aufrufen, z. B. beim Abrufen einer URL in PHP oder Perl, sollten Sie das Zeichen & verwenden.

Kopieren Sie diese URL, fügen Sie sie in Ihren Browser ein und nehmen Sie einige Änderungen vor: Fügen Sie den Daten zusätzliche Werte hinzu (vergessen Sie nicht, vor jedem neuen Datenwert ein Komma zu setzen). Fügen Sie neue Labels hinzu. Setzen Sie dazu ein |-Zeichen vor jeden neuen Wert. Vergrößern Sie das Diagramm.

Nach oben

Diagramme erstellen

So erstellen Sie ein Bilddiagramm:

  1. Wählen Sie einen Diagrammtyp aus. In der Galerie finden Sie eine Liste der Diagramme. Der Diagrammtyp wird mit dem Parameter cht festgelegt. Skizzieren Sie alle Komponenten Ihres Diagramms (Achsen, Labels, Hintergründe usw.) und ermitteln Sie bei Bedarf Pixelabmessungen für die verschiedenen Komponenten (Diagrammgröße insgesamt, Legendengröße usw.). Lesen Sie zuerst die Dokumentation für Ihren Diagrammtyp sorgfältig durch, da Sie sonst möglicherweise frustrierend sind.
  2. Diagrammdaten erstellen und formatieren Die Daten werden mit dem Parameter chd angegeben. Sie müssen entscheiden, welches Format für Ihre Daten verwendet werden soll:
    • Wählen Sie ein Datenformat aus. Sie können für die Diagrammdaten ein einfaches Textformat verwenden, das zwar leicht zu lesen ist, aber mehr Platz zum Senden benötigt, oder einen der Codierungstypen verwenden, der kleiner zum Senden ist, aber den zu sendenden Wertebereich einschränkt.
    • Entscheiden Sie, ob die Daten skaliert werden müssen, damit sie in Ihr Diagramm passen. Verschiedene Formate unterstützen unterschiedliche Wertebereiche. Sie können Ihre Daten so skalieren, dass sie den gesamten Wertebereich umfassen, der für Ihr Format zulässig ist, um Unterschiede deutlicher zu machen. Dazu skalieren Sie die Daten entweder so, dass sie in das von Ihnen verwendete Datenformat passen, oder Sie verwenden die Textformatierung mit benutzerdefinierter Skalierung.
    • Codieren Sie Ihre Daten bei Bedarf. Wenn Sie ein codiertes Format ausgewählt haben, stellen wir JavaScript-Code zur Unterstützung anderer Codierungstypen zur Verfügung.
  3. Geben Sie die Diagrammgröße an. Die Diagrammgröße wird mit dem Parameter chs angegeben. Informationen zum Format und zu den Höchstwerten finden Sie in der Dokumentation.
  4. Fügen Sie weitere Parameter hinzu. In der Dokumentation zu jedem Diagramm sind die verfügbaren optionalen Parameter aufgeführt. Typische Optionen sind Labels, Titel und Farben. Der gesamte Label- oder Titeltext muss UTF-8-codiert sein. Bei vielen Parametern können Sie mehrere Werte eingeben. Mit dem Parameter chm können Sie beispielsweise eine Form auf einen einzelnen Datenpunkt in einem Diagramm setzen. Mit dem Parameter chm kannst du Formen auf mehrere Datenpunkte setzen. Dazu musst du den chm-Parameter jedoch nicht mehrmals in deiner URL angeben (z. B. FALSCH: chm=square&chm=circle&chm=triangle). Stattdessen verwenden Parameter, die mehrere Werte annehmen, ein Trennzeichen, z. B. ein Komma oder einen vertikalen Strich, zwischen mehreren Werten im selben Parameter. Bei chm ist dies ein Balken, d. h. RIGHT: chm=square|circle|triangle. In den Details zu den einzelnen Parametern erfahren Sie, wie Sie mehrere Parameter angeben.
  5. Erstellen Sie den URL-String. Die URL beginnt mit https://chart.googleapis.com/chart?, gefolgt von allen erforderlichen (cht, chd, chs) und optionalen Parametern. Hinweis: Wenn du deine URL in einem <img>-Tag verwendest, musst du alle &-Zeichen im Link zu &amp; ändern. Beispiel:<img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />.
  6. Verwenden Sie GET oder POST, um Ihr Bild abzurufen. Bei GET-Anfragen geben Sie die URL entweder direkt in den Browser ein oder verwenden sie in einem <img>-Tag. URLs sind jedoch auf eine Länge von 2 KB beschränkt. Wenn du also mehr Daten hast oder einen Eindruck von Blut hast, solltest du stattdessen POST verwenden, wie hier beschrieben.
  7. Erstellen Sie anklickbare Bereiche. Optional können Sie eine Imagemap für das Diagramm erstellen, mit der Sie bestimmten Diagrammelementen Hyperlinks oder Klickelemente hinzufügen können. Weitere Informationen finden Sie unter Diagramm-Imagemap erstellen.

Nach oben

Glossar der Diagrammbegriffe

Hier sind einige wichtige Begriffe, die in dieser Dokumentation verwendet werden:

Reihe
Ein zusammengehöriges Dataset in einem Diagramm. Was eine Reihe ist, hängt vom Diagrammtyp ab: In einem Liniendiagramm ist eine Reihe eine einzelne Linie, in einem Kreisdiagramm ist jeder Eintrag ein Segment und alle Segmente zusammen sind eine Reihe. In einem Balkendiagramm umfasst eine Reihe alle Balken aus demselben Datensatz. Verschiedene Reihen werden je nach Balkendiagrammtyp entweder nebeneinander gruppiert oder übereinander gestapelt. Das folgende Diagramm zeigt ein gruppiertes Balkendiagramm mit zwei Reihen, eine in Dunkelblau und eine in hellblau:
Balkendiagramm mit zwei Serien: Katzen und Hunde
Achsenlabels
Numerische Werte oder Textwerte entlang jeder Achse. Im vorherigen Diagramm wären dies die Bezeichnungen „Jan“, „Februar“, „März“, „0“, „50“ und „100“.
Diagrammbereich
Der Bereich, auf dem die Bilder der Serie gezeigt werden. Weitere Informationen finden Sie in der Seitenleiste „Diagrammkomponenten“.
Legende
Ein kleiner Bereich im Diagramm, der die Datenreihe beschreibt. Im obigen Diagramm ist dies der Abschnitt, in dem „Katzen“ und „Hunde“ aufgeführt sind.
Parameter
Ein Schlüssel=Wert-Paar, das in der URL verwendet wird. Beispiel: chxt=x, wobei chxt der Parametername und x der Parameterwert ist.
GET und POST
Sie haben zwei Möglichkeiten, Ihre Diagramm-URL zu senden. Der GET-Vorgang erfolgt normalerweise, indem entweder eine URL in den Browser eingegeben oder als Quelle eines <img>-Tags festgelegt wird. POST-Anfragen sind komplexer, können aber wesentlich mehr Daten enthalten. Der Hauptgrund für die Verwendung von POST anstelle von GET ist, dass eine POST-Anfrage weitaus mehr Daten benötigen kann als eine GET-Anfrage (16.000 Zeichen gegenüber 2.000 Zeichen). POST wird hier behandelt.
Senkrechter Strich
Das Zeichen |, das häufig als Trennzeichen für Parameterwerte verwendet wird, also ein Zeichen zum Aufteilen mehrerer Werte. In der Diagramm-URL werden auch Kommas und kaufmännische Und-Zeichen (&) als Trennzeichen verwendet.
Zusammengesetzte Diagramme
Ein Diagramm, das sich aus zwei verschiedenen Diagrammtypen zusammensetzt, z. B. ein Balkendiagramm mit einer Linie oder ein Liniendiagramm mit Kerzenmarkierungen. Siehe Zusammengesetzte Diagramme.

Nach oben

Optimierungen

Nachdem Sie nun die Grundlagen zum Erstellen eines Diagramms kennen, finden Sie hier einige Optimierungen, die Sie verwenden können.

POST verwenden

URLs sind auf 2 KB beschränkt. Wenn Ihr Diagramm also mehr Daten enthält, müssen Sie POST anstelle von GET verwenden, wie hier beschrieben. Bei GET-Anfragen geben Sie die Diagramm-URL in die URL-Leiste des Browsers ein oder verwenden sie als Quelle eines <img>-Elements auf einer Webseite. POST erfordert zusätzliche Programmierung in einer anderen Sprache wie PHP oder PERL.

Diagramme in JavaScript erstellen

Mit der Google Visualization API können Sie Bilddiagramme für Sie erstellen. Die Google Visualization API ist eine JavaScript-basierte API, die Ihnen Tools zum Erstellen, Filtern und Bearbeiten von Daten oder zum Abfragen von Daten in Google Tabellen oder anderen Websites bietet. Sie können die Visualization API verwenden, um Ihre Daten zu erstellen, und dann die Image Charts API aufrufen, um das Diagramm auf der Seite zu rendern. Weitere Informationen finden Sie in der Dokumentation zu generischen Bilddiagrammen oder in der Visualisierungsgalerie für Google-Diagramme, die mit „(Bild) gekennzeichnet sind.