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

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…