Daten präsentieren

Dynamische Darstellung

8.3.2010 von Redaktion pcmagazin und Andreas Hitzig

ca. 2:10 Min
Ratgeber
  1. Google Visualization API - Tabellen einfach grafisch darstellen
  2. Darstellungsfragen
  3. Aktionen
  4. Sortierung
  5. Farbe
  6. 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

Daten präsentieren

Google Visualization API

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

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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