Wie verwende ich den card-templater für einen ApexChart?

Dashboard/Cards/Frontend
1

Hallo zusammen,

wie verwende ich in HA den “card-templater” um einen ApexChart auf einem Dashboard in HA anzuzeigen?

Im Moment verwende ich in meinen Dashboard direkt die ”apexcharts-card”.
Ich möchte innerhalb der ”apexcharts-card” Variablen oder Templates verwenden können um z.B. den “graph_span” dynamisch zu gestalten. Ich habe viele Beiträge gefunden wo das gemacht wird, aber immer mit dem “card-templater”.

Da ich bisher nicht gefunden habe wie ich den einsetze, habe ich die Charts mehrfach in verschiedenen Varianten im Dashboard platziert und mache immer nur einen über die Sichtbarkeits-Templates sichtbar.

Viele Grüße

2

Moin,

den Satz verstehe ich schon nicht, in der Dokumentation von ApexChart steht, dass der Teil von card-template gleich ganz vorne vom Dashboard yaml geschrieben wird, geht da im Raw Modus, das ist dann aber nicht um ein ApexChart anzuzeigen, sondern um es dann in einem ApexChart zu nutzen.

Das ist der zweite Satz, den ich nicht verstehe :thinking:
Wenn Du Beispiele gefunden hast, dann muss man die doch nur anpassen, und es sind auch noch Beispiele die card-templates nutzen, so wie Du in der Überschrift, nach fragst :thinking:

Hier eine Einschränkung von allen HACS Charts, Graphen, diese gehen auf die Historien Tabellen in HA, daher kann man da nur die, im Standard, letzten 10 Tage zurückreichenden Werte zugreifen.
Die einzige Karte, die auf die Statistiktabellen zugreift, ist die HA Statistikkarte!

Wieso, Du hast doch geschrieben, dass Du viele Beispiele / Beiträge gefunden hast :wink:

Also zeige doch einfach mal, was DU schon hast, bzw. was Du Dir vorstellst.

VG
Bernd

3

Hallo Bernd,

dann versuche mal mein Problem konkret zu beschreiben.

Mein Apex-Chart im Dashboard beginnt mit: “type: custom:apexcharts-card.”Weiter unten möchte ich den Wert von graph_span: lediglich dynamisch zwischen 48h und 24h wechseln lassen. Dazu habe ich folgendes Beispieltemplate gefunden: “{{ ‘48h’ if state_attr(‘sensor.tibber_prices_quarter_hourly’, ‘tomorrow’) != else ‘24h’ }}” Führe ich das als Template in einem Helfer aus funktioniert das. Eingesetzt in meiner ApexCharts-Karte funktioniert das nicht, egal welche Schreibweise ich nutze.Ich vermute an der Stelle ist kein Template möglich, sondern eben nur die vorgefertigten Wert zB 24h und 48h.

Dann ist mir aufgefallen, dass in allen Beispielen die ich gefunden habe von dem “card-templater” die Rede ist.
In den Beispielen beginnt die Konfiguration immer mit “type: ‘custom:card-templater’“ und eben nicht wie bei mir mit “type: custom:apexcharts-card.”

Deswegen meine Frage nach dem “type: custom:apexcharts-card.”

Im Moment habe ich eben zwei komplette Graphen im Dashboard untergebracht, einen mit 24h und einen mit 48. Zusätzlich steure ich die Sichtbarkeit der Graphen über den erwähnten Helfer.
Das Ergebnis ist das was ich möchte, aber eben mit zwei Graphen die abwechselnd angezeigt werden und nicht mit einem der sein Aussehen über einen dynamischen Wert graph_span ändert.

Ich vermute inzwischen, dass ich für den “custom:card-templater” noch etwas in HA installieren muss. Ich lese da gerade etwas card-mod.

Viele Grüße

4

Moin,

und darauf habe ich geantwortet, dass das nicht in der Karte, sondern an den Anfang vom Dashboard kommt, den du dazu mittels Raw Editor öffnen musst, was auch so in der Dokumentation steht.

Deine Überschrift sagt aus, dass du card-template einsetzten möchtest, auch dazu steht alles in der Dokumentation :wink:

Aber fangen wir mal an,

Raw Editor für Dashboard

grafik

grafik
grafik294×235 12.3 KB

grafik
grafik649×425 28.1 KB

Die ApexChart Karte

in der ApexChart Karte kann man dann darauf verweisen, oder in jeder anderen Karte.

Aber ob das halt der richtige Weg ist :man_shrugging:

Ich habe das mal versucht zu Bauen

type: custom:config-template-card
entities:
  - input_number.input_number_history_hours
card:
  type: custom:stack-in-card
  cards:
    - type: custom:apexcharts-card
      graph_span: ${states["input_number.input_number_history_hours"].state +'h'}
      header:
        show: true
        title: WP Leistung
      series:
        - entity: sensor.gefrierschrank_energy_power_3
          type: line
    - type: entities
      entities:
        - entity: input_number.input_number_history_hours

Daraus wird dann so etwas

grafik
grafik1074×728 83.1 KB

Wobei der Schieberegler ein Zeitwerthelfer ist.

VG
Bernd

1 „Gefällt mir“
5

Hallo Bernd,

danke für deine Hinweise, verstanden. Allerdings fehlte mir der wichtigste Schritt den ich jetzt gemacht habe. Die Installation vom Lovelace Card Templaterin in HACS. Jetzt komme ich klar..

Danke für deine Hilfe :folded_hands: :smiling_face_with_sunglasses::wink:.

Viele Grüsse

Johannes

6

Hallo Bernd, chapeau, ziehe den Hut. 2 KI haben sich daran die Zähne ausgebissen und mich völlig entnervt. Dein einfaches Beispiel hat in 5 min mein Problem gelöst.
Vielen :heart: Dank.
Carlos

7

Moin,

dann mein neuer Footer :slight_smile:

Mensch 1 : KI 0

VG
Bernd