Anzeige
Anzeige
UX & Design
Artikel merken

Google Chart Tools: Einfaches Werkzeug für Webdesigner erstellt Diagramme aller Art

Einer der zahlreichen Dienste von Google sind die Google Chart Tools, mit denen sich schnell und einfach Diagramme aller Art erstellen lassen – Torten- und Balkendiagramme sowie spezielle Arten wie Länderdiagramme. Der Artikel zeigt euch, was die Google Chart Tools können und wie ihr sie verwendet.

Von Denis Potschien
3 Min. Lesezeit
Anzeige
Anzeige

Die Google Chart Tools stellen eine API zur Verfügung, die auf der Grundlage von HTML5/SVG und JavaScript Diagramme erzeugt und darstellt.

Google Chart Tools einbinden

Zunächst müssen Googles JavaScript-API sowie die Visualisierungs-API in den HTML-Kopf eingebunden werden. Je nach Diagrammart müssen noch zusätzliche Pakete eingebunden werden. Standardarten wie Torten- und Balkendiagramme werden über das Paket „corechart“ dargestellt:

<!-- Hier wird die JavaScript-API geladen. -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Hier werden die Visualisierungs-API sowie die Pakete geladen.
  google.load("visualization", "1.0", {"packages":["corechart"]});
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    // Hier werden die Diagrammwerte und -optionen angegeben.
  }

</script>
Anzeige
Anzeige

 

Spezielle Diagrammarten wie z. B. Länderdiagramme (Geo Charts genannt) lassen sich über andere Pakete einbinden (dazu später mehr). Im nächsten Schritt werden die Diagrammdaten und -optionen in den Variablen „daten“ und „optionen“ angegeben:

Anzeige
Anzeige
var daten = new google.visualization.DataTable();
daten.addColumn("string", "Land");
daten.addColumn("number", "Einwohner in Mio.");
daten.addRows([
  ["Baden-Württemberg", 10.745],
  ["Bayern", 12.510],
  ["Berlin", 3.443],
  ["Brandenburg", 2.512],
  ["Bremen", 0.662],
  ["Hamburg", 1.774],
  ["Hessen", 6.062],
  ["Mecklenburg-Vorpommern", 1.651],
  ["Niedersachsen", 7.929],
  ["Nordrhein-Westfalen", 17.873],
  ["Rheinland-Pfalz", 4.013],
  ["Saarland", 1.023],
  ["Sachsen", 4.169],
  ["Sachsen-Anhalt", 2.356],
  ["Schleswig-Holstein", 2.832],
  ["Thüringen", 2.250]
 ]);

var optionen = {"title":"Einwohnerverteilung in Deutschland",
  "width":595, "height":400};

// Hier werden die Diagrammdaten und -optionen der entsprechenden Klasse übergeben.
// Außerdem wird das Diagramm einem HTML-Element übergeben.
var diagramm = new google.visualization.PieChart(document.getElementById("laender"));
diagramm.draw(daten, optionen);

 

Anzeige
Anzeige

Das Diagramm wird im Bodybereich des HTML-Dokumentes dargestellt. Über die Variable „diagramm“ wird die ID eines HTML-Elementes angegeben, welches als Container für die Darstellung des Diagramms dient:

<div id="laender"></div>

 

Anzeige
Anzeige

Das fertige Diagramm sieht dann so aus:

Google Chart Tools: Tortendiagramm

Google Chart Tools: Tortendiagramm

Über einen Tooltip lassen sich die einzelnen Bezeichnungen und Werte der Tortenstücke anzeigen. Die Farbgebung des Diagramms übernimmt Google, kann aber auch individuell angegeben werden.

Möchte man die Diagrammart nachträglich ändern, lässt sich das bei den Standardarten sehr leicht machen. Es muss lediglich eine andere Klasse für die Ausgabe des Diagramms angegeben werden:

Anzeige
Anzeige
var diagramm = new google.visualization.BarChart(document.getElementById("laender"));

 

Die kleine Änderung – statt der Klasse PieChart() wird BarChart() aufgerufen – sorgt dafür, dass das Diagramm nun als Balkendiagramm dargestellt wird:

Google Chart Tools: Balkendiagramm

Google Chart Tools: Balkendiagramm

Weitere Diagrammarten der Google Chart Tools

Neben den klassischen Diagrammarten wie Torten-, Balken- und Liniendiagrammen, die über das Paket „corechart“ dargestellt werden, lassen sich auch spezielle Diagramme sehr einfach erstellen, zum Beispiel Länderdiagramme (sogenannte Geo Charts):

Anzeige
Anzeige
Google Chart Tools: Länderdiagramm

Google Chart Tools: Länderdiagramm

Länderdiagramme lassen sich als Weltkarte oder als Ausschnitt (Kontinent oder Land) darstellen. Bei einigen Ländern lassen sich auch Provinzen bzw. in Deutschland Bundesländer darstellen. Allerdings kennt Google offenbar das Land Brandenburg nicht. Es wird nicht in der Karte dargestellt, bleibt also grau.

Leider lassen sich aus Standarddiagrammen nicht ohne Weiteres Länderdiagramme erstellen, da die Diagrammwerte anders übergeben werden müssen. Das macht es ein wenig umständlich, aus einem Torten- oder Balkendiagramm ein Länderdiagramm zu machen. Aber Google bietet für die Chart Tools gute Dokumentationen an.

Auch eher spielerische Diagrammarten gibt es. So lassen sich Diagramme in Form von Anzeigegeräten (Gauge Charts genannt) darstellen:

Anzeige
Anzeige
Google Chart Tools: Diagramme als Anzeigegeräte

Google Chart Tools: Diagramme als Anzeigegeräte

Google Chart Tools und statische Diagramme

Voraussetzung für Google Chart Tools ist ein moderner Browser. Wer auch eine Alternative für ältere Browser anbieten möchte, kann dazu Googles Image Charts API nutzen, die Diagramme als PNG-Grafik erstellt. Die Übergabe von Daten und Optionen erfolgt über einen URL-Request:

https://chart.googleapis.com/chart?cht=p&chs=500x200&chd=t:10.745,12.510,3.443,2.512,0.662,1.774,6.062,1.651,7.929,17.873,4.013,1.023,4.169,2.356,2.832,2.250&chl=Baden-W%C3%BCrttemberg|Bayern|Berlin|Brandenburg|Bremen|Hamburg|Hessen|Mecklenburg-Vorpommern|Niedersachsen|Nordrhein-Westfalen|Rheinland-Pfalz|Saarland|Sachsen|Sachsen-Anhalt|Schleswig-Holstein|Th%C3%BCringen

 

Das Beispiel zeigt die URL zu einem Kreisdiagramm, das dieselben Werte darstellt wie das Kreisdiagramm oben.

Anzeige
Anzeige

Was haltet ihr von Googles Chart Tools? Nutzt ihr sie, weil sie einfach und schnell zu schönen Ergebnissen führen? Oder bevorzugt ihr selbst gestaltete Diagramme?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
6 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

nik

Tja, aber leider alles Javascript.

Antworten
neknova

Letzteres (Image Charts API) finde ich besonders nützlich, da man dies auch in anderen Sprachen einsetzen kann und lediglich das Bild rendern braucht.

Antworten
Lars Heyne

Grundsätzlich finde ich Google Chart Tooles klasse, weil man relativ einfach zu ansprechenden Diagrammen kommt. Nachteile: Alles sieht gleich aus. Außerdem werden viele Daten falsch dargestellt : (

Noch einfacher geht es übrigens mit dem Google Chart Wizard:

LINK http://code.google.com/intl/de-DE/apis/chart/image/docs/chart_wizard.html

Leider werden auch hier nicht alle Daten richtig dargestellt. Bleibt zu hoffen, dass bald mit dem Beta-Status Schluß ist.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige