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 Jav...
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>
