Lade...
 

Charts (WebWidget)

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.

Kreisdiagramm von Beispieldaten
Kreisdiagramm von Beispieldaten
 
Ringdiagramm zweier Dimensionen
Ringdiagramm zweier Dimensionen
 
Halbkreisdiagramm von Beispieldaten
Halbkreisdiagramm von Beispieldaten
 
Balkendiagramm von Beispieldaten
Balkendiagramm von Beispieldaten
 
Säulendiagramm von Beispieldaten
Säulendiagramm von Beispieldaten
 
Radardiagramm von Beispieldaten
Radardiagramm von Beispieldaten
 
Liniendiagramm von Beispieldaten
Liniendiagramm von Beispieldaten
 
Verschiedene Darstellungsformen
Verschiedene Darstellungsformen der Liniendiagramme
 
Streudiagramm
Streudiagramm
 
Blasendiagramm
Blasendiagramm

Verwendung

Web(ChartsWebWidget, APP("charts.html"), 0, 0, 800, 600)

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:

  • FALSE: keine Hintergrundfarbe
  • Der Index eines Datasets beginned mit 0: Füllung bis zum Dataset mit dem angegebnen Index.
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:

  • FALSE : Standardmäßig. Es wird normal interpoliert, ohne eine Treppenfunktion zu bilden.
  • 'before' : Bildet eine Treppenfunktion, wobei die konstante Interpolation zwischen zwei Punkten (x, x+1) den Wert y(x) annimmt.
  • 'after' : Bildet eine Treppenfunktion, wobei die konstante Interpolation zwischen zwei Punkten (x, x+1) den Wert y(x+1) annimmt.

 

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 FunktionenListe 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" 

Liste aller Konstanten

end String | Number

Der Endwert von x, mit dem die Punktegenerierung endet. Dieser kann auch als mathematischer Ausdruck angegeben werden z. B. "2PI/2" 

Liste aller Konstanten

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:

  • Liniendiagramm: "line"
  • Balkendiagramm: "bar"
  • Kreisdiagramm: "pie"
  • Blasendiagramm: "bubble"
  • Streudiagramm: "scatter"
  • Radardiagramm: "radar"
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
'[Q]Q - YYYY'
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.