Darstellungsfragen
Sie benötigen eine Instanz Ihres Visualisierungs-Objekts. Der Konstruktor besitzt als Argument die Referenz zum DOM-Objekt. Abschließend stellen Sie mit der Methode draw() innerhalb Ihres Container-Elements dar. Die Visualisierung von Daten folgt immer den gleichen Grundschritten. In den folgend...
Sie benötigen eine Instanz Ihres Visualisierungs-Objekts. Der Konstruktor besitzt als Argument die Referenz zum DOM-Objekt. Abschließend stellen Sie mit der Methode draw() innerhalb Ihres Container-Elements dar.
Die Visualisierung von Daten folgt immer den gleichen Grundschritten. In den folgenden Beispielen zeigen wir, welche verschiedenen Darstellungsoptionen und Kombinationsmöglichkeiten die API bietet.
Tabellendarstellung
In vielen Konstellationen macht es auch Sinn, die Daten, welche der Tabelle zugrunde liegen, als ergänzende Information mit darzustellen. Dafür können Sie sich entweder ganz normaler HTML-Tabellen bedienen oder aber auf das entsprechende Element aus der Google-Element-Bibliothek zurückgreifen. Dieses bietet noch einige weitere Funktionen an, wie etwa eine automatische Sortierung oder ein Event, das die aktuell markierte Zeile liefert.
Die zusätzlichen Schritte, nachdem Sie bereits eine Tabelle vom Typ DataTable angelegt haben, sind sehr überschaubar. Als Letztes fügen wir das noch fehlende Paket hinzu, damit die Google API auch die entsprechenden Befehle interpretieren kann.
google.load('visualization', '1',
{packages: ['piechart', 'table']});Weitere Pakete können Sie einfach durch Komma getrennt, als Argumente von Packages mitgeben.
Innerhalb Ihres Skripts, in welchem die Daten definiert werden, geben Sie noch folgende Zeilen zur Definition eines Tabellenobjekts und der Verknüpfung mit den vorhandenen Daten an:
var table = new google.visualization.
Table(document.getElementById('meine_tabelle'));
table.draw(data, {showRowNumber:
true});Zum Abschluss fügen Sie noch ein zusätzliches div-Tag in Ihren HTML-Code an der Stelle ein, welche Sie für die Darstellung Ihrer Tabelle vorgesehen haben.
<div id="meine_tabelle"></div>Mit diesen Ergänzungen haben Sie eine kombinierte Darstellung von Grafik und Tabelle erreicht und müssen sich nicht noch zusätzlich um die Ausgabe kümmern.
Darstellung eines Zustands
Oftmals benötigen Sie für die Darstellung eines Sachverhalts nicht unbedingt ein ausführliches Diagramm, sondern lediglich einen deutlichen Hinweis auf den Zustand. In vielen Fällen - vor allem in Statusberichten - wird eine Ampel mit den drei Farben Rot, Gelb und Grün verwendet. Google geht einen etwas anderen Weg und bietet an dieser Stelle einen Tacho an.
Für dieses Beispiel verlassen wir kurz die Formel 1 und wenden uns einem Management- Cockpit zu. An dieser Stelle können Sie beispielsweise die Werte für das Budget, den Fortschritt und die verbrauchten Ressourcen eines Projekts darstellen. Ist das Budget zu 100 Prozent aufgebraucht, sollte der Fortschritt im optimalen Fall auch bei 100 Prozent stehen. Für die Darstellung benötigen Sie das Paket Gauge.
google.load('visualization', '1',
{packages: ['gauge']});Der Datensatz für den Tacho besteht aus zwei Werten: dem Wert des Tachos, der über die Nadel angezeigt wird und was der Wert widerspiegeln soll. Diese Beschriftung wird direkt in den Tacho geschrieben.
data.addColumn('string',
'Beschreibung');
data.addColumn('number', 'Wert');
data.addRows(3);
data.setValue(0, 0, 'Fortschritt');
data.setValue(0, 1, 80);Für die Tachoanzeige stehen Ihnen eine Reihe von Optionen zur Verfügung. Im Beispiel wird lediglich neben der Breite und Höhe der Abstand der Zwischenschritte mitgegeben.
var options = {width: 400, height:
120, minorTicks: 5};Abhängig vom Wert, den Sie darstellen möchten, kann es auch sinnvoll sein, zusätzlich den Stand des Tachos farblich zu untermalen und somit auf kritische Werte hinzuweisen. Dazu stehen Ihnen die drei Werte Rot, Gelb und Grün zur Verfügung.
Sie können für den Tacho mit den Parametern redFrom und redTo - beispielsweise für die rote Farbe - jeweils eine obere und untere Grenze definieren. Die gleichen Parameter existieren auch für die Farben Grün und Gelb.
Im Standard liegt der Wertebereich des Tachos zwischen 0 und 100. Sie können diesen über die Parameter min und max nach Ihren eigenen Wünschen gestalten.
