Ankündigung

**Punker Deluxe** · 09.12.2024, 19:17

Und wieder Dankeschön für die Übersicht. Es kam aber mittlerweile die Bitte auf das ganze mit yaml zu zeigen. Selber schaff ich es auch wieder erst am Wochenende mein Dashboard zu verschönern und dann will man schnelle Erfolge.

**Tom Bombadil** · 10.12.2024, 16:12

Noch eine Bemerkung zu Plotly, weil ich damit wirklich sehr, sehr viel arbeite: (Fast) alle Optionen und Parameter aus der offiziellen und sehr umfangreichen Plotly.JS Dokumentation lassen sich 1:1 in HA umsetzen. Die Plotly Graph Card übernimmt dabei die Übersetzung zwischen 'HA YAML Speak' und Javascript.

Aus dem HA-Code:

Code:

layout:
  title:
    text: 'Hallo'

... übersetzt die Karte also folgende Plotly.JS-Anweisung:

Code:

var layout = {
  title: {
      text: 'Hallo'
  }
};

Wenn man das weiß, kann man die wirklich riesige Befehls- und Optionsreferenz aus den Beispielen in der Doku auf HA zurückübersetzen, um wirklich schicke Charts zu bauen. David, der Autor der Plotly Graph Card (nur der HA Card - nicht von plotly selbst), ist übrigens auf Github erreichbar und sehr hilfsbereit, falls man es doch mal nicht hinbekommt. Es lohnt sich auch, dort im Git mal in den Discussions zu stöbern (sehr viele gute Ideen).

/tom

**scw2wi** · 10.12.2024, 19:28

Zitat von Punker Deluxe Beitrag anzeigen

Bitte auf das ganze mit yaml zu zeigen.

Der Bitte komm ich doch gerne nach, Code ist oben ergänzt.
Ich werde die nächsten Tage auch den Code der restlichen Beiträge ergänzen, bitte nicht ungeduldig sein, wenn das ein paar Tage dauert.

**Amokd0c** · 10.12.2024, 20:11

Ja warum nicht auch so! Sieht klasse aus!

Ich hab Grafana in HA und die InfluxDB historisch geschuldet auf einer sep. VM.
Das Problem bei mir ist die Einbettung der Graphen in die HA Oberfläche, und der anschließende Zugriff dadrauf.
Entweder klappt es bei mir im lokalen LAN, oder nur von extern. Aber beides ging nicht.
Da bin ich noch nicht durchgestiegen warum das so ist!

**Tom Bombadil** · 28.12.2024, 20:22

Mir sind gerade noch ein paar Versuche aus meinen frühen Plotly-Tagen über den Weg gelaufen, die vielleicht auch andere zum 'Herumspielen' brauchen können.

Ausgangssituation: Oft fehlt es ja an vernünftigen Daten für die Plots. Oder einen Tag später sieht der Plot aufgrund geänderter Daten völlig anders aus, und man fängt wieder von vorn an, sich reinzudenken.

Ich habe damals eine Seite mit drei 48h-Plots erstellt, um meine seit vielen Jahren laufende SmartVISU nachzubilden. Als Ausgangsdaten dienten per Developer-Console (F12) mit copy/paste reinkopierte Echtdaten der SmartVISU. Ein JavaScript zieht die Zeitskala konstant hoch, so dass immer der gleiche Grundzustand herrscht. Aufgrund dieses 'Datensimulators' kann man gemütlich die riesige Menge an Plotly-Einstellungen ausprobieren, ohne irgendwelche Echtdaten anzufassen oder auch nur welche zu benötigen. Wenn man sich mal verrannt hat - Ausgangszustand per copy/paste wiederherstellen, fertig.

Hier der Link zur kompletten und detaillierten Plotly-Doku - insbesondere sind im linken Menü die unteren Punkte Layout / Axes and Subplots / Layers interessant. Auch die vielen Optionen für die verschiedenen Diagrammtypen sind dort dokumentiert. Fertige Beispiele für alle Diagrammtypen samt 'Ausprobier-Links' gibt es wie oben schon geschrieben hier.

Aus der Plotly-Doku kann man z.B. den Punkt Layout > Title > Font > Color in HA-YAML wie folgt übertragen:

Code:

layout:
  title:
    font:
     color: blue

Das würde dann einen blauen Diagrammtitel erzeugen usw.

Um die drei Diagramme einzubetten:

die drei Dateien herunterladen (mit jeweils >100kB leider zu groß für KNXUF-Anhänge),
eine neue Seite (Ansicht) vom Typ 'Grid' erstellen,
drei beliebige Elemente draufschmeißen (es spielt keine Rolle, was für welche, oder welche Einstellungen die haben),
die drei Elemente der Reihe nach bearbeiten: auf YAML schalten und copy-paste aus jeweils einer der 3 verlinkten Dateien machen, speichern.

Plot1-YAML Plot2-YAML Plot3-YAML

Das Ergebnis sollte so aussehen (nichts spektakuläres, und auch nur Daten von 48h, aber dauerhaft verfügbar und geeignet zum Rumspielen mit den verschiedenen Möglichkeiten):

image.png

Viel Erfolg und frohes Basteln - bei Fragen: Fragen!

/tom

**scw2wi** · 20.02.2025, 18:07

Ich hab mal meine beiden Lieblings-Graph-Cards (custom: apexcharts-card und custom: plotly-graph) miteinander verglichen und versucht, die gleiche Anzeige zu bekommen. Mein bisheriger Favorit, die apexcharts-card hat sich bei diesem Vergleich nicht immer als vorteilhaft erwiesen, oft lag die plotly-graph card deutlich vorne.

Hier der Vergleich im Detail (oben: apex, unten: plotly), der gesamte Code ist wie immer im Anhang zu finden.

HACS - apexcharts - plotly-graph.png

Ich bekomme von den Wiener Stadtwerken über einen Online-Zugang den Zählerstand übermittelt.
Obwohl ich das 15min Invervall aktiviert habe, sind die übermittelten Zählerstände nur tagesgenau.
Ich hab in beiden Cards daher eine Gruppierung auf 1 Tag mit diff Berechnung und Anzeige über 15 Tage ausgewählt, wobei das in der apexcharts-card nicht wie gewünscht funktioniert. Vermutlich hab ich da noch einen Fehler, denn ich kann mir nicht vorstellen, dass die Karte so etwas Simples nicht kann.
Am Mo 17.Feb gab es einen Ausfall in der Messung, daher zeigen hier beide Karten korrekt 0 an, die plotly-graph card ordnet aber alle Werte erst dem nächsten Tag zu, wobei man das sicher auch noch korrigieren könnte.

HTML-Code:

# apexcharts-card
type: custom:apexcharts-card
graph_span: 15d
series:
  - entity: sensor.at001900
    name: Verbrauch
    type: column
    color: blue
    group_by:
      func: diff
      duration: 1d
      start_with_last: true

# plotly-graph card
type: custom:plotly-graph
hours_to_show: 15d
refresh_interval: 15m
entities:
  - entity: sensor.at001900
    unit_of_measurement: kWh
    type: bar
    marker:
      color: blue
    statistic: sum
    period: day
    filters:
      - delta

Am oberen Ende des Datenbalkens soll der y-Wert ohne Nachkommastellen eingeblendet werden.
Obwohl der Code bei der apexcharts-card etwas einfacher aussieht, gefällt mir die Plotly-Lösung fast sogar noch besser, da ich mehr Möglichkeiten habe.

HTML-Code:

# apexcharts-card
    show:
      datalabels: true
    float_precision: 0

# plotly-graph card
    texttemplate: "%{y:.0f}"
    textposition: outside

Als Tooltip soll sowohl das Datum als auch der Wert angezeigt werden, auch hier ist wieder die Apexcharts-Lösung einfacher und die Plotly-Lösung mächtiger, jedoch auch schwieriger zu lesen und zu erstellen, aber dafür hab ich ja DeepSeek oder die non-China Le Chat Mistral AI.
Der y-Wert wird beim Apexcharts-Tooltip bereits wunschgemäß formatiert, daher gibt es dafür hier keinen Code.

HTML-Code:

# apexcharts-card
  tooltip:
    x:
      format: dd.MMM.yyyy

# plotly-graph card
    hovertemplate: "Datum: %{x|%a %-d.%b.%Y}<br>Verbrauch: %{y:.1f} kWh<extra></extra>"

Der Titel wird in beiden gleich dargestellt, wobei ich bei der apexcharts-card erst etwas experimentieren musste.
Zuerst hab ich den header.title verwendet, der ist aber hartnäckig linksbündig, dann hab ich den apex_config.title ausprobiert, der war einfach zu zentrieren, im Code hab ich zum Vergleich beide stehen lassen. Bei der plotly-graph card hat mir der Titel auf Anhieb gefallen, daher ist das hier ein 1-zeiler.

HTML-Code:

# apexcharts-card
header:
  title: Stromverbrauch pro Tag
  show: false
  show_states: false
  colorize_states: false
apex_config:
  title:
    text: Stromverbrauch pro Tag
    align: center
    style:
      fontSize: 15px
      fontWeight: 400
      fontFamily: Arial
      color: lightgrey

# plotly-graph card
title: Stromverbrauch pro Tag

Bei der X-Achse wollte ich das Datum in einem bestimmten Format, schräggestellt um 45° und (rein testhalber) nur jeden 2. Wert anzeigen.
Außerdem sollen keine Gitterlinien angezeigt werden, was bei der apexcharts-card die Default-Einstellung ist.
Bei der apexcharts-card habe ich 2 verschiedene Möglichkeiten getestet, einmal mit format, das kann aber keine Wochentage, und danach dann mit formatter, das kann eigentlich alles. Die Plotly-Lösung ist deutlich kompakter und zeigt ebenfalls die deutschen Wochentage an.

HTML-Code:

# apexcharts-card
apex_config:
  xaxis:
    type: datetime
    tickAmount: 7
    labels:
      rotate: -45
      rotateAlways: true
      format: d.MMM
      formatter: |
        EVAL: function(value, timestamp) {
          var date = new Date(timestamp);
          var day = date.getDate();
          var month = date.toLocaleString('de-DE', { month: 'short' });
          var weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
          var weekday = weekdays[date.getDay()];
          return weekday + ' ' + day + '.' + month;
        }

# plotly-graph card
layout:
  xaxis:
    tickformat: "%a %-d.%b"
    nticks: 8
    tickangle: -45
    showgrid: false

Bei der y-Achse hab ich mich etwas gespielt und die Einheit zur Zahl dazugeschrieben. Das wäre hier zwar nicht notwendig, aber ich wollte einfach mal die Möglichkeiten kennenlernen.
Der Wert sollte fix bis 20 gehen, 21 ist auch ok, wenn sonst die Beschriftung für 20 nicht angezeigt wird.
Die apexcharts-card konnte ich nicht überreden, die gepunkteten Linien etwas dünner und strichliert darzustellen, da ist vermutlich noch ein Fehler in meinem Code.
Bei der plotly-graph card musste ich mit tickprefix etwas Platz schaffen, damit die Beschriftung nicht zu sehr am Rand klebt.

HTML-Code:

# apexcharts-card
apex_config:
  yaxis:
    - id: kWh
      min: 0
      max: 20
      tickAmount: 4
      forceNiceScale: false
      decimalsInFloat: 0
      opposite: false
      title:
        text: E N E R G I E
      labels:
        formatter: |-
          EVAL:function (value) {
             return value + ' kWh';
           }
  grid:
    yaxis:
      lines:
        show: true
        strokeDashArray: 4
        strokeWidth: 1

# plotly-graph card
layout:
  yaxis:
    range:
      - 0
      - 21
    gridcolor: dimgrey
    gridwidth: 1
    griddash: dash
    title: E N E R G I E
    tickprefix: "  "
    ticksuffix: " kWh"

Ich hab bei beiden Karten eine fixe Gesamthöhe eingestellt und, da meine Beschriftung der Achsen etwas mehr Platz benötigt, diesen bei der plotly-graph card auch entsprechend erweitern müssen.

HTML-Code:

# apexcharts-card
apex_config:
  chart:
    height: 300px

# plotly-graph card
layout:
  height: 300
  margin:
    b: 80
    l: 90

Die plotly-graph card bietet die mächtige Möglichkeit, mit Buttons am rechten Rand zu zoomen und zu scrollen, wenn man das nicht benötigt, muss man diese mit displayModeBar ausblenden.
Mit grid_options.columns.full zeige ich beide Karten über mehrere Grid-Spalten an, die apexcharts-card mag sowas nicht und muss mit disable_config_validation erst dazu überredet werden.

HTML-Code:

# apexcharts-card
experimental:
  disable_config_validation: true
grid_options:
  columns: full

# plotly-graph card
config:
  displayModeBar: false
grid_options:
  columns: full

So, das war mein Vergleich. Ich hoffe, er ist hilfreich für die Entscheidung, welche der beiden Karten man für welche Aufgabe nehmen kann.
Mein neuer Favorit steht jedenfalls fest, ich werde mich in Zukunft sicher mehr mit der plotly-graph card beschäftigen.

Angehängte Dateien

**scw2wi** · 15.03.2025, 12:08

Nachdem ich das Problem mit den fehlenden Daten bisher nicht lösen konnte, und immer wieder Lücken geblieben sind, habe ich mir Grafana angesehen, und damit ist die Lösung trivial.

Grafana - Stromverbrauch pro Tag.png

Hier der Query-Code

HTML-Code:

SELECT difference(mean("value"))
FROM "autogen"."kWh"
WHERE ("entity_id"::tag = 'at001900')
AND $timeFilter
GROUP BY time(1d) fill(linear)

SELECT difference kann zu jedem Wert die Differenz zum Wert des Vortages ermitteln, das konnten die beiden oberen Cards ja auch noch.

Der zusätzliche Trick hier ist dann der Befehl "fill(linear)" der einen fehlenden Wert interpolieren kann, das konnten die anderen Cards nicht leisten.
Ich bekomme nicht jeden Tag den Zählerstand übermittelt, und wenn der Wert fehlt, dann wird der Verbrauch mit dieser Lösung jetzt über 2 Tage gemittelt, und nicht an einem Tag 0 angezeigt und am nächsten Tag der doppelte Wert, wie man es in den Screenshots im oberen Beitrag sieht.

Die Anzeige wird in Grafana komfortabel über ein Optionen-Menü formatiert, wobei es aber nicht in allen Fällen mehr Möglichkeiten gibt als bei den beiden oben betrachteten Cards. Auch in Grafana fehlen bestimmte Möglichkeiten oder sind nicht einfach umzusetzen. Insgesamt ist das Tool aber schon etwas mächtiger, vor allem in Verbindung mit der InfluxDB.

Wie man diese InfluxDB und auch Grafana unter HA recht einfach als Add-On installieren kann folgt in einem eigenen Beitrag.

**henfri** · 16.06.2025, 21:33

Hallo,

ich habe mich heute mit dem Thema auch befasst.
Ich nutze das Grid-Layout und bin daran gescheitert, einen ApexChart oder Plotly-Chart über die volle Bildschirmseite zu strecken. Ist euch das gelungen?

Zu Grafana: Influx und Grafana als Add-On zu installieren ist das Eine. Aber kann man Grafana-Charts nahtlos in das Dashboard integrieren?

Gruß,
Hendrik

**Tom Bombadil** · 16.06.2025, 22:03

Nicht meine schönste Plotly-Arbeit (eher grottenschlecht - muss ich irgendwann nochmal ran), aber: So?

image.png

Seitentyp 'grid', 2x Plotly-Chart, jedes Chart enthält folgenden Code (border-color ist nur während des Programmierens gesetzt, um einen roten Außenrahmen zur Orientierung zu haben):

Code:

card_mod:
  style: |
    ha-card {
      /** --ha-card-border-color: #990000; **/
      --ha-card-border-radius: 0px;
      --ha-card-border-width: 0px;
      --card-mod-icon-color: white;
      width: 95vw !important;
      height: 45vh !important;
      background: transparent;
    }

hth!

/tom

**henfri** · 16.06.2025, 22:27

Hallo Tom,

danke dir!
Das ist jetzt allerdings zu breit.
Vermutlich hast du die Seitenleiste schmal gemacht, wohingegen ich die Seitenleiste Breit habe?
Statt 95% des Bildschirms brauchte ich 100% des rechten Frame, denke ich. Geht das?

Gruß,
Hendrik

**henfri** · 16.06.2025, 22:41

Laut ChatGPT soll dies funktionieren - gut es aber nicht:

Code:

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: repeat(4, 1fr)
  grid-auto-rows: auto
  grid-gap: 8px
cards:
  - type: custom:plotly-graph
    entities:
      - entity: sensor.uvr_tadesigner_wmz_solar_durchfluss
    hours_to_show: 24
    refresh_interval: 10
    view_layout:
      grid-column: span 4

**Tom Bombadil** · 17.06.2025, 14:56

Hmmm, Du willst offensichtlich ein Element über mehrere Spalten hinweg ausgeben. Hab ich über das komplette Seitengrid noch nie gemacht, da ich in solchen Fällen immer eine custom:button-card auf die ganze Seite pappe, nach meinen Vorstellungen aufteile und dann die Einzelelemente in die Grid Areas reinstecke (Prinzip siehe hier - das geht so auch mit einer ganzen Seite). Diese Vorgehensweise bringt weiterhin den Vorteil, dass alles auf der button-card liegende auch mit JS anprogrammiert werden kann.

Mach doch mal eine Skizze, wie die ganze Seite aussehen soll, und was Du wo angezeigt haben willst - vielleicht fällt mir dann noch was ein ...

/tom

**henfri** · 17.06.2025, 19:39

Hallo,

so funktioniert es:

Code:

type: grid
cards:
  - type: heading
    heading: Pufferspeicher
    heading_style: title
  - type: custom:plotly-graph
    entities:
      - entity: binary_sensor.uvr_tadesigner_anf_kessel_zustand_ein_aus
      - entity: sensor.uvr_tadesigner_t_speicher_1_wert
      - entity: sensor.uvr_tadesigner_t_speicher_2_wert
      - entity: sensor.uvr_tadesigner_t_speicher_3_wert
      - entity: sensor.uvr_tadesigner_t_speicher_4_wert
      - entity: binary_sensor.shellyplus1_08b61fcfcd80_input_0_input
      - entity: automation.zirkulation_trigger_durch_prasenz
      - entity: switch.shellyplus1_08b61fcfcd80_switch_0
    hours_to_show: 24
    refresh_interval: 10
    grid_options:
      columns: 36
      rows: 8

column_span: 3

Es sieht dann so aus:
image.png

Gruß,
Hendrik

**henfri** · 17.06.2025, 20:19

Ich habe das jetzt angepasst:
image.png

Folgende Wünsche hätte ich noch:
Die zustände finde ich besser so dargestellt:
image.png

Könnte man ja leicht so umsetzen, aber da komme ich zum zweiten Punkt:
Ich würde gerne die X-Achsen koppeln, wenn ich zoome. Geht das?

Code:

type: grid
cards:
  - type: heading
    heading: Pufferspeicher
    heading_style: title
  - type: custom:plotly-graph
    entities:
      - entity: sensor.uvr_tadesigner_t_speicher_1_wert
        name: Speicher 1
        line:
          color: "#FFD700"
      - entity: sensor.uvr_tadesigner_t_speicher_2_wert
        name: Speicher 2
        line:
          color: "#FFA500"
      - entity: sensor.uvr_tadesigner_t_speicher_3_wert
        name: Speicher 3
        line:
          color: "#FF8C00"
      - entity: sensor.uvr_tadesigner_t_speicher_4_wert
        name: Speicher 4
        line:
          color: "#FF4500"
    hours_to_show: 24
    refresh_interval: 10
    grid_options:
      columns: 36
      rows: 5
  - type: custom:plotly-graph
    entities:
      - entity: sensor.uvr_tadesigner_wmz_solar_durchfluss
        name: Durchfluss
      - entity: sensor.uvr_tadesigner_wmz_solar_momentanleistung
        name: Leistung
      - entity: sensor.uvr_tadesigner_wmz_solar_vorlauftemperatur
        name: Vorlauf
        line:
          color: "#FF7F7F"
      - entity: sensor.uvr_tadesigner_wmz_solar_r_cklauftemperatur
        name: Rücklauf
        line:
          color: "#90EE90"
      - entity: sensor.uvr_tadesigner_solar_1_kollektortemperatur
        name: Kollektortemperatur
        line:
          color: "#FF0000"
    hours_to_show: 24
    refresh_interval: 10
    grid_options:
      columns: 36
      rows: 5
  - type: custom:plotly-graph
    entities:
      - entity: binary_sensor.uvr_tadesigner_umsch_solar_zustand_ein_aus
        name: Puffer oben laden
        line:
          color: "#ADD8E6"
      - entity: binary_sensor.uvr_tadesigner_anf_kessel_zustand_ein_aus
        name: Kessel Anforderung
        line:
          color: "#FFA07A"
    hours_to_show: 24
    refresh_interval: 10
    grid_options:
      columns: 36
      rows: 2
column_span: 3

Gruß,
Hendrik

Ankündigung

HACS Graph-Cards

HACS Graph-Cards

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar