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