Farbe
Unser obiges Beispiel haben wir um die Anzahl der Formel 1 Rennen der aktuellen und abgelaufenen Saison je Land erweitert. Die Skala hat ein Spektrum von 1 bis 4. Pro Land kommt somit ein weiterer Datensatz hinzu, der die Anzahl der Rennen als Zahl vom Datentyp number abbildet. Dazu ist vorab noch...
Unser obiges Beispiel haben wir um die Anzahl der Formel 1 Rennen der aktuellen und abgelaufenen Saison je Land erweitert. Die Skala hat ein Spektrum von 1 bis 4. Pro Land kommt somit ein weiterer Datensatz hinzu, der die Anzahl der Rennen als Zahl vom Datentyp number abbildet.
Dazu ist vorab noch eine weitere Spalte in Ihrer Datentabelle notwendig.
data.addColumn('number', 'Anzahl der
Rennen');Sollte Ihnen und den anderen Betrachtern der Grafik - wie in diesem Beispiel - die Legende nicht viel weiterhelfen, können Sie diese auch mit einem weiteren Parameter abschalten.
options['showLegend'] = false;Form und Farbe kombiniert
Wenn Sie auf einen bestimmten Sachverhalt hinweisen möchten, hilft oftmals nur die zielgerichtete Verwendung von Farben. Bei vielen Diagrammformen können Sie diese mit ein wenig Programmierung auch individuell den Zahlenwerten zuweisen und so beispielsweise kritische Werte farblich kennzeichnen und auf solche hinweisen, die sich aktuell in einer Phase befinden, die genauer beleuchtet werden sollte.
In unserem Beispiel haben wir die Ergebnisse der einzelnen Formel-1-Teams der letzten Saison herangezogen und die Teamwertungen kritisch untersucht. Bei weniger als 25 erreichten Punkten in der Fahrerwertung wird der Balken rot dargestellt, anschließend bis 99 Punkte gelb und alles darüber mit grün.
Für die Darstellung wird das Paket imagechart herangezogen.
google.load('visualization', '1',
{packages: ['imagechart']});Die Datentabelle besteht im Beispiel aus zwei Spalten: Rennstall und Konstrukteurspunkte 2008. Für die farbliche Darstellung der Balken werden drei Farben - Rot, Gelb und Grün - definiert.
var rot = 'ff0000';
var gruen = '00ff00';
var gelb = 'ffff00';Anschließend wird ein Array farben gebildet, in dem die ermittelten Farbwerte gespeichert werden sollen. Die for-Schleife arbeitet alle Einträge aus der Datentabelle ab, untersucht jeweils die zweite Spalte des Datensatzes und vergleicht diesen mit den zuvor definierten Schwellwerten. Zum Abschluss wird der Farbwert an das Array zur Speicherung und späteren Verwendung übergeben.
var farben = [];
for (var zaehler = 0; zaehler < data.
getNumberOfRows(); zaehler++) {
var value = data.getValue(zaehler,
1);
var farbe = value < 25 ? rot :
(value < 100 ? gelb : gruen);
farben.push(farbe);
}Das Paket imagechart erwartet die übergebenen Farbwerte durch ein | voneinander getrennt.
farben = farben.
join('|');Zum Abschluss geben Sie dem Diagramm noch eine Reihe von Optionen für das individuelle Aussehen mit.
var options = {cht:
'bvs', chco: farben, max: 100};In diesem Fall werden drei Parameter mitgegeben:
• cht bestimmt das Aussehen des Diagramms - bvs ist ein vertikales Säulendiagramm. Eine ausführliche Dokumentation zu den einzelnen Diagrammarten und -typen finden Sie online hier.• chco beschreibt die unterschiedlichen Farben des Diagramms. Im Beispiel werden den Säulen die ermittelten und gespeicherten Werte aus dem Array farben[] zugewiesen. Eine ausführliche Dokumentation zu diesem Parameter finden Sie online hier.• max beschreibt den Maximalwert der Skala. Wird jedoch ein größerer Wert in den Daten verwendet, so wird dieser automatisch zum führenden Wert, wie in unserem Beispiel geschehen.
