Daten präsentieren

Aktionen

8.3.2010 von Redaktion pcmagazin und Andreas Hitzig

ca. 1:50 Min
Ratgeber
  1. Google Visualization API - Tabellen einfach grafisch darstellen
  2. Darstellungsfragen
  3. Aktionen
  4. Sortierung
  5. Farbe
  6. Dynamische Darstellung

Reaktion auf Ereignisse

Die Visualisierungsobjekte sind darauf ausgelegt, dass Sie Folgeaktionen festlegen können - dies funktioniert auch mit dem Tabellenelement. Am Beispiel zeigen wir Ihnen, wie Sie einen Listener implementieren und die Folgeverarbeitung ansteuern.Nachdem Sie innerhalb des Javascript Codes eine Tabelle definiert haben, folgt im nächsten Schritt die Definition des zugehörigen Event-Listeners. Abhängig vom eingesetzten Element stehen Ihnen verschiedene Aktionen zur Verfügung, auf die reagiert werden kann. Für die Tabelle haben wir eine einfache Auswahl berücksichtigt.

google.visualization.events.
addListener(table, 'select', selectHandler);
function selectHandler(e) {
alert('Sie haben einen Wert
ausgewählt...');
}

In den meisten Fällen benötigen Sie jedoch noch weitere Informationen zu den ausgewählten Daten und nicht nur Kenntnis darüber, dass etwas passiert ist. Dazu ist innerhalb der Funktion eine kleine Folgeverarbeitung notwendig. Zugriff auf den ausgewählten Datensatz innerhalb der Tabelle bekommen Sie über die Methode getSelection().

var auswahl = table.getSelection();

Zur Ermittlung der Auswahl müssen Sie alle Elemente der Tabelle durchlaufen und prüfen, welche davon selektiert wurden.

for (var zaehler = 0; zaehler <
auswahl.length; zaehler++) {
var element = auswahl[zaehler];
if (element.row != null && element.
column != null) {<Folgeverarbeitung>
} else if (element.row != null) {<Folgeverarbeitung>
} else if (element.column != null) {<Folgeverarbeitung>
}
}

Dabei prüfen Sie sowohl die jeweilige Zeile als auch die Spalte ab und können abhängig davon eine Folgeverarbeitung anstarten - im Beispiel lediglich eine Ausgabe der Koordinaten innerhalb der Tabelle sowie der Wert der Zelle.

Interaktion zwischen zwei Elementen

Das Wissen aus dem vorigen Beispiel können Sie im nächsten Beispiel einsetzen, um zwei Elemente abhängig von der Auswahl des anderen anzupassen. Das Beispiel zeigt eine Tabelle und ein Balkendiagramm, in welchem die Punkte innerhalb der aktuellen Formel-1-Saison nach dem Italien-Rennen darstellen.

Sie können die Tabelle sowohl nach dem Namen des Fahrers, als auch nach der Punktezahl sortieren. Entsprechend Ihrer Auswahl wird auch die Reihenfolge der Balken auf dem Diagramm entsprechend angepasst. Für die Darstellung der Tabelle und des Diagramms benötigen Sie die Packages Barchart und Table.

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

Die Tabelle besteht lediglich aus zwei Spalten: dem Namen des Fahrers und der aktuellen Punktezahl. Der Definition und der Aufbau der Tabelle findet dieses mal nicht in der Funktion drawVisualization() statt, sondern direkt innerhalb des Javascript-Teils, der beim Aufruf der Seite durchlaufen wird.

<script type="text/Javascript">
var visualization;
var sortData = new google.
visualization.DataTable();
sortData.addColumn('string',
'Fahrer');
sortData.addColumn('number',
'Punkte');
sortData.addRows(3);
sortData.setCell(0, 0, 'Button');
sortData.setCell(0, 1, 80);
...</script>

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.