Daten präsentieren

Aktionen

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 -

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.