Charts (WebWidget)
Dieses WebWidget dient der Erzeugung von verschiedenen Arten von Diagrammen, beginned mit dem Kreisdiagramm über Balkendiagramme bis hin zu komplexen Liniendiagrammen auf eine einfache Art und Weise. Kreis- bzw. Ringdiagramme stellen die prozentualen Verhältnisse der Daten zueinander optisch als Segmente eines Kreises oder eines Ringes dar. Die Datenanteile werden farbig verschieden oder mit hinterlegten graphischen Mustern markiert, sodass man die prozentualen Verhältnisse der Daten auf den ersten Blick erkennt. Hintergrundmuster sind insbesondere nützlich für Menschen mit Farbenblindheit oder beim Schwarz-Weiß-Druck. Ein Ringdiagramm könnte aus mehreren Ringen bestehen, wobei jeder Ring eine weitere Dimension der Daten darstellt. So könnte man die prozentualen Anteile einer Datenmenge je nach Jahr in einer Zeitspanne von zwei Jahren als zwei verschachtelte Ringe darstellen, wie die Abbildung zeigt. Wenngleich verschachtelte Kreise anstelle verschachtelter Ringe verwendet werden können, hat es sich in der Praxis etabliert, dass Kreisdiagramme nur eine einzige Datenmenge darstellen, während Ringdiagramme mehrere vergleichbare Datenmengen veranschaulichen. Mit den Eigenschaften circumference und startAngle kann man ganz leicht aus einem Kreis- bzw. Ringdiagramm ein Halbkreis- bzw. Halbringdiagramm erstellen. Dieses WebWidget ist so flexibel aufgebaut, dass man zwischen den verschieden Varianten ganz leicht durch die Änderungen des entsprechenden Parameters wechseln kann, ohne zusätzlichen Code schreiben zu müssen. Balken- bzw. Säulendiagramme werden verwendet, um die Veränderung einer diskreten Größe oder mehrerer diskreter Größen über eine Variable (Zeitspanne, Kategorien, etc.) quantitativ und vergleichbar zu veranschaulichen. Dabei sollte die Anzahl der Größen und ihre Häufigkeit klein gehalten werden, um die Anschaulichkeit nicht zu verlieren, andernfalls würde sich ein Liniendiagramm mehr dafür eignen, größere Datenmengen darzustellen. Wenn die quantitativen Angaben von keiner großen Relevanz sind und nur die prozentualen Verhältnisse dargestellt werden sollten, eigent sich am besten ein Kreisdiagramm. Es besteht die Möglichkeit, Säulendiagramme horizontal darzustellen, in diesem Fall spricht man laut einiger Literatur von Balkendiagrammen. Der Übersichtlichkeit halber werden in diesem Artikel Säulen- und Balkendiagramme ungeachtet ihrer Ausrichtung als Balkendiagramme bezeichnet. Radardiagramme, auch Netzdiagramme genannt, bieten die Möglichkeit, Daten auf mehreren sternförmig liegenden Achsen darzustellen. Die daraus entstandenen Graphen lassen sich anhand deren Form, Größe und Überlagerungen leicht vergleichen. Deswegen werden Radardiagramme oft bei strategischen Entscheidungen herangezogen. Das Radardiagramm-WebWidget ermöglicht die Erstellungen von Radardiagrammen auf eine ganz leichte Art und Weise, mit einer großen Darstellungsfreiheit, von den Hintergrund- und Randfarben bis zum Krümmungsgrad der Verbindungslinien. Herkömmliche Liniendiagramme, auch Kurvendiagramme genannt, stellen einen (funktionellen) Zusammenhang zwischen zwei Merkmalen graphisch dar. Liegen statistische Daten vor, so eignen sich die sogennanten Streudiagramme am besten zur Untersuchung und Darstellung von Zusammenhängen zwischen den statistischen Wertepaaren. Blasendiagramme unterscheiden sich von Streudiagrammen darin, dass sie drei Merkmale anstelle von nur zwei darzustellen vermögen. Da das dritte Merkmal anhand des Radius eines Punktes veranschaulicht wird, können Blasendiagramme jedoch nicht so viele Werte darstellen wie Streudiagramme. |
Verwendung
Abhängigkeiten
- charts.html
- charts-directive.js
- dependencies/
- Chart.bundle.min.js
Nachrichtenschnittstelle
Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.
Name | Parameter | Beschreibung |
---|---|---|
Push-Nachrichten (IV→HTML) | ||
data | Data | Diese Nachricht übergibt ein Data-Objekt als CX_JSON_OBJECT ans WebWidget und enthält die Datensets, die gezeichnet werden sollen. |
options | Options | Diese Nachricht übergibt ein Options-Objekt als CX_JSON_OBJECT ans WebWidget und enthält allgemeine Anzeigeoptionen und kann beliebig oft geschickt werden, sowohl vor als auch nach einer data-Nachricht. Aufeinanderfolgende options-Nachrichten sind zueinadner komplementär. |
axes | Axes | Diese Nachricht übergibt ein Axes-Objekt als CX_JSON_OBJECT ans WebWidget und enthält Einstellungen für eine Achse und kann beliebig oft geschickt werden, sowohl vor als auch nach einer data-Nachricht. Aufeinanderfolgende axes-Nachrichten für dieselbe Achse überschreiben einander und sind nicht komplementär. |
Ereignisse (HTML→IV) | ||
INITIALIZE_SOCKET | - | Die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Dies signalisiert die Bereitschaft des WebWidgets, Push-Nachrichten zu empfangen und zu verarbeiten. |
MOUSE_CLICK_SOCKET | DataPoint |
InstantView wird mitgeteilt, dass auf einen Punkt/Segment/Balken (sogenannter Datenpunkt) im Graphen geklickt wurde. Ein Datenpunkt wird als DataPoint-Objekt, identifiziert durch seine Koordinaten und den Index seiner Datenmenge übertragen. Achtung: Die Transposition der Datendarstellung beeinflusst die Indizes und Koordinaten im DataPoint-Objekt nicht. Dies ist sinnvoll, um die angeklickten Daten wieder richtig assoziieren zu können. |
Das Data-Objekt
Das Data-Objekt ist vom Typ CX_JSON_OBJECT und beinhaltet die darzustellenden Daten. Hervorgehobene Felder sind obligatorisch.
Feld | Typ | Beschreibung |
---|---|---|
datasets | ARRAY(Dataset) | Jedes Dataset-Objekt repräsentiert eine Datenmenge und ihre Darstellungsparameter. |
redraw | Boolean |
Wenn auf false gesetzt, komplementiert diese Nachricht alte data-Nachrichten und überschreibt sie nicht. Standardmäßig überschreiben data-Nachrichten die vorherigen. Wenn redraw auf false gesetzt ist, werden die Datasets anhand ihrer Reihenfolge assoziiert und die Punkte in den Datasets werden zusammengesetzt. Um in einer Aktualisierungsnachricht z. B. nur das zweite Dataset zu ändern, muss das erste Dataset als ein leeres Object aufgeführt werden { }, { Dataset 2 ...}, .... Dies ist lediglich für die Bewahrung der Reihenfolge notwendig. |
Das Dataset-Objekt
Feld | Typ | Beschreibung |
---|---|---|
points | ARRAY(ARRAY(Number|String)) |
Ein zweidimensionales Array, wobei jedes innere Array ein n-Wertetupel repräsentiert. Die Werte können entweder numerisch oder alphanumerisch sein, abhängig von der Achsendefinition. Zeit- und Datumsangaben werden als formatierte Strings übergeben. Wenn ein Tupel nur aus einer Dimension besteht, dann kann es als eine lose Zahl geschrieben werden. Lose Zahlen werden automatisch zu Tupeln ergänzt, wobei das erste Element im Tupel der Index beginnend mit 1 ist. Dieser Index bezieht sich dann auf die n-te Kategorie im Falle einer Kategorienachse. |
function | Funktion |
Wenn man keine Datenpunkte angeben möchte, sondern die Datenpunkte automatisch aus einer Funktion möchte generieren lassen, so kann man dies mittel eines Funktionsobjekts spezifizieren. In diesem Fall werden die Punkte unter points (falls vorhanden) mit den generierten Punkten zusammengesetzt. Die Punkte unter points überschreiben die generierten Punkte. |
color | String | Die Hauptfarbe, die das Dataset darstellt, in einem HTML-konformen Format als String (z.Bsp. "red", "#ff0000", "rgb(255, 0, 0)" oder "hsl(0, 100%, 50%)"). Sollte keine Farbe angegeben sein, wird sie von MorphIT automatisch mit einer Farbe aus vordefinierter Farbenmenge je nach dem angewendeten MorphIT-Style vervollständigt. |
label | String | Textelle Bezeichnung der dargestellten Datenmenge (des Graphen), die in der Legende und u. a. in den entsprechenden Tooltips erscheint. |
hidden | Boolean | Wenn gesetzt, wird diese Datenmenge im Diagramm ausgeblendet, mit der Möglichkeit, dass der Benutzer sie jederzeit einblenden kann. |
redraw | Boolean |
Wird gesetzt, um Abweichungen von einer negativen allgemeinen redraw-Einstellung zu erlauben. Dies ist bei vertikalen Linien im Liniendiagramm sinnvoll, um mehrere Punkte in einem Dataset auf einer x-Koordinate zu erlauben, wenn die anderen Datasets nur ergänzt werden. (die anderen Datasets haben also redraw |
delete | Boolean | Wenn redraw auf false gesetzt ist, hat man mit dieser Option die Möglichkeit, das Dataset komplett aus dem Diagramm zu löschen und nicht nur auszublenden. |
Die folgenden Eigenschaften gelten nur für Radar- und Liniendiagramme | ||
lineWidth | Number | Die Breite des gezeichneten Linie in Pixel. |
dashedLine | Boolean | Wenn gesetzt, wird die Linie gestrichelt gezeichnet. Standardmäßig ist die Linie durchgezogen. |
lineTension | Number | Diese Zahl bestimmt den Krümmungsgrad der Verbindungslinien im Graphen. 0 ist der Standardwert und lässt die Verbindungslinien gerade erscheinen. Bei Bruchteilen im Zehntelbereich kann man die Verbindungslinien krümmer zeichnen lassen. |
fill | Boolean|Number |
Diese Option bestimmt, ob der zu diesem Dataset zugehörige Graph eine Hintergrundfarbe haben soll. Der Standardwert ist TRUE. Mögliche andere Werte sind:
|
bgColor | String | Die Hintergrundfarbe eines Graphen. Es empfielt sich, eine teilweise durchsichtige Farbe mittels des Formats rgba auszuwählen, die zu der Randfarbe passt. Bei Nichteingabe wird diese Farbe anhand color automatisch bestimmt, mit einer Durchsichtigkeit von 80%. |
showPoints | Boolean | Falls gesetzt, werden die Punkte auf den Linien gezeichnet. Der Standardwert ist bei Funktionen false und bei diskreten Punkten true. |
Die folgenden Eigenschaften gelten nur für Liniendiagramme | ||
monotoneInterpolation | Boolean | Wenn diese Option gesetzt ist, wird auf Monotonie bei der kubischen Interpolation geachtet. Monotone Interpolation eignet sich am besten bei Graphen, die Funktionen y = f(x) repräsentieren. Standardmäßig ist diese Option nicht aktiviert. |
steppedLine | Boolean|String |
Diese Option kann die folgenden Werte annehmen:
|
Das Funktion-Objekt
Das Data-Objekt ist vom Typ CX_JSON_OBJECT und beinhaltet die Spezifikation einer Punkte generierenden Funktion
Feld | Typ | Beschreibung |
---|---|---|
expression | String |
Ein mathematischer Ausdruck in der Form "f(x) = 5*sin(x) + 3x + a". Dabei sind alle Funktionen und Konstanten der Bibliothek math.js erlaubt. ( Liste aller Funktionen - Liste aller Konstanten ) |
constants | JSON-Object |
Falls expression Konstanten beinhaltet, müssen diese hier als definiert werden. Beispiel: { "a" : 15.6 } |
start | String | Number |
Der Anfangswert von x, mit dem die Punktegenerierung startet. Dieser kann auch als mathematischer Ausdruck angegeben werden z. B. "-2PI" |
end | String | Number |
Der Endwert von x, mit dem die Punktegenerierung endet. Dieser kann auch als mathematischer Ausdruck angegeben werden z. B. "2PI/2" |
step | String | Number | Der Schritt, um den zwischen start und end iteriert wird. Wenn dies nicht angegeben ist, beträgt der Schritt ein Hundertstel des Abstandes zwischen min und max. Dieser kann auch als mathematischer Ausdruck angegeben werden z. B. "PI/2" |
Das Axes-Objekt
Feld | Typ | Standardwert | Beschreibung |
---|---|---|---|
dimension | Integer | - | Die Einstellungen werden derjenigen Achse mit dieser Dimension zugeordnet. 0 bezieht sich bspw. auf die erste Dimension im n-Tupel der Daten, usw. |
type | String | "linear" |
Dieses WebWidget unterstützt vier Arten von Achsen: lineare, logarithmische, zeitliche Achsen und in Kategorien unterteilten Achsen. Eine Kategorienachse ist sinnvoll, wenn es keine Zwischenwerte zwischen den Koordinaten geben kann und die Reihenfolge keine Rolle spielt. "Vertriebskosten" und "Personalkosten" sind Kategorien, die keine geordnete Kontinuität bilden, anders als 'Oktober 2019' und 'Dezember 2019', die einen Zwischenwert 'November 2019' haben können. Tupel verweisen auf die Kategorien mit dem Index einer Kategorie beginnend mit 1. Das Tupel (2, 45) bezieht sich somit auf die zweite Kategorie und hat den Wert 45. Die linearen, logarithmischen, und zeitlichen Achsen empfehlen sich, wenn entsprechende Daten vorliegen und haben den Vorteil gebenüber der Kategorienachse, dass man keine Kategorien zu definieren braucht, sondern einen kontinuierlichen Zahlenstrahl definiert, der ohne Umordnung von "Kategorien" Zwischenwerte erlaubt. Mögliche Werte: linear, logarithmic, time, category |
label | String | "" | Der Titel der Achse. Dieser wird häufig genutzt, um die Einheit mit anzugeben. |
gridLines | Boolean | true | Blendet die zur Achse parallelen Gitternetzlinien ein oder aus. |
stacked | Boolean | false | Dies ist nur für die y-Achse in Balken- und Liniendiagrammen relevant und führt dazu, dass die Balken aller Datasets an einer gemeinsamen Koordinate aufeinandergestapelt werden. Im Liniendiagramm tritt dasselbe Verhalten auf, allerdings bezogen auf die Flächen unter einer Linie (einem Dataset). |
min | Number | 0 |
Der Wert, bei dem die Achse anfangen soll ungeachtet der Datengrenzen. In Kategorienachsen wird dieser Wert nicht beachtet. |
max | Number | dynamisch |
Der maximale Wert, den die Achse zeigt, ungeachtet der Datengrenzen. Sollte diese Eigenschaft nicht explizit angegeben sein, wird die maximale Grenze anhand der Daten dynamisch ermittelt. In Kategorienachsen wird dieser Wert nicht beachtet. |
step | Number | dynamisch |
Diese Eigenschaft bestimmt die Größe der Achsenschritte. In zeitlichen und Kategorienachsen wird dieser Wert nicht beachtet. |
autoSkip | Boolean | true | In der Regel werden so viele Labels auf einer Achse angezeigt, wie der freie Platz es erlaubt, sodass keine Textüberlappungen stattfinden. Um unabhängig vom freien Platz alle Labels anzeigen zu lassen, kann diese Option auf FALSE gesetzt werden. |
Nur für Kategorienachsen relevante Eigenschaften | |||
labels | ARRAY(String) | - | Falls keine Labels in der Datenmenge angegeben sind, könnte man die Labels hier benennen. Wichtig ist zu beachten, dass nur genauso viele Balken(gruppen) angezeigt werden, wie es Einträge in diesem Array gibt. Alle anderen Balken werden ignoriert, deswegen soll diese Eigenschaft nur mit Bedacht verwendet werden. |
Nur für logarithmische Achsen relevante Eigenschaften | |||
useScientificNotation | Boolean | true | Wenn gesetzt, werden die Labels der Achse in der wissenschaftlichen Notation angezeigt z.B. 5e+3, ansonsten in der üblichen Notation z.B. 5000. |
Nur für zeitliche Achsen relevante Eigenschaften | |||
timeUnit | String | dynamisch |
Wenn definiert, wird die zeitliche Achse in der angegebenen Einheit unterteilt. Mögliche Werte: millisecond, second, minute, hour, day, week, month, quarter, year |
timeUnitFormats | String|TimeFormat | s. TimeFormat | Legt das Anzeigeformat für die ausgewählte bzw. dynamisch ermittelte Zeiteinheit fest. |
timeParserFormat | String | automatisch | Dieser String gibt an, wie die Zeit- und Datumsangaben interpretiert werden sollen. Für alle möglichen Formate sei auf moment.js verwiesen. Sollte kein Format festgelegt werden, sind alle ISO 8601 Formate erlaubt, die moment.js unterstützt. |
tooltipFormat | String | - | Standardmäßig werden Zeit- und Datumsangaben in Tooltips in demselben Format angezeigt, wie sie übermittelt werden. Mit dieser Option kann man ein abweichendes Format für die Tooltips festlegen. Für alle möglichen Formate sei auf moment.js verwiesen. |
isoWeekday | Boolean | TRUE | Falls timeUnit auf "week" gesetzt ist, beginnt die Woche mit Montag, wenn diese Eigenschaft gesetzt ist, andernfalls mit Sonntag. |
Das Options-Objekt
Feld | Typ | Standardwert | Beschreibung |
---|---|---|---|
type | String | 'line' |
Der Typ des Diagramms als String aus der folgenden Menge:
|
animationDuration | Number | 400 | Die Dauer der Animation beim Laden des Diagramms in Millisekunden. 0 würde die Animation ausschalten. |
legendPosition | String | "top" |
Die relative Position der Legende. Die folgenden Werte werden akzeptiert: top, down, right, left, hidden |
showTooltips | Boolean | true | Aktiviert bzw. deaktiviert das Anzeigen von Tooltips, wenn die Maus auf einen Balken zeigt. |
title | String | "" | Ein textueller Titel für das Diagramm. |
titlePosition | String | "top" |
Die relative Position des Titels. Die folgenden Werte werden akzeptiert: top, down, right, left |
Diese Optionen gelten nur für Kreisdiagramme | |||
circumference | Number | 2 | Die Spannweite des Diagramms als Vielfaches von π. 1 würde einen Halbkreis erzeugen. Um den Startwinkel zu ändern, siehe startAngle. |
startAngle | Number | - 0.5 | Der Anfrangswinkel als Vielfaches von π, von dem aus das Diagramm gezeichnet wird. |
cutoutPercentage | Number | 0 | Eine Nummer zwischen 0 und 100, die angibt, wie prozentual groß der innere Ausschnitt im Ringdiagramm sein soll. Ein Kreisdiagramm hat einen 0-Ausschnitt, ein Ringdiagramm kann in der Praxis je nach Stilrichtung der Anwendung Ausschnitte zwischen 20 und 80 bekommen. Das abgebildete Ringdiagramm hat beispielsweise einen 30-Ausschnitt. |
Diese Optionen gelten nur für Balkendiagramme | |||
horizontal | Boolean | false | Falls gesetzt, wird das Balkendiagramm horizontal gezeichnet. |
Das DataPoint-Objekt
Dieses Objekt wird InstantView als Parameter bei Ereignissen mitgeteilt und dient der Identifizierung eines Datenpunktes (Punktes, Balkens, Segments ...).
Feld | Typ | Beschreibung |
---|---|---|
datasetIndex | Number | Der Index der Datenmenge beginnend mit 0. Im Fall einer eizigen Datenmenge ist dieser Wert immer gleich 0. |
point | Array | Die Koordinaten des Datenpunktes als Array. |
Das TimeFormat-Objekt
Dieses Objekt legt die Formate für Zeiteinheiten fest, falls eine zeitliche Achse verwendet werden soll. Für alle möglichen Formate sei auf moment.js verwiesen.
Einheit | Standardwert | Beispiel |
---|---|---|
millisecond | 'h:mm:ss.SSS a' | 11:20:01.123 AM |
second | 'h:mm:ss a' | 11:20:01 AM |
minute | 'h:mm a' | 11:20 AM |
hour | 'hA' | 11AM |
day | 'MMM D' | Sep 4 |
week | ''ll' | Sep 4 2015 |
month | 'MMM YYYY' | Sep 2015 |
quarter |
|
Q3 - 2015 |
year | 'YYYY' | 2015 |
Darstellungsoptionen im Widget-Menü
Das Widget-Menü erscheint am rechten oberen Ende des Charts-Widgets, wenn die Maus über das Widget hovert, oder das Widget den Fokus hat. Es beinhaltet mehrere Darstellungsoptionen, die dem Endbenutzer erlauben, etwa den Diagrammtypen, die Ausrichtung des Balkendiagramms, die Achseneinstellungen und vieles mehr zu ändern, um die gewünschte Sicht auf die Daten zu erreichen.
Einige dieser Option bedarf anders als die meisten selbsterklärenden Optionen kurzer Erklärung. Datentransposition dient dazu, dass die Daten nicht mehr nach Datasets unterteilt werden, sondern nach der x-Koordinate (Alle Werte einer x-Koordinate werden jeweils zu einem Dataset zusammengefasst), was eine andere Sicht auf die Daten erlaubt. Mit Datennormierung ist die Umwandlung der absoluten Werte in relative Werte möglich. Relative Werte beziehen sich auf die Summe aller Werte aller Datasets zu einer x-Koordinate. Ein Kreisdiagramm ist in seiner ursprünglichen Form auf diese Weise normiert.