plot.period - Darstellung übereinander möglich?

[ralf9000]

allerdings wenn ich in der visu.css für alle Plots

.plot {
  height: 800px;
  min-height: 7.0em;
}
​

mache funktioniert die vergrößerte Höhe natürlich jetzt für alle, aber gleichzeitig schrumpft komischerweise die Breite. Die css-Datei scheint der richtige Platz zu sein, nur die Nomenklatur ist unklar. Und mit der Breite nun eine weitere Herausforderung.

So, morgen ist auch noch ein Tag ....

[ralf9000]

Ich hab jetzt nochmal 1 1/2 Stunden für die Plotgrösse rumprobiert, ich bekomme es für alle Plots hin, aber für den einen Plot alleine nicht.

alkazaa: Konntest Du es bei Deiner Grafik hinbekommen?

[alkazaa]

alkazaa: Konntest Du es bei Deiner Grafik hinbekommen?

Ich hab es jetzt hinbekommen wie von Wolfram empfohlen, mit

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

in der /var/www/html/smartvisu/pages/meinhaus/visu.css.

Änderungen der .css sieht man erst, wenn auch der Browser-cache geleert wird.

Frage an wvhn : wie müsste der css Eintrag aussehen, wenn der Plot auf der Einstiegsseite ist? Da gibt es ja kein mypage-myplot.

[wvhn]

Moin zusammen,

Danke an alkazaa fürs Testen und die Unterstützung.

Punkte im Dateinamen muss smartVISU bei der Festlegung des Seitennamens (id) eliminieren, da es sonst Probleme mit den Selektoren gibt. Für Zentral.KWL.html wird die id zu "Zentral_KWL". Dann muss in der visu.css folgendes stehen:

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

Bis zu einer Höhe von 400px funktioniert das direkt ohne weitere Einstellungen. Ich hab das jetzt mal mit dem Dateinamen und dem Eintrag in der visu.css 1:1 bei mir getestet.

Oberhalb von 400px schlägt eine andere CSS-Eigenschaft zu, die die Höhe auf 400px begrenzt. Wenn man das div #Zentral_KWL-myplot.plot größer macht, dann bleibt die Höhe des Plots gleich und die Breite wird entsprechend kleiner skaliert, so dass Höhe und Breite des Plots im selben Verhältnis bleiben, wie das umgebende div.
Die Begrenzung kann man aufheben, indem man den ursprünglichen Wert von 400px auf z.B. 600px ändert - am besten wieder selektiv für den Plot:

#Zentral_KWL-myplot svg.highcharts-root:not(.supersized){
    max-height: 600px;
}

Gruß
Wolfram

[ralf9000]

Ich hab in der Mittagspause nochmals rumprobiert, das mit .plot direkt an 'Dateiname-Merker.plot' funktioniert bei mir NICHT. Ich habe aber jetzt eine Version folgendermaßen hinbekommen, in der 'visu.css' (nun mit Leerzeichen vor .plot):

#KWLQUALITY .plot {
    height: 400px;
    min-height: 9.0em;
}
​

Und in der HTML-Datei dann:

<div id="KWLQUALITY">
 {{ plot.period('',
 ['Zentral.KWL.Regelung.CO2.Maximum', 'Zentral.KWL.Regelung.Feuchte.Fuehler.OGBad', 'Zentral.KWL.Regelung.Feuchte.Fuehler.DGBad', 'Zentral.KWL.Leistungsstufe', 'Zentral.KWL.Bypass', 'Zentral.KWL.Regelung.Feuchte', \
'Zentral.KWL.Regelung.CO2'],
 ['raw','avg','avg','raw','raw','raw','raw'],
 '12h', 'now',
 [250, 15, -400, -40, -42, -44],
 [1000, 90, 200, 5, 3, 1],
 '',
 ['CO2', 'RF OG', 'RF DG', 'Stufe', 'Bypass', 'Feuchteregelung', 'CO2-Regelung'],
 ['#e54', '#9d4', '#7af'],
 ['line', 'line','line','areastair','areastair','areastair','areastair'],
 ['', 'Konzentration [ppm]........................', '.........................rel. Feuchte [%]','Stufe'],
 '',
 [1,2,2,3,4,5,6],
 [0,1,1,1,1,1,1],
 '',
 ['linear', 'linear','linear','boolean','boolean','boolean'],
 ['ppm','%RF','%'] ,
 { yAxis: [ { tickPositions: [ 300, 400, 500, 600, 700 ] }, { tickPositions: [ 20, 30, 40, 50, 60 ] }, {offset:0, visible: false},  {offset:0, visible: false}, {offset:0, visible: false}, {offset:0, visible: false}\
 ], legend: { verticalAlign: 'bottom', y: -30 } }) }}
</div>
​

Damit sieht die Grafik, die die Regelung der KWL zeigt, wie folgt aus:

Screenshot 2025-05-19 135710.jpg
(für die oberen beiden Werte habe ich eben erst die Datenbank aktiviert, die laufen gerade ein)

Was jetzt noch bleibt:

1. Die Achsenbeschriftung ohne die Punkte schieben (Leerzeichen und   werden ignoriert), da muss es einen anderen Weg geben ...
2. Farben schöner auswählen
3. Den Fehler bei Daten "Stufe" kurz nach 8:00 Uhr verstehen, in der DB ist der nicht
4. Die Grafik höher als 400pt machen (weitere Daten), bei höheren Werte skaliert er plötzlich alles runter

War alles sehr stolperig und für mich Neuland, aber vielen Dank an Euch beide!

Ralf

[ralf9000]

wvhn: unsere Posts überschnitten sich, ich brauchte Zeit um alles in meinem Beitrag zusammen zu suchen und zu posten, da habe ich in der Zeit Deinen Beitrag noch nicht lesen können. Vielen Dank für diese tolle Aufklärung, warum es bei mir nicht ging. Ich habe jetzt mal das im css-File so gemacht und es funktioniert ganz ohne <div> .

Die Grafik höher machen werde ich heute Abend versuchen und mich melden.

Hast Du eine Idee, wie man die beiden Achsenbeschriftungen nach unten schieben kann, im Highcharts-Manual suche ich vergebens bis jetzt ....

Grüße und nochmals Danke!

Ralf

[wvhn]

Du kannst die Eigenschaft yAxis.title.align auf 'low' setzen, damit der Titel unten angezeigt wird.

Oder Du positionierst und kürzt die y-Achse selbst mit den Eigenschaften top und height:

{yAxis: {top: "50%", height: "50%"}}

Dann fehlt Dir aber im oberen Teil die Achse und Du müsstest noch eine leere Achse ohne Ticks und Labels und mit offset=0 spendieren.

Gruß
Wolfram

[ralf9000]

Hallo Wolfram,

Danke für die Anregung, aber die Achsen kürzen ist schlecht, wenn die CO2-Konzentration mal über 800ppm geht, soll sie ruhig über die anderen Grafiken schmieren können. Ich habe mir jetzt erstmal mit der Erlaubnis von HTML ('{ useHTML: true }'), vielen '&nbsp;' und '<pre> </pre>' für Anfang und Ende (sonst ignoriert er da '&nbsp;') geholfen, nicht schön, aber funktioniert:

 ['', '<pre> </pre>&nbsp;&nbsp;&nbsp;&nbsp;Konzentration [ppm]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stufe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Status', 'Status&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stufe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative Feuchte [%]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<pre> </pre>']

Nicht elegant, aber optisch erstmal gut:

Screenshot 2025-05-19 153312.jpg

Grüße, Ralf

[ralf9000]

... und jetzt noch das i-Tüpfelchen (Legende):

Screenshot 2025-05-19 160825.jpg

[wvhn]

Super. Wenn Du jetzt nochmal den Code postest (Widget-Aufruf und visu.css), dann können wir den Thread als gelöst markieren.

Danke und Gruß
Wolfram

[ralf9000]

Super. Wenn Du jetzt nochmal den Code postest (Widget-Aufruf und visu.css), dann können wir den Thread als gelöst markieren.

Hatte ich eigentlich oben in #20 und die kleine Änderung nachher, aber hier nochmal:

visu.css

#Zentral_KWL-KWLQUALITY.plot {
    height: 400px;
    min-height: 9.0em;
}
​

Zentral.KWL.html

...
 {{ plot.period('KWLQUALITY',
 ['Zentral.KWL.Regelung.CO2.Maximum', 'Zentral.KWL.Regelung.Feuchte.Fuehler.OGBad', 'Zentral.KWL.Regelung.Feuchte.Fuehler.DGBad', 'Zentral.KWL.Leistungsstufe', 'Zentral.KWL.Bypass', 'Zentral.KWL.Regelung.Feuchte', 'Zentral.KWL.Regelung.CO2'],
 ['raw','avg','avg','raw','raw','raw','raw'],
 '12h', 'now',
 [250, 15, -400, -40, -42, -44],
 [1000, 90, 200, 5, 3, 1],
 '',
 ['<small>CO<sub>2</sub></small>',  '<small>%RF<sub>OG</sub></small>', '<small>%RF<sub>DG</sub></small>', '<small>Stufe</small>',  '<small>Bypass</small>', '<small>Feuchteregelung</small>', '<small>CO<sub>2</sub>-Regelung</small>'],
 ['#e54', '#9d4',  '#7af',  '#0f0',  '#937',   '#88f',            '#e54'],
 ['line', 'line','line','areastair','areastair','areastair','areastair'],
 ['', '<pre> </pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Konzentration [ppm]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stufe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Status','Status&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stufe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative Feuchte [%]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<pre> </pre>','Stufe'],
 '',
 [1,2,2,3,4,5,6],
 [0,1,1,1,1,1,1],
 '',
 ['linear', 'linear','linear','boolean','boolean','boolean'],
 ['ppm','%RF','%'] ,
 { yAxis: [ { useHTML: true, tickPositions: [ 300, 400, 500, 600, 700 ] }, { useHTML: true, tickPositions: [ 20, 30, 40, 50, 60 ] }, {offset:0, visible: false},  {offset:0, visible: false}, {offset:0, visible: false}, {offset:0, visible: false} ], legend: {  useHTML: true, verticalAlign: 'bottom', y: -60 } }) }}
...

[ralf9000]

Hier nochmal ein paar Hintergrundinfos und Daten vom heutigen Abend. Unser Haus hat folgenden Setup:

• Zentrale Vallox Valloplus 500 (8 Stufen) mit KNX-Interface
• Eltern-, 2 Kinder- und ein Gästeschlafraum mit insg. 4 CO₂-Fühler (Steckdosenhöhe), die an die Vallox "berichten" (in KNX ist nur ein Wert, nämlich das Maximum aus den 4 Werten, abrufbar)
• 2 Badezimmer eins im OG und eins im DG (im DG daneben das Elternschlafzimmer) mit jeweils einem Feuchtefühler auf 2m Höhe

Man sieht sehr gut, was heute passierte_

• ich war den ganzen Tag im Homeoffice, aber im Haus auch unterwegs
• ab 13:00 bis 16:30 Uhr "füllte" sich das Haus wieder, CO₂ "zickezacke" leicht nach oben
• zw. 16:30 und 17:45 Uhr mit unserer 4-Jährigen im Kinderzimmer (CO₂-Melder) gespielt
• 17:45 bis 18:15 Uhr Abendessen, keiner war in CO₂-Meldernähe
• 18:15 bis 19:00 Uhr spielen mit der kleinen im Kinderzimmer
• 19:15 Uhr Waschen der Kleinen im OG-Badezimmer (gelber schwacher Peak Feuchte)
• 19:45 Uhr: nach kurzem Jogging, Duschen meinerseits im DG-Badezimmer (blauer kleiner Peak)
• 20:45 Uhr: "Intensivduschen" meiner Frau im DG
• 21:00 Uhr: momentan sind wir entweder am schlafen (Kind) oder liegen im Elternschlafzimmer und gucken Fernseher (bzw. Laptop)

Man sieht auch gut, wie die KWL auf Feuchtigkeit und CO₂ reagiert, das will ich jetzt mit den Grafiken und den Parametern an der KWL noch optimieren.

Screenshot 2025-05-19 214646.jpg

PS: Die CO₂-Linie geht schon in die Stufengrafik rein, da werde ich die y1-Achse noch anpassen.

Nochmals Danke in Form dieses Nutzungsberichtes und Grüße, Ralf

[ralf9000]

So jetzt habe ich die Plothöhe nochmal auf 800ppm CO₂ angepasst, die Grafik in y auf 450px erweitert. Dazu dann der Trick von wvhn in #19 unten:

visu.css

#Zentral_KWL-KWLQUALITY.plot {
    height: 450px;
    min-height: 9.0em;
}

#Zentral_KWL-KWLQUALITY svg.highcharts-root:not(.supersized){
    max-height: 600px;
}​

Nun "vermatschen" die Grafikteile nicht mehr, zumindest bei der CO₂-Konzentration heute Abend:

Screenshot 2025-05-19 234805.jpg

(was man nun auch gut sieht, ist wenn Tiefschlaf bei der 4-Jährigen eintritt, um 4-6:00 Uhr morgens geht's dann wieder hoch, überlagert wird es von uns ruhend, wo es auch weniger ist)

PS: Noch immer warm draußen, der Bypass in der KWL ist noch da ....

[ralf9000]

Ich bin aktuell noch dabei die Grenzen/Sollwerte als gestrichelte Linien einzubauen, habe jetzt gelernt, dass dies mit

#Zentral_KWL-KWLQUALITY .highcharts-series-1{
    stroke-dasharray: 0, 8;
}​

sehr gut klappt. Jetzt will ich aber noch "diese Sollwert-Datenreihe" in der Legende ausblenden. In der Highcharts-Anleitung habe ich entnommen, dass dies mit

• series[] -> marker -> radius:0

geht. Jetzt hab ich versucht, das in das "Options-Attribut", bzw. obiges CSS reinzubekommen, bin aber kläglich gescheitert. Kann einer der "Highcharts-in-Smartvisu-Kundigen" mir da helfen? Vielen Dank im voraus!

Ralf

[wvhn]

Moin Ralf ralf9000,

beim Marker-Radius wird nur das Symbol der Reihe ausgeblendet, aber die Linie weiter angezeigt. Es gibt eine Option "showInLegend", die in der betreffenden Serie auf false gesetzt werden kann.

Wie bei der y-Achse müssen die Optionen auch bei den Serien in Array-Form in das Options-Objekt eingetragen werden. Das setzt Du mit einem Komma hinter die geschlossene eckige Klammer der yAxis. Beispiel für die 4. Serie:

series: [{},{},{},{showInLegend: false}]

Wenn Du dann noch die Serie aus dem Tooltip entfernen möchtest, setze in der Serie "enableMouseTracking" auf false. Nachteil: beim MouseTracking wird diese Serie dann abgedunkelt.

Gruß
Wolfram