plot.period - Darstellung übereinander möglich?

[ralf9000]

Liebe Smartvisu'ler,

ich würde gerne meine bisheriges 'plot.period'-Grafik mit zusätzlichen (binären) Statusinformationen erweitern. Bisher mache ich für meine Vallox-KWL (mit KNX-Interface) über Smarthome/Smartvisu den folgenden Plot:

Lüftung (smartvisu).jpg

{{ plot.period('', ['Zentral.KWL.Regelung.CO2.Maximum', 'Zentral.KWL.Regelung.Feuchte.Fuehler.OGBad', 'Zentral.KWL.Regelung.Feuchte.Fuehler.DGBad'], 'avg', '12h', 'now', [250,12.5], [900,75], '', ['CO2', 'RF OG', 'RF DG'],['#e54', '#9d4', '#7af'],'',['', 'Konzentration [ppm]', 'Relative Feuchte [%]'],'',[1,2,2],[0,1]) }}​

Von meiner UVR kenne ich solche Darstellungen (da lese ich einen Teil der KWL-KNX-Daten auch wieder ein) mit einem getrennten "Boolschen Block" oben (bei derselben und einmaligsichbaren x-Achse):

Lüftung (Winsol).jpg

Das würde ich gerne in meiner 'plot.period'-Grafik in Smartvisu ähnlich machen (hier aber mit Präsenzdaten = Anwesenheit in den Räumen), wie könnte man das realisieren? Out of the box bin ich erstmal nicht fündig geworden, auch hier im Forum habe ich nicht die richtigen Hinweise gefunden. Gibt es dafür eine elegante Lösungen?

Eine Fallback-Option hätte ich, aber die ist sehr unschön: Ich rechne in Smarthome meine bool'schen Werte in Smartvisu auf die y2-Ache um, also

• Bool1: Aus=100, An=101
• Bool2: Aus=103, An=104
• Bool3: Aus=106, An=107
• ....

Ich hab auch noch die Lüfungesstufe 1 bis 8, die da ach oben smal gut reinpassen würde:

• Lüftungsstufe: 1=90, 2=91, 3=92, 4=93, 5=94, 6=95, 7=96, 8=97

Aber irgendwo empfinde ich das als unschön und an der falschen Stelle (Smarthome und da wäre es nach Umrechnung in der DB). Geht es besser? Habe ich was übersehen? Vielen Dank schonmal im Voraus für jeden Tipp!

Grüße, Ralf

[alkazaa]

In der smartvisu documentation für plot.period gibt es ganz unten unter dem Punkt 'special functions' etwas, das in die Richtung geht:

grafik.png
Der smartvisu code zu dem Beispiel ist:

{{ plot.period('', ['bath_plot_value','bath_plot_switch'], 'max', '1d', '', [20,'Off'], [24,'On'], '', ['Temperature','Heating'], '', ['line','stair'], '', '', [1,2], [0,1], '', ['linear', 'boolean'], '°C', { yAxis: [ { tickInterval: 0.5 },{labels: {enabled: false}} ], legend: { verticalAlign: 'bottom', y: -30 } }) }}
​

Da wird anscheinend mit dem plot.period Parameter 'chartoptions' gearbeitet (für den man sich dann wohl in die Highcharts Doku einlesen müsste), Damit könnte man vielleicht sowas machen.


Was ganz anderes, zu deinen Luftfeuchte-Werten: liegen die wirklich alle bei nur ca. 30% ? Das ist arg niedrig. Ich habe selbst auch eine KWL, habe mir aber vor 2 Jahren einen Enthalpie-Wärmetauscher zugelegt. Der bringt so etwa 5 zusätzliche Prozentpunkte (vorausgesetzt, es wird überhaupt Feuchtigkeit produziert im Haus).

Beste Grüße,
Franz

[ralf9000]

Hallo Franz,

vielen Dank für das drüber sehen ....

In der smartvisu documentation für plot.period gibt es ganz unten unter dem Punkt 'special functions' etwas, das in die Richtung geht

Ich benutze das ja schon oben für CO2 links und 2 Feuchtewerte rechts. Aber die zusätzlichen bool'schen Werte möchte ich nicht über die bisherigen vermatscht haben, sondern drüber abgehoben wie in dem UVR-Beispiel. Diese Werte sind in der Smartvisu-Grafik oben noch nicht drinnen. Ich bin momentan dabei den unschönen Weg zu gehen und dafür Offsets zu addieren, aber das ist durch die Brust ins Auge.
Mehrere Grafiken übereinander habe ich wegen unterschiedlichen Achsenwerten und -beschriftungen nie deckungsgleich bekommen. Vom gemeinsamen Scollen auf der x-Achse ganz zu schweigen ...

Was ganz anderes, zu deinen Luftfeuchte-Werten: liegen die wirklich alle bei nur ca. 30% ? Das ist arg niedrig. Ich habe selbst auch eine KWL, habe mir aber vor 2 Jahren einen Enthalpie-Wärmetauscher zugelegt. Der bringt so etwa 5 zusätzliche Prozentpunkte (vorausgesetzt, es wird überhaupt Feuchtigkeit produziert im Haus).

Enthalpietauscher habe ich auch (bei den Temperaturen momentan ist die KWL auch tagsüber auf Bypass, geht gar nicht drüber), aber momentan ist die Luftfeuchtigkeit draußen schon nicht hoch, hier ist seit 2 Wochen vollständige Dürre, Gras kaputt, ..... ich hoffe nächste Woche kommt endlich Regen. Unsere Zisterne (mit 6500 Liter Regenwasser) ist auch seit einer Woche leer. 😕

Grüße,

Ralf

[wvhn]

Moin Ralf,

so ganz out of the box geht das nur mit Abstrichen. Um es richtig komfortabel zu machen, müsste man ein eigenen Widget für Highcharts Dashboard oder zumindest für synchronisierte Plots erstellen.

Mit Bordmitteln kann man aber folgendes erreichen:

• in plot.period kann man mehrere y-Achsen verwenden, auf die man jeweils einen der Schaltzustände legt und sie so skaliert, dass die Kurven übereinander angezeigt werden. Die Eigenschaften der Achsen kann man dann über die "Chartoptions" beeinflussen. Das ist in der "Highhcarts API Reference" gut dokumentiert. Als Basis kann das Beispiel in der Doku für plot.period verwendet werden, in dem nur die Achse für die Schaltzustände noch nicht verschoben ist (siehe unten). Ich hatte noch keine Zeit, auszuprobieren, wie das mit Kurven vom Typ "boolean" geht. Dafür wird in Highcharts der Achsentyp "category" verwendet, so dass man wahrscheinlich in den Chartoptions jeweils ein Array von Kategorien angeben muss. Oder man nimmt den Achsentyp "linear" und kann min und max pro Achse in den Widget-Parametern angeben. Gut fürs Ausprobieren der Parametrierung ist die App "Plot Analyser", die ab v3.5 enthalten ist.
  grafik.png
• man kann mehrere Plots in einer Tabelle übereinander setzen, die Plot-Höhen variieren und per Chartoptions z.B. die Achsbeschriftungen unterdrücken.
• Mit plot.sparkline gibt es eine für die Darstellung in Tabellen bereits vordefinierte Variante von plot.period.

Gruß
Wolfram

EDIT: jetzt war Franz doch schneller mit demselben Ansatz. Dennoch hilft vielleicht der Hinweis mit den unterschiedlich skalierten y-Achsen weiter.

[ralf9000]

Ich probiere schon seit Freitag verzweifelt das Hinzubekommen, hier mein Stand:

• Unterdrückung der y-Achsenbeschriftung funktioniert gut, da kann ich nun die zusätzlichen boolschen-Werte als Reihe mit jeweils neuer Achse ohne Zusätzliche Achsendarstellung rechts hinbekommen.
• Was ich noch nicht hinbekommen habe, ist das Aueinanderziehen
• Was ebenfalls noch nicht klappt ist für die boolschen Werte nicht die volle y-Höhe zu nehmen (evtl. kann da Behandlung als numerische Werte helfen, aber noch nicht ausprobiert, bin ich aktuell drann.
• 'plot.sparkline' benutze ich schon für den groben Überblick, aber wenn man ins Detail gehen will (x- und y-Achsenwerte ablesen, gemeinsames x-Scrolling, ...) unbrauchbar.

Probiere gerade weiter .... Danke schon mal für Eure Hilfe.

[ralf9000]

Etwas was ich jetzt schon mal festgestellt habe

yAxis: [ ..., {visible: false}]

ist besser als

yAxis: [ ..., {labels: {enabled: false}}]

, bei 'labels' alleine bleibt die vertikale Achsenlinie sonst stehen, siehe:
Empty-3rd-yAxis.jpg
Allerdings wird nun mit 'visible: false' pro unsichtbarer Achse doch Platz in der Grafik gebraucht: die Grafik schiebt sich pro zusätzlicher "nun unsichtbarer" y-Achse ein paar Pixel nach links, da ich nachher ca.6-8 "unsichtbare" y-Achsen haben werde, addiert sich dies merklich.

[ralf9000]

.... so ein kleiner Zwischenstand, wie es aussieht:

Stand.jpg

Der Code dazu sieht so aus:

 {{ plot.period('',
 ['Zentral.KWL.Regelung.CO2.Maximum', 'Zentral.KWL.Regelung.Feuchte.Fuehler.OGBad', 'Zentral.KWL.Regelung.Feuchte.Fuehler.DGBad', 'Zentral.KWL.Leistungsstufe'],
 ['raw','raw','raw','raw'],
 '2h', 'now',
 [250, 12.5, -180],
 [1000, 75, 100],
 '',
 ['CO2', 'RF OG', 'RF DG', 'Stufe'],
 ['#e54', '#9d4', '#7af'],
 ['stair', 'stair','stair','areastair'],
 ['', 'Konzentration [ppm]', '..........rel. Feuchte [%]','Stufe'],
 '',
 [1,2,2,3],
 [0,1,1,1],
 '',
 ['linear', 'linear','linear'],
 ['ppm','%RF','%'] ,
 { yAxis: [ { tickInterval: 250 }, { tickPositions: [ 20, 30, 40, 50 ]  }, {visible: false} ], legend: { verticalAlign: 'bottom', y: -40 } }) }}
​

Wo ich noch auf dem Schlauch stehe ist die Grafik in der Höhe anzupassen, meine Versuche das in einen css-File oder mit div drum herum zu machen, scheitern momentan. Wenn das in der Höhe größer ist, wollte ich mehrere bool'schen Daten oben hinzufügen.

Kleine andere Frage: Gibt es eine Möglichkeit Spaces in der Achsenbeschriftung, da wo jetzt die vielen Punkte sind, einzufügen? ' ' wird nicht verstanden ....

Ralf

[wvhn]

Also man bekommt das schon hin:
grafik.png

{{ plot.period('', ['bath.plot.value', 'bath.plot.switch', 'bath.plot.switch2'], '', '', '', ['20', '-4', '-6], ['26', '3', '1'], '', ['bath.plot.value', 'bath.plot.switch', 'bath.plot.switch2'], '', ['line', 'areastair', 'areastair'], '', 'advanced', ['1', '2', '3'], ['0', '1', '1'], '', ['linear', 'boolean', 'boolean'], '', {yAxis:[{},{offset:0, visible:false},{offset:0, visible:false}]}, '', '', 2, 'database') }}

Die y-Achsen für die boolschen Werte lasse ich von -6 bis 1 und -4 bis 3 laufen und für den Linienplot erhöhe ich den maximalen Skalenwert entsprechend. Unschön ist noch, dass die Achsbeschriftung der Hauptachse bis ganz oben geht. Ich habe versucht, einen LabelFormatter in die ChartOptions aufzunehmen, bin aber bisher noch nicht erfolgreich gewesen.
Das Reservieren von freiem Platz für die nicht sichtbaren Achsen kann man mit offset:0 verhindern.


Gruß
Wolfram

EDIT: mit der Option chart: {height: '50%'} kannst Du die Höhe des Plots verändern. Dies geht in Pixeln oder wie hier im Beispiel in Prozent der Chartbreite.

EDIT 2: Code nachgeliefert

[ralf9000]

mit der Option chart: {height: '50%'} kannst Du die Höhe des Plots verändern. Dies geht in Pixeln oder wie hier im Beispiel in Prozent der Chartbreite.

Irgendwie schaffe ich es nicht, wenn ich als Option

{ chart: { height: '50%' }, yAxis: [ { tickInterval: 250 }, { tickPositions: [ 20, 30, 40, 50 ]  }, {visible: false} ], legend: { verticalAlign: 'bottom', y: -40 } }) }}

reinpacke, passiert gar nix .... bestimmt falsche Stelle, aber wie?

ERGÄNZUNG: Nach dem Browser-Cache löschen wird es jetzt höher, aber ist unten nun bei ca. 50% abgeschnitten:

Screenshot 2025-05-18 193800.jpg

[alkazaa]

Toll was man alles so mitbekommt, wenn hier ein Experte wie Wolfram mitprogrammiert.

Ich wollte dann auch gleich in meiner Anwendung die Option chart: {height: '50%'} ausprobieren. Ich habe aus

{{ plot.period('', ['ESP1_aFplot','f_Zuluftplot'], 'raw', '4h','', ['',0], ['',50], '' , ['aF','f_Zuluft'], ['red','green'], ['','stair'], ['aF', 'f'] , '', [1,2] , [0,1] )}}

dies gemacht:

{{ plot.period('', ['ESP1_aFplot','f_Zuluftplot'], 'raw', '4h','', ['',0], ['',50], '' , ['aF','f_Zuluft'], ['red','green'], ['','stair'], ['aF', 'f'] , '', [1,2] , [0,1],'','','' ,{ chart: {height: '50%'} })}}

Aber dann wird dies:
grafik.png
zu dem:
grafik.png

[ralf9000]

Unschön ist noch, dass die Achsbeschriftung der Hauptachse bis ganz oben geht

Das habe ich schon in meinem Beispiel auf der y2-Achse mit

{ tickPositions: [ 20, 30, 40, 50 ] }

gelöst, werde das auch noch auf y-Achse machen. Aber bin erstmal mit der Baustelle beschäftigt es höher zu bekommen, damit Platz ist.

Vielen Dank schon mal, Wolfram, was würde ich/wir ohne Dich nur machen ....

Ralf

[wvhn]

Man muss noch dafür sorgen, dass das div, in das der Plot eingebunden ist, ebenfalls die benötigte Höhe hat und dass keine weiteren Beschränkungen der Höhe vorliegen. Welche das sind, könnt Ihr in den Entwicklertools des Browsers untersuchen.

Wahrscheinlich reicht es, dem Plotwidget eine ID zu geben - z.B. „myplot“ und dann in der visu.css die Höhe neu zu definieren:

#mypage-myplot.plot {
  height: 400px;​
}

wobei “mypage” durch den Seitennamen zu ersetzen ist,

Gruß
Wolfram

[ralf9000]

... wobei “mypage” durch den Seitennamen zu ersetzen ist....

Hallo Wolfram,
was ist der "Seitename" und wo finde ich den denn?
Grüße, Ralf

Bei mir steht jetzt in der visu.css

#Zentral.KWL-myplot.plot {
  height: 800px;
}​

und in dem File Zentral.KWL.html

 {{ plot.period('myplot',
 ['Zentral.KWL.Regelung.CO2.Maximum', 'Zentral.KWL.Regelung.Feuchte.Fuehler.OGBad', 'Zentral.KWL.Regelung.Feuchte.Fuehler.DGBad', 'Zentral.KWL.Leistungsstufe'],
...​

Aber nix tut sich ....

[wvhn]

Der Seitenname ist das, was beim Aufruf der Seite hinter „index.php?page=” steht. Das ist der Dateiname ohne Endung: „beispiel“, wenn die Datei „beispiel.html“ heißt.

[ralf9000]

Das wäre bei mir "Zentral.KWL", aber damit funktioniert es nicht. Wo wird denn die visu.css überhaupt herangezogen, muss ich die noch irgendwo includieren?

Nachtrag: Eben noch mit Dateinamen und Seitenaufruf "ZentralKWL" ohne den Punkt probiert, ebenso kein Effekt. Dachte das könne stören ....