Plots / Graphen - plot.period

Das Widget plot.period bietet zusätzlich zum "normalen Anzeigen" von Daten oder Werten noch die Möglichkeit diese Daten oder Werte für einen frei wählbaren Zeitraum genauer anzuzeigen (zoomable).
Hier wird zuerst gezeigt, wie man den Plot ohne die Zusatzfunktion "zoomable" verwendet.


Das Beispiel-Item sieht so aus:
Verbrauchsdaten: Elt_Leistung: PL1: type: num visu_acl: rw database: yes knx_dpt: 14 knx_listen: 5/2/2 PL2: type: num visu_acl: rw database: yes knx_dpt: 14 knx_listen: 5/2/3 PL3: type: num visu_acl: rw database: yes knx_dpt: 14 knx_listen: 5/2/4

Das Widget für den Plot, welchen wir verwenden, sieht so aus:


Der dazugehörige html-Code in Block-Typ 2 sieht so aus:
<div class="block"> <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true"> <div data-role="collapsible" data-collapsed="false"> <h3>ELT-Lesitung</h3> {{ plot.period('', ['Verbrauchsdaten.Elt_Leistung.PL1', 'Verbrauchsdaten.Elt_Leistung.PL2', 'Verbrauchsdaten.Elt_Leistung.PL3'], 'avg', '12h', 0, 0, '', '', ['Phase L1', 'Phase L2', 'Phase L3']) }} </div> </div> </div>
Die Farbvorgaben der Verläufe sind Standart-html (z.B. Info. Man kann z. b. statt: #e0e0e0 nur #eee schreiben.


WICHTIG:
Es ist zu beachten, dass die Daten erst angezeigt werden, sobald alle 3 Daten einmal gesendet wurden. Also erst, wenn alle 3 GAs einmal einen Wert gesendet haben, ist etwas zu sehen.


Weiterführende Infos zu dem Widget gibt es in der Inline Dokumentation.