[FTUI 3] Charts

[setstate]

du hast vermutlich ein falsche y-axis-id angegeben. Es gibt nur 'y' und 'y1'. Für diese beiden gibt es eine Definition für Aussehen und Position. Wenn du aus Versehen 'y0' benutzt, gibt es diese nicht und chartjs denkt sich etwas aus.

[grossmaggul]

O.K., ich habe das nochmal überprüft.

Code Auswählen Erweitern

<ftui-chart title="Radiator" y-label="Temperatur" y1-label="Ventil" y-unit="°C" y1-unit="%" unit="30d" class="semitransparent">
       
                <ftui-chart-data fill label="Ist"
                             background-color="#d6305650"
                             color="#d63056"
                             log="logdb"
                             file="history"
                             spec="wz.radiator:temperature"
                             point-radius="0"
                             y-axis-id="y0">
                </ftui-chart-data>
           
                <ftui-chart-data fill label="Soll"
                             background-color="#d6407650"
                             color="#d67054"
                             log="logdb"
                             file="history"
                             spec="wz.radiator:desiredTemperature"
                             point-radius="0"
                             y-axis-id="y0">
                </ftui-chart-data>
               
                <ftui-chart-data fill label="Ventil"
                             background-color="rgba(75,192,192,0.2)"
                             color="rgba(75,192,192,1)"
                             log="logdb"
                             file="history" 
                             spec="wz.radiator:valveposition"
                             point-radius="0"
                             y-axis-id="y1">
                </ftui-chart-data>
               

Wenn ich den beiden ersten <ftui-chart-data> das y-axis-id=0 lösche, dann geht's. Darf man das so nicht angeben?

[setstate]

Weil es, wie gesagt, keine y0 gibt.

Setze es auf y oder lasse es weg, es ist default.

[grossmaggul]

O.K., das war mir nicht klar, danke für die Aufklärung!

[stefan-dd]

Wie kann so man ein Diagramm im Anhang realisieren? Es soll ein / aus Zustand dargestellt werden.

[setstate]

Das Chart.js kann per default keine Gantt Charts (oder ähnliches) darstellen. Es gibt aber ein Plugin, was das ermöglichen soll.
Müsste man sich mal ansehen, ob es kompatibel ist.

https://github.com/anton-shchyrov/chartjs-plugin-gantt

Edit1: passt nicht mehr - zu alt. Evtl sind Floating Bars vom chart.js passender.

Edit2: Floating Bars passen auch nicht. Ich versuche jetzt mein Glück mit  type="bubble" + open=1 und closed=0 Mapping und Interpolation.

Edit3: könnte klappen, siehe Screenshot vom ersten Versuch

[stefan-dd]

Code Auswählen Erweitern

<ftui-chart-data stepped label="Stefan" color="#ff0000" background-color="#d63056" log="logProxy" spec="DbLog:logdb,predict=13000000,extend=13000000:Stefan_Zuhause:state:0::$val=($val=~'on'?0.95:0.9)"></ftui-chart-data>     


In FTUI3 hatte ich es übergangsweise so gelöst. In die Logdatei werden nur die Zustandsänderungen geschrieben. Erzeugt einen Graphen zwischen 0.95 und 0.9.

[setstate]

ja, so habe ich das verstanden. Zum Beispiel bei Fenster und Türkontakten. Im Logfile steht nur open und close und dazwischen nix.

open wird in 3 umgewandelt, close in 0

Wenn man das in einem normalen Line-Chart darstellt, bekommt man ein Sägezahnmuster - nicht sehr sinnvoll.
Wenn man dazu 'stepped' einschaltet, sieht es besser aus - eine Stufe. Die fallende Flanke ist aber grafisch unschön.

Deswegen versuche ich bei der fallenden Flanke die dazwischenliegenden Punkte zu berechnen und die 0 auszublenden. Da bekommt man ein Chart aus deiner Frage. Oder hat sich das erledigt?

[stefan-dd]

Der Wunsch ist noch nicht gelöst.
Bei FTUI2 konnte man den Werten Farben zuordnen also die 0.95 z.B. rot und alles was kleiner 0.95 war die Hintergrundfarbe, damit konnte ich mit den minimalen log Werten waagerechte Graphen erstellen.
Ist vielleicht nicht die beste Lösung, aber es hat funktioniert. Meine Vorstellung ist, das es so, oder noch besser zu realisieren ist.

Code Auswählen Erweitern


data-columnspec='["DbLog:logdb,predict=13000000,extend=13000000:Stefan_Zuhause:state:0::$val=($val=~\\x22on\\x22?0.95:0.91)",
data-style='[["8",["0.95","rgba(255, 255, 255, 0)","0.91"],["0.95","#ff0000","0.95"]],


[stefan-dd]

Kann man die Legende in der Kopfzeile ausblenden?

[Thomas_Homepilot]

Hallo zusammen,ist es möglich, Diagramme zu "stapeln". Also z. B Leistung Gerät 1: 1,7 kW, Leistung Gerät 2: 0,34 kW -> Diagramm wie im Anhang?
Danke und GrußThomas

[Bytehunter]

Eine Variante, wie man einen farbigen Hintergrundbereich in die Charts reinpfuscht. Vielleicht hat jemand eine bessere Idee?

Code Auswählen Erweitern



<ftui-popup id="keller_klima_chart" timeout="0" height="90%" width="89%" >
  <header>Klima Keller</header>
  <ftui-column>
    <ftui-row>
      <ftui-chart title="Feuchtigkeit" y-label="Rel. Luftfeuchtigkeit" y1-label="Temperature" y-max="90" y-min="40" y-unit="%rF">
         <ftui-chart-data  label="Kellerboden" point-radius="1"
                           background-color="rgba(32, 99, 155,0.2)" color="rgba(32, 99, 155,1)"
                           log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::"/>
         <ftui-chart-data  label="Kellerdecke"   point-radius="1"
                           background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)" 
                           log="FileLog_kg.kellerwand.DHT22" spec="4:kg.kellerwand.DHT22.humidity\x3a::"/>
         <ftui-chart-data point-radius="0" fill color="#44000001" log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::100"></ftui-chart-data>
         <ftui-chart-data point-radius="0" fill color="#ffd84a00" log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::75"></ftui-chart-data>
         <ftui-chart-data point-radius="0" fill color="#55c59401" log="FileLog_kg.keller.DHT22" spec="4:kg.keller.DHT22.humidity\x3a::65"></ftui-chart-data>
         <ftui-chart-controls units="day, week"></ftui-chart-controls>
       </ftui-chart>
     </ftui-row>
  </ftui-column>
</ftui-popup>


[Stonemuc]

Um mein FTUI3 fertigzustellen, habe ich jetzt noch eine Frage zum Chart. Alle Charts die ich gern wollte, habe ich jetzt implementiert. Allerdings bekomme ich die Anzeige für meinen Heizungsverlauf nicht hin. Kann ich beim spec mit |part arbeiten? Irgendwie hat jeder meiner Plots den gleichen Verlauf....und etwas total Kurioses angezeigt.
Im Anhang mal FTUI2 und FTUI3 Vergleich...



Hier mal die betreffende Zeile aus meinem logfile:

Code Auswählen Erweitern

2022-03-01_00:06:34 Mythz sGlobal: outsideTemp: 0.2 flowTemp: 27.3 returnTemp: 26.6 hotGasTemp: 30.6 dhwTemp: 46.3 flowTempHC2: -60 evaporatorTemp: 26.8 condenserTemp: 26.1
mixerOpen: 0 mixerClosed: 0 heatPipeValve: 0 diverterValve: 0 dhwPump: 0 heatingCircuitPump: 0 solarPump: 0 compressor: 0 boosterStage3: 0 boosterStage2: 0 boosterStage1: 0
highPressureSensor: 0 lowPressureSensor: 0 evaporatorIceMonitor: 0 signalAnode: 0 evuRelease: 1 ovenFireplace: 0 STB: 0 outputVentilatorPower: 36 inputVentilatorPower: 36
mainVentilatorPower: 0 outputVentilatorSpeed: 24 inputVentilatorSpeed: 23 mainVentilatorSpeed: 0 outside_tempFiltered: 1.1 relHumidity: 0 dewPoint: 0 P_Nd: 6.03 P_Hd: 11.51
actualPower_Qc: 0.000 actualPower_Pel: 0.000 collectorTemp: -60 insideTemp: -60 windowOpen: 0 quickAirVent: 0 flowRate: 0 p_HCw: 1.51 humidityAirOut: 25.86

und hier das Chart:

Code Auswählen Erweitern

<ftui-chart title="Heizungsverlauf" y-label="Temperatur" y1-label="Luftfeuchtigkeit" y-unit="°C" y1-unit="%">
        <ftui-chart-data label="Brauchwasser" fill background-color="rgba(21,0,249,0.2)" color="rgba(21,0,249,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(13)" [update]="Mythz:state:time"></ftui-chart-data>
        <ftui-chart-data label="Luftfeuchtigkeit" fill background-color="rgba(132,248,6,0.2)" color="rgba(132,248,6,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(95)" y-axis-id="y1" [update]="Mythz:state:time"></ftui-chart-data>
        <ftui-chart-data label="Vorlauf" fill background-color="rgba(251,0,0,0.2)" color="rgba(251,0,0,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(7)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="Rücklauf" background-color="rgba(0,224,250,0.2)" color="rgba(0,224,250,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(9)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="HC1 Soll" background-color="rgba(125,0,250,0.2)" color="rgba(125,0,250,1)" log="FileLog_Mythz" [spec]="4:sHC1 | part(15)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="HC1 Ist" background-color="rgba(219,0,250,0.2)" color="rgba(219,0,250,1)" log="FileLog_Mythz" [spec]="4:sHC1 | part(17)" [update]="Mythz:state:time"></ftui-chart-data>
<ftui-chart-data label="Außentemperatur" background-color="rgba(233,205,13,0.2)" color="rgba(233,205,13,1)" log="FileLog_Mythz" [spec]="4:sGlobal | part(5)" [update]="Mythz:state:time"></ftui-chart-data>

        <ftui-chart-controls units="day, week"></ftui-chart-controls>
      </ftui-chart>

[OdfFhem]

@Stonemuc

spec wird an FHEM weitergereicht, um die geloggten Daten auszuwerten. Die eckigen Klammern bzw. eine Pipe-Funktion klingen in diesem Zusammenhang "sehr ungewöhnlich" ...

Um FTUI2 und FTUI3 vergleichen zu können, wäre das FTUI2-Tag noch interessant ...

[Stonemuc]

Ich hab da nicht wirklich Ahnung von. Wie kann ich dann den x-ten Wert aus der Spalte 4 sGlobal rausfiltern? Muss ja irgendwie möglich sein...

Hier mal wie ich es in FTUI2 gelöst habe:

Code Auswählen Erweitern

<div class="small" data-type="chart"
data-device="Mythz"
data-logdevice="FileLog_Mythz"
data-logfile="-"
data-columnspec='["13:sGlobal","95:sGlobal","7:sGlobal","9:sGlobal","15:sHC1","17:sHC1","5:sGlobal"]'
data-legend='["Brauchwassertemp.","Luftfeuchtigkeit","Vorlauf","Rücklauf","HC1 Soll","HC1 Ist","Au&szlig;entemp."]'
data-uaxis='["primary","secondary","primary","primary","primary","primary","primary"]'
data-ptype='["lines","lines","lines","lines","lines","lines","lines"]'
data-yunit="&deg;C"
data-yunit_sec="%"
data-ytext="Temperaturen"
data-ytext_sec="Luftfeuchtigkeit"
data-xticks="240"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-minvalue="-25"
data-maxvalue="70"
data-style='["ftui l6","ftui l4","ftui l2","ftui l5","ftui l2dash","ftui l5dash","ftui l3"]'>
</div>