Vorsicht

Dies ist die Dokumentation des aktuellen Entwicklungszweigs der CometVisu. Es besteht daher die Möglichkeit, dass einige der hier beschriebenen Features mit dem aktuellsten Release der CometVisu nicht genutzt werden können.

Das Diagram Plugin

Zu tun

openHAB Ergänzungen

Beschreibung

Das Diagram-Plugin bietet die Möglichkeit den zeitlichen Verlauf von Messwerten etc. zu visualisieren. Die Datenquelle muss im rrd-Format vorliegen. Genaueres dazu im Abschnitt RRD-Einführung & Beispiele.

Das Diagramm wird standardmäßig im Inline-Modus als Widget dargestellt. Zusätzlich kann die Option Popup aktiviert werden, so dass das Diagramm nach dem Anklicken im Vollbildmodus erscheint. Je nach Widgetgröße kann für die Inline Ansicht festgelegt werden ob Legende bzw. Achsenbeschriftungen angezeigt werden sollen.

../../../../_images/Diagram_simple_inline2.png

Diagramm als Widget (Inline-Diagramm) mit 5 Datenreihen und rechts unten als kleine Voransicht

../../../../_images/Diagram_simple_popup.png

Diagramm Popup das nach dem Anklicken des Diagramms angezeigt wird.

Wenn ein Anzeigewert als Aufruf für das Popup dienen soll, muss das diagram_info-Plugin verwendet werden. Genauere Informationen dazu unter Das Diagramm_Info Plugin.

Detaillierte Einstellungen

Das Diagram-Plugin ist eines der Widgets mit den umfangreichsten Konfigurationsmöglichkeiten. Viele der Attribute- bzw. Elemente sind aber optional für verschiedene Sonderanwendungen, so dass bereits mit wenigen Einstellungen sehr ansehnliche Diagramme in der CometVisu dargestellt werden können.

Erlaubte Attribute im Diagramm-Element

Element Attribut
  Name Inhalt Beschreibung
diagram width Dimension (Zahl+Einheit)  
height Dimension (Zahl+Einheit)  
popup true oder false Aktiviert die Popup-Funktion, die ein Vollbilddiagramm anzeigt, wenn das Diagramm angeklickt wird
previewlabels true oder false Zeigt die Achsenbeschriftung im Inline-diagramm an
series hour, day, week, month, year, fullday oder custom Legt die Einheit des period Attributs fest
refresh integer Aktualisierungsintervall des Diagramms ins Sekundens
period Text Definiert ob ein Stunden-, Tage-, Wochen- oder Jahresbereich dargestellt werden soll (als Vielfaches von “series”)
gridcolor Text Farbe der Gitternetzlinien im Diagramm
legend both, inline, popup oder none Definiert ob eine Legende angezeigt werden soll (in Verbindung mit popup Parameter). “None” => keine Legende, “both” => Legende im kleinen Inline Diagramm und Popup, “inline” => Legende nur im Inline Diagramm, “popup” => Legende nur im Popup Diagramm
legendposition nw, ne, sw oder se Legt die Position der Legende im Diagramm fest
title Text Fügt dem Diagramm einen Titel hinzu
tooltip true oder false Aktiviert die Tooltip-Funktion, die den aktuellen Wert anzeigt, an der die Diagrammlinie angeklickt wird
timeformat Text Legt das Datums-Zeitformat für x-Achse fest
timeformatTooltip Text Legt das Datums-Zeitformat für die im Tooltip angezeigten Werte fest
zoomYAxis true oder false Legt fest, ob beim Zoomen die y-Achse zusätzlich zur x-Achse skaliert wird
seriesStart Text  
seriesEnd Text  
seriesResolution integer  

Erlaubte Kind-Elemente und deren Attribute

Element Attribut
Struktur Name Inhalt Beschreibung
diagram
  • layout
colspan Zahl Spaltenanzahl für dieses Widget.
colspan-m Zahl Übersteuert die Spaltenanzahl auf mittleren (medium) Browser Größen.
colspan-s Zahl Übersteuert die Spaltenanzahl auf kleinen (small) Browser Größen.
rowspan Zahl Zeilenanzahl für dieses Widget.
x Text Horizontale Position des Widgets auf 2D Seiten.
y Text Vertikale Position des Widgets auf 2D Seiten.
z Text Für zukünftige Anwendungen reserviert.
width Text Breite des Widgets auf 2D Seiten.
Element Attribut
Struktur Name Inhalt Beschreibung
diagram
  • label
  • icon
name Text  
type Text  
flavour Text Auswahl der Darstellungsvariante. Siehe auch Flavour.
color Text  
styling Text Ändert die Farbe des angezeigten Wertes abhängig vom Wert selbst. Siehe auch Styling
class Text Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
diagram
  • label
  • #text
  Text Text um bei dem Widget eine Beschreibung darzustellen.
Element Attribut
Struktur Name Inhalt Beschreibung
diagram
  • axis
label Text Legt die Achsenbeschriftung fest
min Zahl Definiert das Minimum der y-Achse.
max Zahl Definiert das Maximum der y-Achse.
position left oder right  
unit Text Legt die Einheit fest, die hinter den Zahlen der y-Achsenbeschriftung bzw. im Tooltip angezeigt werden
decimals integer Legt die Anzahl der Nachkommastellen fest, die in der y-Achsenbeschriftung bzw. im Tooltip angezeigt werden
diagram
  • axis
  • #text
  Text  
Element Attribut
Struktur Name Inhalt Beschreibung
diagram
  • rrd
yaxis Text Weist die Daten einer y-Achse zu
color Text Legt die Farbe der Diagrammlinie fest
label Text Defininiert den Namen der Datenreihe in der Legende
scaling Zahl  
steps true oder false  
fill true oder false Füllt den Bereich unterhalb der Datenreihe bzw. Säule
style lines, bars oder points  
barWidth integer Breite der Balken in Einheiten der X Achse, im Gegensatz zu anderen Werten die in Pixel angegeben werden. Für Zeitverläufe z.B. ist die Einheit Millisekunden, sodass 24 * 60 * 60 * 1000 Balken in der Breite von einem Tag erzeugt.
align left, right oder center  
datasourceIndex integer Im Falle mehrerer Datenquellen in einer RRD-Datei kann hier der Index der Datenquelle angegeben werden, die angezeigt werden soll. Um den richtigen Index herauszufinden, kann “rrdtool info” verwendet werden.
consolidationFunction AVERAGE, LAST, MIN oder MAX  
resolution integer Die Standard-Auflösung für die Daten aus der RRD-Datei kann überschrieben werden mit einem eigenen Sekunden-Wert.
offset integer Offset in Sekunden, um die Zeitstempel der Daten aus der RRD-Datei zu modifizieren.
diagram
  • rrd
  • #text
  Text  

XML Syntax minimal

Alternativ kann man für das Diagram-Widget auch von Hand einen Eintrag in der visu_config.xml hinzufügen.

Vorsicht

In der Config selbst dürfen NUR UTF-8 Zeichen verwendet werden. Dazu muss ein auf UTF-8 eingestellter Editor verwendet werden!

Nachstehend ein einfaches Beispiel für das Diagram als Widget mit Popup-Funktion inkl. Beispielcode.

../../../../_images/Diagram_simple_inline3.png
<diagram  period="24" refresh="300" series="hour" gridcolor="#707070" popup="true" previewlabels="true" legend="both" legendposition="nw">
    <layout colspan="6" rowspan="6"/>
    <axis unit="°C" label="Temperatur"/>
    <rrd color="#FF0000" label="Solar RL [°C]">28.9B3172020000_temp</rrd>
    <rrd color="#FF00FF" label="Buffer 190cm [°C]">28.56A61B030000_temp</rrd>
    <rrd color="#FFFF00" label="Buffer 160cm [°C]">28.DCA672020000_temp</rrd>
    <rrd color="#00FF00" label="Buffer 100cm [°C]">28.EEA21B030000_temp</rrd>
    <rrd color="#0000FF" label="Buffer 40cm [°C]">28.E7E17D020000_temp</rrd>
</diagram>