Properties

Grundsätzlich haben Sie zwei Möglichkeiten die Eigenschaften der graphomate sparklines zu pflegen: Über das Standard-Properties-Sheet, der alle Parameter in einer strukturierten Liste aufzeigt oder über das Additional-Properties-Sheet. Letztere bieten ein benutzerfreundlicheres User-Interface.

Die Checkboxen  vor den Eigenschaften in dem Additional-Properties-Sheet dienen der Steuerung der Sichtbarkeit von Elementen.

Die zu verwendende Data Source kann nur via Drag&Drop auf die Komponente oder auf dem Standard-Properties-Sheet unter Data Binding zugeordnet werden.

Durch Drücken der Taste F5 (Reload Application) können sowohl der Zeichenbereich, als auch das Additional-Properties-Sheet neu initialisiert werden. Dies ist manchmal notwendig, wenn Änderungen in den Properties nicht direkt in den Zeichenbereich übernommen werden.


Data Tab

Auf dem Data Tab wird die ausgewählte Datenquelle angezeigt; standardmäßig wird das gesamte Resultset für die Generierung der Sparklines verwendet. Über den Select-Button kann das Resultset eingeschränkt werden.

Data Alignment

Hier kann festgelegt werden, ob die Daten zeilen (Rows)- oder spaltenweise (Columns) interpretiert werden.

Chart Type

Hier legen Sie fest, ob die Daten als Linien (Lines)- oder Balkendiagramme (Bars) dargestellt werden.

Bar Width Factor

Falls als Charttyp Bars ausgewählt wurde, kann hier das Verhältnis zwischen Balkenbreite und Abständen festgelegt werden. Bei einer Eingabe von 1 werden keine Abstände gelassen, 0.5 bewirkt, dass die Balken ebenso breit sind wie die Abstände dazwischen.

Title

Geben Sie hier einen Titel (Chart Title) für die Komponente an. Ist die Checkbox aktiviert, wird dieser angezeigt. Zeilenumbrüche werden übernommen. Außerdem ist die Formatierung des Titels über HTML und (In-line-)CSS möglich.


Appearance Tab

Text Formatting

In diesem Abschnitt werden Schriftgrößen (Font Size und Title Font Size) sowie Schriftart (Font Family) der Texte festgelegt.

Height of Charts Elements

Der Parameter Padding between Sparklines steuert den Abstand zwischen den einzelnen Sparklines. Die Höhe der Sparklines selber wird durch die Schriftgröße festgelegt.

Value Format

An dieser Stelle steuern Sie das Format der Datenbeschriftungen:

  • Basic
    Pflegen Sie hier das Format für absolute und prozentuale Werte entsprechend der Vorgaben von numeral.js – s. Anhang. S. 13.
    Locale setzt die Ländereinstellung. Ist diese auf AUTO eingestellt, wird die Ländereinstellung aus der Datenquelle übernommen.
  • Extended
    Sofern Sie ein fixes Format für Ihre Datenbeschriftungen wünschen, können Sie dies hier für absolute und prozentuale Datenwerte pflegen.
    Die Auswahl einer Klammer „(" im Feld für Negative Sign führt zu einer Darstellung negativer Zahlen in Klammern: (1234).Der Parameter im Feld Scaling wird als Divisor verwendet, um eine Skalierung der Datenbeschriftung vorzunehmen.

Die resultierenden „Format-Strings" können auch über die Skriptsprache gesetzt werden.

Color Configuration

In diesem Abschnitt können die von der Komponente verwendeten Farben festgelegt werden.


Behavior Tab

Display Elements

In diesem Abschnitt wird die Sichtbarkeit der einzelnen Elemente der Sparklines eingestellt.

  • Category Labels steuert die Anzeige der Datenbeschriftungen.
  • Min/Max Highlight: Ist diese Option aktiviert, wird das Maximum jeder inidividuellen Sparkline mit einem grünen, das Minimum mit einem roten Punkt (oder anderen Farben, wenn dies in der Color Configuration verändert wurden) markiert.
  • Leading Values blendet den ersten Wert der Datenserie einer Sparkline vor der Sparkline selber ein bzw. aus.
  • Trailing Values blendet den Endwert der Datenserie einer Sparkline hinter der Sparkline selber ein bzw. aus.
  • Overall Range: Ist diese Checkbox aktiviert, wird die Position der Sparklines im gesamten Resultset als grauer Balken dargestellt, siehe auch Abschnitt Beschreibung der Sparkline-Elemente.

Zoom

Ist diese Checkbox aktiviert, öffnet sich bei Klick auf eine Sparkline ein Zoom-Popup.

  • Animate Popup bewirkt, dass das Zoom-Popup beim Einblenden animiert dargestellt wird (mehr dazu im Abschnitt Beschreibung der Sparkline-Elemente).
  • Category Labels as Headline bewirkt, dass das vor der Sparkline angezeigte Category Label als Überschrift des Zoomfensters angezeigt wird. Bewegt man die Maus über eine Linie, wird der Headlinetext durch das Category Label dieser Linie ersetzt; die Anzeige wird wieder zurückgesetzt, wenn die Maus von der Linie wegbewegt wird.
  • Tooltip steuert, ob beim Hovern des Mauszeigers über einer Linie ein Tooltip angezeigt wird oder nicht.
  • Zoom Height: Stellen Sie hier die Höhe des Zoom-Popups ein; ist die Sparklines-Komponente insgesamt kleiner, wird auch das Popup entsprechend kleiner dargestellt. Die Breite des Popups wird durch die gesamte Komponentenbreite bestimmt.
  • Duration of Animation: Stellen Sie hier die Dauer der Zoom-Animation in Millisekunden ein.
  • Font Size bestimmt die Schriftgröße innerhalb des Popups.
  • Line Size bestimmt die Dicke der Linie in px.

Ruler

  • Ruler aktivert eine vertikale (Hilfs-)Linie über die gesamte Höhe der Komponente, die beim Hovern über einer Sparkline an der dem Cursor nächstgelegenen Datenposition erscheint. Auf mobilen Endgeräten wird der Ruler derzeit nicht unterstützt.
  • Category Labels in Ruler zeigt die Kategoriebeschriftungen der Daten, durch die der Ruler läuft, unter dem Ruler an.




Search Tab

Die Suche erleichtert die Eingabe für Properties des Additional-Properties-Sheets. An dieser Stelle kann nach dem Namen, Funktion oder Gruppe einer Property gesucht werden. Die passenden Einstellungen werden dann direkt angezeigt und können hier geändert werden.


Info Popup

An dieser Stelle finden Sie Hinweise auf die genutzte Version der graphomate sparklines sowie einen Link, über den Sie uns über Fehler und Feature-Wünsche informieren können.

Unter Credits finden Sie eine Übersicht der von uns genutzten freien Bibliotheken.