DoughnutPie

Als Erstes müsst Ihr Euch entscheiden, ob Ihr eine Torte oder einen Doughnut haben wollt. Dies regelt Ihr unter dem Punkt „Typ“. Diese Auswahl hat zum Teil Auswirkungen auf die folgenden Einstellungen.

Titel

Anders als bei der Gauge kann bei dem Pie/Doughnut die Position des Titels verändert werden.

Alles Andere ist hier selbsterklärend.

Legende

Unter Legende kann das Aussehen der Auflistung der Datenpunkte modifiziert werden. Die möglichen Einstellungen hier sind selbsterklärend.

Kurz nur zum Thema Schriftauswahl: Wir haben einige der von Google-Fonts ( Browse Fonts - Google Fonts) zur Verfügung gestellten Schriften als Vorauswahl in die Module integriert. Damit sollten alle Bedürfnisse abgedeckt sein. Von kondensed bis auffällig. Bitte schaut Euch immer an, welche Auswirkung die Schriftauswahl hat. Am Besten macht es sich, über „öffne Link“ das Ergebnis Eurer Einstellungen direkt im Browser zu betrachten. Ihr braucht den Link nur einmalig aufrufen und er passt sich immer, wenn Ihr auf „Einstellungen übernehmen“ klickt an. Der Punkt „Box Breite“ bestimmt in der Legende die Breite der Farbbox:

Boxbreite 10: Boxbreite 120:

Position: Position der LEgende (LInks, rechts, oben, unten

Ausrichtung: Legt die vertikale Position im Doughnut/Pie fest:

Links/Anfang:

Links/Mitte:

Links/Ende:

Tooltips

Wenn Ihr den Doughnut oder den Pie ohne Werte darstellen wollt, und nur die Daten sehen wollt, wenn Ihr auf das entsprechende Feld geht, dann kommen die Tooltips zum Einsatz:

Dabei gibt es zwei Positionen der Tooltips: „Nearest“, also zentral im Bereich, so wie im Bild oben. Und „Average“ dementsprechend weit entfernt vom Bereich:

Bei den Tooltips könnt Ihr den Einzelwert (Point/Index) oder die Werte der gesamten Datenreihe (dataset) anzeigen lassen:

Als nettes Gimick könnt Ihr dann noch die Ecken des Tooltips mittels „Eckradius“ anpassen. Auf die Möglichkeiten der Schriftvariationen werde ich hier im Einzelnen nicht mehr eingehen, da ich diese als selbsterklärend erachte.

Drehung (Rotation)

Die Drehung ein sehr brauchbares Gimmick. Wie Ihr seht, arbeite ich bei den Demo-Bildern immer nur mit einem Viertel Doughnut (Den Rest hab ich einfach mal weg gefuttert 😝) Okay, eigentlich nur, weil man mit nem Viertel weniger Platz braucht und gewisse Einstellungen besser Visualisieren kann.

Aber zu den Werten:

„Anfang“ gibt den Start-Winkel des Doughnuts an. 0° entspricht hier demzufolge Oben. 180° Also Unten. Die Länge gibt den Umfang vor. Damit wird also der Doughnut beschnitten. 360° gibt einen ganzen Doughnut, 270° einen Dreiviertel, 180° einen Halben und 90° logischerweise dann einen Viertel.

Wenn mir also ein Viertel reicht, kann ich dann noch mit dem Anfang bestimmen, ob er Oben anfängt (Siehe Bilder oben) oder, ob er versetzt anfängt. Gebe ich also bei Anfang statt 0° 45° ein, sieht das Ganze so aus:

Also eine Menge Möglichkeiten zum Spielen.

Animation

Wie schon bei der Gauge, sind auch Doughnut und Pie animiert. Was das genau bedeutet zeige ich Euch an einem kleinen Beispiel. Bitte auch hier austesten, was geht (ist gar nicht so schwer).

Spätestens jetzt dürfte Jeder wissen, ich LIEBE Bouncing. 😀 Acer90 hat unter dem Punkt Animation den Link der Quelle im Modul gesetzt Easing Functions Cheat Sheet (opens new window). Da erfahrt ihr im Detail, was bei welcher Animation passiert. Das erspart mir hier ne Menge Tipparbeit. Danke Acer90 😂

DataLabels

Die DataLabels beschreiben die Werte, die in den einzelnen Datenbereichen angezeigt werden. Verankerung und Ausrichtung geben hier die Position in dem Datenbereich der Grafik an. Verankerung regelt die Position am:

Äußeren Rand (Ende)

Mittig (mittig)

Inneren Rand (Anfang):

Mit der „Ausrichtung“ kann man dann die Position noch fein justieren. So bedeutet zum Beispiel: Verankerung: mittig | Ausrichtung: Rechts, das das Daten Label rechts des Mittelpunkts des Datenfeldes angezeigt wird. Auch hier die große Bitte: Testet es aus. Jede Position im kleinsten Detail hier zu nennen, sprengt mal eben den Rahmen.

Daten

Den meisten Platz in diesem kleinen Tutorial werde ich nämlich für die Datenpflege benötigen. Um das mit den Daten verständlich zu machen, fangen wir mal bei Excel an 😂: Wir haben ein Gitter mit Spalten und Zeilen. Jede Zeile entspricht einer Reihe von Daten. Dabei geht es nicht um archivierte Daten eines Zeitraums sondern vielmehr um Daten einer Aktorensorte:

Daraus basteln wir uns jetzt einen wunderschönen Doughnut und Kuchen. Wenn wir uns den Punkt „Daten“ ansehen, dann gibt es da noch den Punkt „Datasets“. Dadrunter finden wir den unscheinbaren, aber mächtigen „Hinzufügen“ Button. Einmal geklickt, öffnet sich ein neues Fenster:

Die Reihenfolge gibt später die Position dieses Datenrings im Doughnut/Pie an. Also ob er ganz außen oder ganz innen sitzen soll. Der Titel ist in dem Fall unserer Tabelle zu entnehmen und heißt im Beispiel:„Luftfeuchtigkeit“. Wenn das erledigt ist, geht es weiter. Wieder auf den Punkt "Zufügen"Klicken. Ein neues Fenster öffnet sich und hier werden dann die einzelnen Werte-Variablen hinterlegt:

Also kommen hier als Listenelemente die Variablen für Die Luftfeuchtigkeit entsprechend der einzelnen Räume rein. WICHTIG: JEDE Variable muss einen Namen und ein Profil erhalten:

Wenn Alles korrekt gelaufen ist, sollte jetzt der erste Ring des Doughnuts/Pie erscheinen:

Das Ganze machen wir dann noch mit der Temperatur.

Und zu guter Letzt noch mit der Helligkeit:

Und schon hat man die ersten Doughnuts gebacken. Als Pie sieht das dann ähnlich aus:

Natürlich kann man auch hier noch nette Gimmicks nutzen: Reihenfolge: Sowohl in den Datasets, also auch in den Listenelementen kann ich die Reihenfolge bestimmen. DataLabels kann ich ein und ausschalten und bei Bedarf kann ich die Eigenschaften der DataLabels pro Listenelement entgegen der globalen Vorgabe nochmal anpassen. Es ist übrigens jedem selbst Überlassen, ob er die Werte nach Aktoren oder nach Einsatzort listet. Dies dient hier nur als Beispiel zur Veranschaulichung.