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

Google Visualization API
Galerie
Daten präsentieren

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

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​".