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.
- Google Visualization API - Tabellen einfach grafisch darstellen
- Darstellungsfragen
- Aktionen
- Sortierung
- Farbe
- Dynamische Darstellung
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...
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.
