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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…