Visualisierungen mit Google Charts

Gauge Chart

Google Charts ist ein Webservice, der grafische Diagramme aus bereitgestellten Informationen erstellt. Als Benutzer liefert man die darzustellenden Daten und die Formatierungswünsche über ein auf einer Webseite eingebettetes JavaScript an Google Charts. Als Antwort erhält man das gewünschte Diagramm, das dann auf der Website erscheint. Google Charts bedarf keiner Google Registrierung. Damit es funktioniert, muss eine von Google bereitgestellte JavaScript Datei in die Website eingebunden werden. Die darzustellenden Daten können innerhalb des JavaScripts geschrieben werden oder aus externen Quellen kommen.

Beispiel

Um ein einfaches Tortendiagramm zu erhalten, erstellt man sich zunächst eine HTML Seite und bindet im Kopf (<head></head>) der Seite die JavaScript Datei von Google ein (https://www.gstatic.com/charts/loader.js).

<!DOCTYPE html>
<html>
 <head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Im nächsten Schritt muss die Chart API geladen werden.

 google.charts.load('current', {'packages':['corechart']});

Nun wird eine JavaScript Funktion erstellt, die die Daten enthält, beschreibt und zeichnet. Dabei müssen die Daten (data) und die Formatierungswünsche (options) beschrieben werden. Als Daten übergebe ich ein Array mit den Herstellern und den Prozentwerten an die Methode google.visualization.arrayToDataTable(). Als Formatierungswunsch definiere ich eine Überschrift (title).  Um das Tortendiagramm zu zeichnen, erstelle ich ein Objekt der Klasse google.visualization.PieChart(). Damit das Tortendiagramm (PieChart) weiss, wo es angezeigt werden soll, übergebe ich die ID des Elementes an die Methode (piechart).

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Hersteller', 'Marktanteil'],
    ['Volkswagen', 13.3],
    ['BMW', 7.8],
    ['Mercedes', 7.5],
    ['Skoda', 6.6],
    ['Audi', 6.2],
    ['Renault', 4.5],
    ['Opel', 4.2],
    ['Ford', 4.1],
    ['Peugeot', 3.3],
    ['Toyota', 3.3]
  ]);

  var options = {
    title: 'Marktanteile Autohersteller in der Schweiz'
  };

  var chart = new    google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);
}
</script>
</head>

Damit ist der JavaScript Teil erledigt und ich muss noch im Body des Dokumentes einen Bereich definieren, der die ID piechart enthält. Dieser Bereich soll gut lesbar sein, daher gebe ich noch die Breite und Höhe mit an.

<body>
   <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Ausser Tortendiagrammen gibt es zahlreiche andere Möglichkeiten seine Daten darzustellen. Da die Darstellungswünsche von den Daten getrennt sind, muss einfach nur eine andere Methode aufgerufen werden um einen anderen Darstellungstyp zu erhalten. Für ein Balkendiagramm mit den gleichen Daten wäre das beispielsweise die Methode

var chart = new google.visualization.BarChart());
Balkendiagramm
Balkendiagramm

Es gibt zahlreiche Typen von Charts in der Bibliothek (https://developers.google.com/chart/interactive/docs/gallery).

Chart Typen 1
Chart Typen 1
Chart Typen 2
Chart Typen 2
Chart Typen 3
Chart Typen 3

WordPress und Google Charts

Mehrere WordPress Plugins binden Google Charts in WordPress ein, so beispielsweise WordPress Charts and Graphs Lite. Es bietet neun Chart Typen in der freien Version und vereinfacht die Benutzung erheblich. Die jeweilige Grafik wird im WordPress Backend ohne Programmierung konfiguriert und dann per Shortcode an der gewünschte Stelle innerhalb einer Seite oder eines Blogposts eingefügt

WordPress Plugin
WordPress Plugin

Links:


tl;dr: Google Charts bieten eine einfache Möglichkeit, Visualisierungen auf der Website darzustellen.

Autor: hagengraf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Ein Gedanke zu „Visualisierungen mit Google Charts“

Kommentar verfassen