Plots / Graphen - plot.period (zoomable)

Hier wir nun ein Besipiel aufgeführt, wie plot.period "zoomable" erstellt werden kann. Man muss lediglich einige Parameter mehr im Widget angeben. In diesem Beispiel wurden auch die Farben der Verlaufsdaten exemplarisch definiert.
Um den zoom sichtbar zu machen, einfach im Plot an irgendeiner Stelle die linke Maustaste gedrückt halten. Dann entsprechend nach links oder rechts ziehen und dann die linke Maustase loslassen.



Das Beispiel-Item sieht so aus:
Aussen: Temperatur: type: num visu_acl: rw database: yes knx_dpt: 9 knx_listen: 5/6/7 Verbrauchsdaten: Heizung: Vorlauf: type: num visu_acl: rw database: yes knx_dpt: 9 knx_listen: 5/2/5 Ruecklauf: type: num visu_acl: rw database: yes knx_dpt: 9 knx_listen: 5/2/6 Kessel: type: num visu_acl: rw database: yes knx_dpt: 9 knx_listen: 5/2/7

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


Der dazugehörige html-Code in Block-Typ 5 sieht so aus:
<div class="block" style="width:100%"> <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>Verlauf Heizung</h3> {{ plot.period('', ['Aussen.Temperatur', 'Verbrauchsdaten.Heizung.PL1', 'Verbrauchsdaten.HeizungPL2', 'Verbrauchsdaten.Heizung.PL3'], 'avg', '48h', '', '', '', '', ['Außen', 'Vorlauf', 'Rücklauf', 'Kessel'], ['#f0f', '#f00', '#00f', '#ff0'], '', '', '1h') }} </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.