Wenn dies dein erster Besuch hier ist, lies bitte zuerst die Hilfe - Häufig gestellte Fragen durch. Du musst dich vermutlich registrieren, bevor du Beiträge verfassen kannst. Klicke oben auf 'Registrieren', um den Registrierungsprozess zu starten. Du kannst auch jetzt schon Beiträge lesen. Suche dir einfach das Forum aus, das dich am meisten interessiert.
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.
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...
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.
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.
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.
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.
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.
ich habe jetzt mal einwenig mit dem code gespielt den du verlinkt hast...
PHP-Code:
- entity: "" name: results type: bar fn: | $fn ({ vars }) => { 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}`); }); const x = []; const y = []; keys.forEach((key) => { const [dd, mm, yyyy] = key.split('.'); const date = new Date (`${yyyy}-${mm}-${dd}`); const formatted_dt = date.toISOString().slice(0, 19).replace('T', ' '); x.push(formatted_dt); y.push(parseFloat(combined[key])); }); vars.x = x; vars.y = 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...
Schick mir mal bitte wegen Deiner kürzlich erfolgten Umstellung nach to_json das Ergebnis der folgenden Anfragen aus der Developer Konsole --> Templates:
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.
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.
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.
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.
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.
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...
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?
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) ...
Wir verarbeiten personenbezogene Daten über die Nutzer unserer Website mithilfe von Cookies und anderen Technologien, um unsere Dienste bereitzustellen. Weitere Informationen findest Du in unserer Datenschutzerklärung.
Indem Du unten auf "ICH stimme zu" klickst, stimmst Du unserer Datenschutzerklärung und unseren persönlichen Datenverarbeitungs- und Cookie-Praktiken zu, wie darin beschrieben. Du erkennst außerdem an, dass dieses Forum möglicherweise außerhalb Deines Landes gehostet wird und bist damit einverstanden, dass Deine Daten in dem Land, in dem dieses Forum gehostet wird, gesammelt, gespeichert und verarbeitet werden.
Kommentar