Für Profis: Interaktive Grafiken mit der Google Chart API

Von Peter Schink, 21. Januar 2014

Unser Gastautor Peter Schink studierte in München Journalistik und besuchte dort die Deutsche Journalistenschule. Seit 2009 ist er Inhaber der Agentur “Doppelstern“, berät Verlage bei Digitalprojekten und in Dozent bei allen Themen des Medienwandels. Er bloggt auf “Blog Age” über Entwicklungen im Internet, twittert unter “@peterschink” und entwickelt selbst kleinere Internet-Plattformen.

Die Google Chart API ist wohl eines der besten Visualisierungstools. Egal ob Länderkarten, Balkendiagramme oder Zeitverläufe – mit wenigen Handgriffen entstehen wundersam interaktive Grafiken. Die funktionieren auch für mobile Webites.

Die Google Chart API ist denkbar simpel. Gelanden wird Sie über eine einzige Zeile Code:

{code}
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
{code}

Anschließend lassen sich Grafiken erzeugen, deren Aussehen und Daten man mittels Javascript-Parametern bestimmt. Das kann sehr komplex aussehen, muss es aber nicht. Ein einfaches Balkendiagramm sieht dann zum Beispiel so aus:

Wer jetzt entgegnet, dass könne ja die hauseigene Infoabteil besser und schöner, hat Recht. Solche Grafiken spielen ihre eigene Stärke nur dann aus, wenn sie dynamisch aus Daten erzeugt werden – etwas bei der Visualisierung von Wahlergebnissen, von aktuellen Statistiken (Social Media!) oder von wiederkehrenden Ergebnissen (Hochwasser, Arbeitslosenquote, etc.). Immer dann eben, wenn Daten vorliegen, die sich verändern und immer aktuell dargestellt werden sollen.

Google hat eine endlose Galerie mit Beispielen aufgebaut, die hier zu finden ist. Und für die Profis, hier beispielhaft der Google-Chart-Javascript-Code für die oben gezeigte Grafik:

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Typ', 'Ein Balken','Noch ein Balken'],
['Anzahl', 120, 145]]);
var options = {
 title: 'zwei farbige Balken',
 chartArea:{left:50,right:0,top:50,width:"55%",height:"80%"}
 };
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>

Und fertig. Nun muss man im HTML nur noch ein DIV für die Ausgabe der Grafik anlegen:

<div id="chart" style="width: 630px; height: 420px;"></div>

Fertig.