Daten präsentieren

Dynamische Darstellung

Bis jetzt haben wir Ihnen verschiedene Möglichkeiten aufgezeigt, um Daten statisch darzustellen. Google bietet innerhalb seiner Visualization API mit Unterstützung von Adobe Flash auch die Option, den Verlauf von Zahlen über die Zeit dynamisch darzustellen. In unserem Beispiel haben wir uns die Punktentwicklung der drei Führenden in der aktuellen Formel-1-Saison hergenommen und sie in ein Verlaufsdiagramm gepackt.Besonders wichtig ist bei diesem Beispiel auch der Ort, von dem Sie das Coding ausführen. In den anderen Demos war es bis jetzt ohne Probleme möglich, die HTML-Seite auch von Ihrer lokalen Festplatte auszuführen. Wenn Sie dies beim Package Motionchart versuchen, werden Sie nur eine leere Seite sehen. Aufgrund der Sicherheitsbestimmungen können Sie das Flash-Applet ohne Veränderung der Einstellungen nur von einem Webserver aus betreiben.Zur Darstellung des Beispiels binden Sie, wie bereits erwähnt, das Package motionchart ein.

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

Für die Speicherung der Daten wird im Beispiel eine Tabelle mit drei Spalten - Fahrername, Datum des Rennens und Punkte nach dem Rennen - verwendet.

data.addColumn('string',
'Rennfahrer');
data.addColumn('date', 'Rennstall');
data.addColumn('number',
'Punktzahl');
data.addRows([ //Buttom
['Button', new Date (2009,2,29), 10],
['Button', new Date (2009,3,5), 15],
['Button', new Date (2009,3,19), 21],
...
]}

Etwas gewöhnungsbedürftig ist die Eingabe des Datumswerts. An dieser Stelle erzeugen Sie in einem Schritt eine neue Variable und weisen dieser den Wert im Format (JJJJ,MM,TT) zu, wobei beim Monat immer der Wert um 1 vermindert werden muss. Der Januar hat somit die Nummer 0.

Alternativ stehen Ihnen neben einem exakten Datum auch noch die Verwendung der Kalenderwoche JJJJWww oder des Quartals JJJJQq als weitere Optionen zur Verfügung.

Das Diagramm bietet in seiner Darstellung eine Variationsmöglichkeit. Mithilfe von Parametern können Sie verschiedene Teile ein- oder ausblenden:

• showSelectListComponent: Liste der sichtbaren Einträge• showSidePanel: rechte Seitenleiste• showXMetricPicker: Auswahlfeld der x-Achse• showYMetricPicker: Auswahlfeld der y-Achse• showXScalePicker: Auswahl lineare / logarithmische Darstellung x-Achse• showYScalePicker: Auswahl lineare / logarithmische Darstellung y-Achse• showAdvancedPanel: Optionen im Einstellungsfenster an/aus• state: Aussehen zum Startzeitpunkt

Im Standard stehen alle Werte auf true und das Diagramm über den Status state auf Ausgangsstellung - alle Variablen sind initial. Einen guten Überblick über die zur Verfügung stehenden Variablen bekommen Sie, wenn Sie über die Optionen des Diagramms - das Werkzeug in der rechten unteren Ecke - die erweiterten Einstellungen aufrufen. An dieser Stelle finden Sie eine Darstellung der Zustandszeichenfolge.

Fazit

Die Google Visualization API stellt eine interessante Schnittstelle dar, wenn Sie schnell und ohne größeren Aufwand ein Ergebnis visualisieren möchten und dieses nicht nur eine Momentaufnahme, sondern unter Umständen auch den aktuellen Stand darstellen soll.

Die in den Beispielen manuell aufgebauten Daten ziehen Sie im Alltag sicherlich aus Ihrer Datenbank und stellen die Informationen entsprechend dar. So haben die Besucher Ihrer Website immer den Blick auf die aktuellsten Zahlen und sehen nicht irgendwo den Hinweis darauf, dass die Daten bereits mehrere Jahre alt sind.

Bildergalerie

Galerie
Daten präsentieren

Sie können mit der Visualization API auch auf Ereignisse wie die Sortierung reagieren.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.