Ankündigung

Einklappen
Keine Ankündigung bisher.

Plotly_graph mit State-Attributen befüllen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    #16
    Setze mal 'hours_to_show: 15d' in die dritte Entity, statt für das gesamte Chart.
    Strategisch solltest Du dafür Buttons bauen, mit denen das umschaltbar ist.

    /tom

    Kommentar


      #17
      das mit den Button ist auch noch geplant. Ich habe nur noch so einige Baustellen die ich davor abarbeiten muss. Irgendwie muss ich meine PV anlage noch in das System integrieren. Die Monteure für die Inbetriebnahme waren dazu nicht in der Lage. Aber zurück zum Thema.

      Leider klappt das so nicht. es ändert sich nichts in der Anzeige...

      Kommentar


        #18
        Hallo Tom,

        ich habe noch einmal über den Anzeigezeitraum nachgedacht. Wenn ich das richtig verstehe, werden an dieser Stelle die Daten aus "last" und "current" in die richtige Reihenfolge sortiert werden.

        Code:
        const combined = { ...last, ...current };
                const keys = Object.keys(combined).sort((a, b) => {
                  const [ddA, mmA, yyyyA] = a.split('.');
                  const [ddB, mmB, yyyyB] = b.split('.');
                  return new Date(`${yyyyA}-${mmA}-${ddA}`) - new Date(`${yyyyB}-${mmB}-${ddB}`);​
        und an dieser Stelle die entsprechenden Daten dann an die x-Achse und y-Achse übergeben.
        Code:
                  const [dd, mm, yyyy] = key.split('.');
                  x.push(`${yyyy}-${mm}-${dd}`);
                  y.push(parseFloat(combined[key]));​
        meine Überlegung wäre nun an der Stelle an der die Daten in die richtige reihenfolge gebracht werden, eine Formel einzufügen, die die Daten um den Faktor -x vom heutigen Datum aus begrenzen. dann sollten entsprechend weniger Daten angezeigt werden.

        Kommentar


          #19
          Sorry, war die letzen Tage ziemlich heftig auf Arbeit eingebunden - sehr späte Feierabende und somit keine Zeit zum 'Spielen'.

          Ja, das geht. Muss ja auch nur in der Schleife bei CurrentMonth gemacht werden. Wenn X-Zahl > TagHeute, dann Tonne. Letzter Eintrag wäre somit 'heute'. Kürzeste Zeitspanne wäre somit der 1. März (28 Tage + 1), längste der 31. August (31 + 31 Tage).

          Ich glaube, ich habe auch das Problem gefunden, warum Dich die Karte den Datumsbereich nicht eingrenzen lässt (ist mir vor längerer Zeit schon mal auf die Füße gefallen): Das wird als Datumsstempel von der graph-card gar nicht erkannt, ist somit einfach 'Text'.

          Bedingt durch die internen Formate, die HA verwendet und liefert, erwartet die HA plotly-graph-card nach meiner Erinnerung ein etwas anderes Datums-/Zeitformat als plotly selbst. Die Karte fungiert ja nur als 'Loader' und 'Übersetzer' von HA-Werten für die mächtige plotly Bibliothek (die mit HA herzlich wenig zu tun hat; das ist ein Universum für sich). Sie kann mit einem echten DateTime Objekt nach meiner Erinnerung nicht wirklich was anfangen.

          Ich hatte in einem anderen Thread das hier schon mal gezeigt (gern die Karte mal ausprobieren). Da sieht man, welche manuell erstellten Datums-/Zeitformate mit der plotly-graph-card funktionieren (siehe console logs). Vielleicht komme ich am Wochenende mal dazu, da wieder ein wenig tiefer einzutauchen.

          /tom
          Zuletzt geändert von Tom Bombadil; 26.07.2025, 12:29.

          Kommentar


            #20
            wenn ich das richtig verstehe, werden die Werte der x-Achse nicht als Zeitstemple interprettiert. Ich müsste also den String in Zeitstempel umwandeln den Plotly auch als einen solchen versteht.

            Zitat von Tom Bombadil Beitrag anzeigen
            Ja, das geht. Muss ja auch nur in der Schleife bei CurrentMonth gemacht werden. Wenn X-Zahl > TagHeute, dann Tonne. Letzter Eintrag wäre somit 'heute'. Kürzeste Zeitspanne wäre somit der 1. März (28 Tage + 1), längste der 31. August (31 + 31 Tage).
            hm... wenn ich aber am 02.August die Werte der vergangenen Woche sehen möchte, würde das nicht gehen, da im currentMonth nur die Werte für den letzten Monat fehlen. Wäre es nicht sinnvoll das im combined zu machen?

            Die üverlegung ist aber obsolet, wenn der Wert der X-Achse in einen Zeitstempel umgewandelt werden würde.

            Kommentar


              #21
              ich habe jetzt mal einwenig mit dem code gespielt den du verlinkt hast...

              PHP-Code:
                entity""
                  
              nameresults
                  type
              bar
                  
              fn: |
                    
              $fn ({ vars }) => {
                      const 
              combined = { ...last, ...current };
                      const 
              keys Object.keys(combined).sort((ab) => {
                        const [
              ddAmmAyyyyA] = a.split('.');
                        const [
              ddBmmByyyyB] = b.split('.');
                        return new 
              Date(`${yyyyA}-${mmA}-${ddA}`) - new Date(`${yyyyB}-${mmB}-${ddB}`);
                      });
                      const 
              = [];
                      const 
              = [];
                      
              keys.forEach((key) => {
                        const [
              ddmmyyyy] = key.split('.');
                        const 
              date = new Date (`${yyyy}-${mm}-${dd}`);
                        const 
              formatted_dt date.toISOString().slice(019).replace('T'' ');
                        
              x.push(formatted_dt);
                        
              y.push(parseFloat(combined[key]));
                      });
                      
              vars.x;
                      
              vars.y;
                      
              console.log("formatted date: "x);
                      
              console.log("wert:"y);
                    }
              ​ 
              im Log wird bis zum reload alles richtig angezeigt.
              dann kommt allerdings gleich eine Fehlermeldung.

              HTML-Code:
              plotly-graph-card.js?hacstag=413812496335:2228  
              Uncaught (in promise) Error: Card didn't load
               at plotly-graph-card.js?hacstag=413812496335:2228:2402
               at async NN.plot (plotly-graph-card.js?hacstag=413812496335:2228:2193)​
              Edit:
              ich glaube der Grund für den Fehler war, das ist die selbe Karte 2x in mein Dashboard eingefügt hatte...
              Zuletzt geändert von Sven1973; 25.07.2025, 11:28.

              Kommentar


                #22
                Schick mir mal bitte wegen Deiner kürzlich erfolgten Umstellung nach to_json das Ergebnis der folgenden Anfragen aus der Developer Konsole --> Templates:

                {{ state_attr('sensor.vitocal_200s_energyconsumptiond omestichotwatermonthmatrix', 'LastMonth') }}

                danach extra

                {{ state_attr('sensor.vitocal_200s_energyconsumptiond omestichotwatermonthmatrix', 'CurrentMonth') }}

                Bitte Originalergebnisse, vorn und hinten mit einem '|' ergänzt. Ich kann die Daten hier nicht nachstellen, da ich diese Anlage nicht habe, daher brauch ich die Rohdaten.

                /tom

                Kommentar


                  #23

                  LastMonth
                  Code:
                  | {
                  "10": 0,
                  "11": 0,
                  "12": 0,
                  "13": 0,
                  "14": 0,
                  "15": 0,
                  "16": 0,
                  "17": 0,
                  "18": 0,
                  "19": 0,
                  "20": 0,
                  "21": 0,
                  "22": 0,
                  "23": 1.3,
                  "24": 2.7,
                  "25": 1.6,
                  "26": 1.8,
                  "27": 0,
                  "28": 1.2,
                  "29": 3.2,
                  "30": 0,
                  "31": 0,
                  "01": 0,
                  "02": 0,
                  "03": 0,
                  "04": 0,
                  "05": 0,
                  "06": 0,
                  "07": 0,
                  "08": 0,
                  "09": 0
                  }​ |
                  ​
                  CurrentMonth

                  Code:
                  | {
                  "10": 1.3,
                  "11": 1.4,
                  "12": 1.2,
                  "13": 3.4,
                  "14": 0,
                  "15": 1.3,
                  "16": 1.3,
                  "17": 1.4,
                  "18": 1.5,
                  "19": 1.4,
                  "20": 2.9,
                  "21": 0,
                  "22": 1,
                  "23": 1.7,
                  "24": 1.6,
                  "25": 0.6,
                  "26": 0,
                  "27": 0,
                  "28": 0,
                  "29": 0,
                  "30": 0,
                  "31": 0,
                  "01": 1.6,
                  "02": 2,
                  "03": 1.2,
                  "04": 1.3,
                  "05": 1.9,
                  "06": 1.4,
                  "07": 1.6,
                  "08": 1.6,
                  "09": 1.9
                  }​ |
                  das sind die Daten die ausgegeben werden...

                  Kommentar


                    #24
                    So - ich denke, ich hab's.

                    Anmerkung: Die $fn Funktion der Plotly Graphen ist mir leider schon früher häufig auf die Füße gefallen; sie ist durch die Sandbox recht unzuverlässig und umständlich bei komplexerem Javascript, und das autoupdate funktioniert auch häufig nicht (mehrfach berichtetes Problem in den Discussions der plotly-graph card. Meine Lösung besteht fast immer darin, die Karte in einer custom:button-card zu positionieren; das bringt neben verbesserten Positionierungsmöglichkeiten den Vorteil, dass man das $fn von plotly durch das stabilere [[[ ... ]]] der button-card ersetzen kann, und somit JavaScript in *allen* Feldern der Plotly Card möglich wird (und nicht nur in den dafür vorgesehenen).

                    Diesmal bin ich jedoch den Weg über Templates gegangen, damit der Lösungsweg transparenter ist (die Darstellung ähnlicher Daten wird in den Diskussionen auf Github regelmäßig angefragt und bleibt meist unbeantwortet). Die Eingansdaten werden in einem Template plotly-genehm aufbereitet (echte Timestamps, ungültige Datumseinträge aufgrund der festen Matrix von 31 Monatstagen werden entfernt (z.B. 31.02.2025), der aktuelle Monat wird nur bis heute berücksichtigt und nicht bis zum 31.). Das Ergebnis ist ein JSON, das die plotly-graph Karte aufbereiten kann, danach auch 'versteht' und an die plotly Bibliothek zur Anzeige weiterreicht.

                    How-to-setup (hier wird vorerst mit simulierten Daten gearbeitet - somit auch für Mitbastler ausführbar, falls jemand vor einem ähnlichen Problem steht):
                    • Unten in die configuration.yaml folgende Zeile einfügen (ohne Leerzeichen vor sensor!):
                      sensor vitocal: !include conf/vitocal.yaml
                    • In der HA-Root ein Verzeichnis 'conf' anlegen; hineinwechseln und eine Datei 'vitocal.yaml' anlegen. Dort diesen Code einfügen.
                    • Developer Tools -> Konfiguration prüfen, dann Neustart -> Schnelles Neuladen (nur YAML).
                    • In den Developer Tools --> Templates zur Kontrolle folgendes eingeben (copy/paste):

                      Rohdaten:
                      {{ state_attr('sensor.vitocal_200s_energyconsumptiond omestichotwatermonthmatrix_sim', 'LastMonth') }}
                      {{ state_attr('sensor.vitocal_200s_energyconsumptiond omestichotwatermonthmatrix_sim', 'CurrentMonth') }}
                      Aufbereitete Daten:
                      {{ state_attr('sensor.vitocal_domestic_hot_water_stat s', 'months_combined') }}


                      Die Rohdaten sollten so aussehen: {'10': 0, '11': 0, '12': 0, '13': 0, '14': 0, ...}
                      Die aufbereiteten Daten so: [{"date": "2025-06-01T23:59:59", "value": 0.0}, ​...}]
                      Anmerkung: Die Forensoftware fügt in die Sensornamen oben beim Speichern immer Leerzeichen ein - diese bitte entfernen.
                    • Auf dem Dashboard eine neue Seite anlegen; dort eine beliebige Karte hinzufügen, in das YAML der Karte gehen und statt des automatisch erstellten Originalcodes diesen Code dort einfügen und die Karte speichern.
                    Danach sollte das Ergebis so aussehen:

                    vitocal_plotly.png

                    Um später von den simulierten Daten auf den 'live' Sensor umzuschalten, in diesen beiden Zeilen des Templates das '_sim' am Ende des Sensornamens entfernen (danach nochmal Developer Tools --> Config prüfen, anschließend Neustart --> schneller YAML-Neustart):

                    Code:
                    {# -- Rohdaten für aktuellen und vorherigen Monat laden -- #}
                    {%- set data_last = state_attr('sensor.vitocal_200s_energyconsumptiondomestichotwatermonthmatrix_sim', 'LastMonth') -%}
                    {%- set data_current = state_attr('sensor.vitocal_200s_energyconsumptiondomestichotwatermonthmatrix_sim', 'CurrentMonth') -%}​
                    Wenn es jetzt noch knallt (unwahrscheinlich. aber möglich), stimmt etwas mit den Ausgangsdaten nicht; diese dann entsprechend bereitstellen (z.B. '[' und ']' beim Speichern dranmontieren) oder mit 'tojson' in den beiden obigen Zeilen im Template einlesen.

                    Viel Erfolg - und viel Spass beim Basteln!

                    /tom
                    Zuletzt geändert von Tom Bombadil; 26.07.2025, 18:43.

                    Kommentar


                      #25
                      wow... Vielen Dank... sieht super aus.
                      Allerdings "flackert" es bei mir extrem...

                      EDIT:
                      wenn ich
                      Code:
                       responsive: true
                      rausnehme, klappt es
                      Zuletzt geändert von Sven1973; 26.07.2025, 23:23.

                      Kommentar


                        #26
                        Schön, dass mal was klappt.

                        Das Flackern liegt an irgeneiner Einstellung im 'config:'-Abschnitt des Plots, bin da nicht weiter eingetaucht. Schmeiss den Abschnitt mal komplett raus, und das Flackern hört auf. Bei mir tritt es übrigens nur beim Editieren auf, nicht bei der normalen Anzeige.

                        /tom

                        Kommentar


                          #27
                          Ich bin echt begeistert. Ich versuche grad den Template-Sensor zu verstehen um damit weiter rumspielen zu können. 😊

                          ich habe jetzt einen zweiten Sensor mit der gerzeugten thermischen Energie angelegt.

                          Code:
                                vitocal_domestic_hot_water_output_stats:
                                  unique_id: vitocal_dhw_output_stats
                                  value_template: "{{ now().date() }}"
                                  attribute_templates:
                          
                                    months_combined: >-
                                      {# -- Aktuelles Datum ermitteln -- #}
                                      {%- set current_month = now().month -%}
                                      {%- set current_year = now().year -%}
                                      {%- set today = now().day -%}
                          
                                      {# -- Vorherigen Monat und ggf. Vorjahr bestimmen -- #}
                                      {%- set previous_year = current_year - 1 if current_month == 1 else current_year -%}
                                      {%- set previous_month = 12 if current_month == 1 else current_month - 1 -%}
                          
                                      {# -- Anzahl Tage pro Monat (inkl. Schaltjahrbehandlung für Februar) -- #}
                                      {%- set days_per_month = [31, 29 if (previous_year % 4 == 0 and (previous_year % 100 != 0 or previous_year % 400 == 0)) else 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] -%}
                          
                                      {# -- Rohdaten für aktuellen und vorherigen Monat laden -- #}
                                      {%- set data_last = state_attr('sensor.vitocal_200s_vitocal_energy_dhw_monthly_output', 'LastMonth') -%}
                                      {%- set data_current = state_attr('sensor.vitocal_200s_vitocal_energy_dhw_monthly_output', 'CurrentMonth') -%}
                          
                                      {# -- Namespace zur Sammlung der Einträge -- #}
                                      {%- set result = namespace(entries=[]) -%}
                          
                                      {# -- Werte für den vorherigen Monat (nur gültige Kalendertage) -- #}
                                      {%- for day_key in data_last | sort if day_key|int >= 1 and day_key|int <= days_per_month[previous_month - 1] -%}
                                        {%- set day = "%02d" % day_key|int -%}
                                        {%- set timestamp = "%04d-%02d-%sT23:59:59" | format(previous_year, previous_month, day) -%}
                                        {%- set entry = {"date": timestamp, "value": data_last[day_key] | float(0)} -%}
                                        {%- set result.entries = result.entries + [entry] -%}
                                      {%- endfor -%}
                          
                                      {# -- Werte für den aktuellen Monat (nur bis heute) -- #}
                                      {%- for day_key in data_current | sort if day_key|int <= today -%}
                                        {%- set day = "%02d" % day_key|int -%}
                                        {%- set timestamp = "%04d-%02d-%sT23:59:59" | format(current_year, current_month, day) -%}
                                        {%- set entry = {"date": timestamp, "value": data_current[day_key] | float(0)} -%}
                                        {%- set result.entries = result.entries + [entry] -%}
                                      {%- endfor -%}
                          
                                      {# -- Ergebnis als valides JSON-Array ausgeben -- #}
                                      {{ result.entries | tojson }}​
                          war ja nur copy&paste...

                          beides in einem Diagramm sieht dann so aus...

                          grafik.png

                          was mir jetzt aufgefallen ist, der letzte Wert steht auf dem 29.07. obwohl der eigenliche Timestamp ja der 28.07.2025 ist

                          und ich ich hätte gern die scop-Zahl also [erzeugte therm. Energie] / [eingebrachte elektr. Energie]. Kann Plotly das direkt "berechnen oder benötige ich einen Template-Sensor? die Skala dafür hätte ich dann rechts angegeben und die Werte als einzelne rote Punkte dargestellt...

                          Kommentar


                            #28
                            Für scop würde ich einen weiteren Template Sensor bauen und den auf die zweite Y-Achse rechts legen (Trennung von Code und Anzeige). Man kann beliebig viele Y-Achsen einblenden; klassischer use-case ist, wenn man mehrere Diagramme untereinander darstellen und synchron scrollen will (Y3...n gelten dann für den zweiten sowie mögliche weitere Plots - siehe 2. Bild links in der readme.md zur plotly-card).

                            Zum Datum: Da klingelt was. Ich kann mich erinnern, in der Vergangenheit viele Plotly-Beispiele gesehen zu haben, bei denen innerhalb von $fn Indizes mit '-1' spezifiziert wurden. Vermutlich ist in der Bibliothek der erste Wert nicht item[1], sondern item[0]. Fehlt denn der erste Wert ganz links?

                            /tom

                            Kommentar


                              #29
                              Konnte das gerade nachstellen - hab folgende Werte bei _sim eingegeben:

                              01.06. = 3.0, 02.06. = 2.0, 03.06. = 1.0
                              26.07. = 1.0, 27.07. = 2.0, 28.07. = 3.0

                              Der Graph zeigt erwartungsgemäß vorn und hinten eine 3.0, wenn man mit der Maus auf den ersten/letzten Balken zeigt. Datum im Hinweistext passt auch zum Wert. Die Balken an sich stimmen also - nur die Beschriftung der X-Achse erscheint unten um einen Tag nach links verschoben. Hab aber keinen Plan, woran das liegen könnte - mal bitte die Acheneinstellungen durchforsten, ob da was dabei ist (notfalls Text auch mal auf 45° stellen und jeden Tag anzeigen lassen, nicht nur jeden siebten - vielleicht ist ja genau das das Problem) ...

                              /tom

                              Kommentar


                                #30
                                also... Ich habs mit
                                Code:
                                time_offset: -1d
                                versucht aber das löst das Problem nicht.
                                ich habe noch das gefunden..
                                - map_x: new Date(+x + 1000) # map the x coordinate (javascript date object) of each datapoint. Same variables as map_y are in scope​
                                bin mir aber der Funktionsweise nicht bewusst.

                                Kommentar

                                Lädt...
                                X