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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…