Neue Beiträge per

RSS-Feed

Folgen Sie uns auf

Twitter

Folgen Sie uns auf

Journalisten-Tools.de finden Sie auch auf

Facebook

Journalisten-Tools.de auf

Mehr als 2.300 User haben den Newsletter schon abonniert!

Jetzt abonnieren

Newsletter

abonnieren

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


Peter Schink

Peter Schink

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:

Einfaches Balkendiagramm mit der Google Chart API

Einfaches Balkendiagramm mit der Google Chart API

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.

EmpfehlenShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this pageEmail this to someonePrint this page

Schreibe einen Kommentar

Einfaches HTML ist erlaubt. Ihre E-Mail-Adresse wird nicht angezeigt.

Abonnieren Sie weitere Kommentare zu diesem Beitrag per RSS