Daten präsentieren

Google Visualization API - Tabellen einfach grafisch darstellen

Haben Sie viele statistische Werte zur Darstellung und möchten Ihre Besucher nicht mit Tabellen langweilen? Googles Visualization API bietet eine einfache Methode, Daten grafisch aufzubereiten.

  1. Google Visualization API - Tabellen einfach grafisch darstellen
  2. Darstellungsfragen
  3. Aktionen
  4. Sortierung
  5. Farbe
  6. Dynamische Darstellung
Google Visualization API

© Archiv

Google Visualization API

Wer viel mit Zahlen hantiert, stößt immer wieder auf die gleiche Situation - Daten sollen optisch ansprechend präsentiert werden. Mit Googles Visualization API und ein wenig HTML und Javascript können Sie Grafiken zum Zeitpunkt der Seitengenerierung erzeugen und so Ihren Besuchern immer einen aktuellen Blick auf die Daten gewähren.

Der Einstieg

Einen ersten Blick über die Leistungsfähigkeit der Schnittstelle bekommen Sie in der Visualization Galery, in der Sie eine Reihe exemplarischer Auswertungen sehen, die mithilfe von Javascript zustande gekommen sind. Der Schritt dahin ist auch gar nicht so weit.

Für die ersten Beispiele greifen wir auf eine einfache Tabelle zurück, die wir über Javascript von Hand aufbauen. Eine Webseite, auf der die Google-Schnittstelle zum Tragen kommt, besteht aus einer Reihe von Einzelelementen. Zu Beginn gehen wir auf die Schritte ein, die Sie beim Aufbau einer Seite nacheinander abarbeiten müssen.

Als Erstes wird im Kopfteil der HTML-Seite die Google AJAX API Seite geladen:

Im nächsten Schritt laden Sie die Visualization API und die dazugehörige Diagrammform.

google.load('visualization', '1',
{packages: ['piechart']});

Nachdem das Laden der APIs abgeschlossen ist, erfolgt der Aufruf der Funktion, in welcher die eigentliche Arbeit stattfindet - das Zuordnen der Werte und die Definition der Darstellung.

google.setOnLoadCallback(drawChart);

Auf die Inhalte der Javascript-Funktion drawChart() gehen wir im Folgenden ein. Die Integration der Grafik erfolgt über ein DOM-Element auf der HTML-Seite, welches die Visualisierung beinhaltet.

Anreicherung der Daten

Wie bereits erwähnt, erfolgt der Aufbau der Tabelle und die Konfiguration der Grafik innerhalb der Funktion drawChart().

function drawChart() {
var data = new google.visualization.
DataTable();
data.addColumn('string', 'Rennstall');
data.addColumn('number', 'Gewonnene
Rennen');
data.addRows(5);
data.setValue(0, 0, 'McLaren-
Mercedes');
data.setValue(0, 1, 6);
data.setValue(1, 0, 'Ferrari');
data.setValue(1, 1, 8);
data.setValue(2, 0, 'BMW Sauber');
data.setValue(2, 1, 1);
data.setValue(3, 0, 'Torro Rosso');
data.setValue(3, 1, 1);
data.setValue(4, 0, 'Renault');
data.setValue(4, 1, 2);
new google.visualization.PieChart
(document.getElementById('mein_chart')).
draw(data, {title: 'Formel 1 Saison
2008 - Gewonnene Rennen je Rennstall'});
}

Im ersten Schritt wird ein Container mit dem Namen data vom Typ erstellt, welcher die Daten für die Visualisierung aufnehmen muss. Dabei handelt es sich um eine Tabelle, welche Google DataTable tituliert hat.

Sie besteht aus zwei Dimensionen mit Zellen und Spalten. Mithilfe der Funktion addColumn() fügen Sie der Datentabelle data die benötigten Spalten hinzu und weisen diesen Datentyp und Spaltentitel zu. Nun beginnt die Fleißarbeit - Sie definieren die Anzahl der Datensätze und weisen die Werte über setValue zu. Der Prozess dabei ist zweistufig:

data.setValue(0, 0, 'McLaren-
Mercedes');
data.setValue(0, 1, 6);

Im ersten Schritt erhält der Datensatz mit der Nummer 0 in der Spalte 0 den Wert "McLaren-Mercedes" zugewiesen, anschließend der gleiche Datensatz in Spalte 1 den Wert 6. Damit ist die Bearbeitung des ersten Datensatzes abgeschlossen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".