ApexChart cards - Konfiguration als Balkengrafik nicht möglich

[calima]

Hallo zusammen,

ich nutze ApexChart cards v2.1.2, um die historischen Werte einiger Sensoren auf meinen Dashboards anzuzeigen. Da mein Börsenstrompreis-Anbieter u.a. einen Sensor für den Verbrauch und die Kosten der aktuellen Stunde zur Verfügung stellt, wollte ich den Verlauf dieser Werte über die vergangenen Stunden als Balkengrafik darstellen. Allerdings kann ich den chart_type nicht auf column (Balken) umstellen, sondern nur als line (Graphen) oder als area (Graphen mit ausgefüllten Flächen) definieren. Wenn ich versuche, ihn als column zu konfigurieren, friert das Popup für die Einstellungen ein.

type: custom:apexcharts-card
header:
  show: true
  title: tibber-Bruttokosten
  show_states: true
  colorize_states: true
now:
  show: false
  label: Now
series:
  - entity: sensor.current_consumption_cost_adjusted
    type: line
    stroke_width: 2
    extend_to: end
    unit: €/kWh

So sieht der Chart als Linie aus:


Wer kann helfen?
Vielen Dank!

 

[RudiP]

Hier mal mein Code, der mir den Börsenstrompreis mittels Balken Graph anzeigt. Vergleich das mal mit deinem Code.

type: custom:apexcharts-card
header:
  show: false
graph_span: 48h
span:
  start: day
now:
  show: true
  label: Now
color_list:
  - var(--primary-color)
series:
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: column
    curve: smooth
    extend_to: false
    show:
      extremas: time
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_ct_per_kwh];
      }).slice(23,48);
    color_threshold:
      - value: 0
        color: "#186ddc"
      - value: 0.155
        color: "#04822e"
      - value: 0.2
        color: "#12A141"
      - value: 0.25
        color: "#79B92C"
      - value: 0.3
        color: "#C4D81D"
      - value: 0.35
        color: "#F3DC0C"
      - value: 0.4
        color: red
      - value: 0.5
        color: green
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: column
    curve: straight
    extend_to: end
    show:
      extremas: time
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_ct_per_kwh];
      }).slice(47,70);
    color_threshold:
      - value: 0
        color: "#186ddc"
      - value: 0.155
        color: "#04822e"
      - value: 0.2
        color: "#12A141"
      - value: 0.25
        color: "#79B92C"
      - value: 0.3
        color: "#C4D81D"
      - value: 0.35
        color: "#F3DC0C"
      - value: 0.4
        color: red
      - value: 0.5
        color: magenta
experimental:
  color_threshold: true
yaxis:
  - id: uurprijs
    decimals: 2
    apex_config:
      title:
        text: cent/kWh
      tickAmount: 4
apex_config:
  legend:
    show: false
  tooltip:
    x:
      show: true
      format: HH:00 - HH:59

 

[calima]

Vielen Dank! Ich hatte schon versucht, in anderen Beispielkonfigurationen von ApexChart cards als entity einfach die Bezeichnung meines Sensors einzusetzen. Dann erscheinen zwar Balken anstatt einer Linie, aber mit falschen Werten. Ich denke, dass ich zusätzlich ein Script-Snippet für data_generator: > einsetzen muss, habe aber keine Ahnung, wie es aussehen muss.

 

[calima]

Nach einiger Recherche ist es mir gelungen, ein Kombi-Diagramm mit Linie und Balken aus zwei Sensoren zu erstellen. Für den Bug beim Balkendiagramm in ApexChart cards wurde im September auf github ein bug issue aufgemacht. Der Fehler ist aber wohl noch nicht beseitigt.

 

[RudiP]

Komisch. Wieso bekomme ich dann Balken angezeigt ?

Wird mit dem Code oben so dargestellt.

 

[RudiP]

Wenn ich deinen Code nehme und durch meinen Sensor ersetze und type: auf column setze, erhalte ich das.

Ein klares Balkendiagram, da friert nix ein.

 

[calima]

Hmmm... bei mir geht es nicht, und ich denke, dass es an meinem Sensor liegt, der durch eine Template-Definition erweitert wird. Mit anderen Sensoren bekomme ich nämlich auch Balken angezeigt. Auf jeden Fall kann ich den Fehler, der in diesem bug issue beschrieben wird, jederzeit reproduzieren:
https://github.com/RomRider/apexcharts-card/issues/776

 

[Claudius]

Erst mal schönen Dank an RudiP für die Anleitung.
Ich habe den code aus der Anleitung verwendet und habe sofort dieses Bild erhalten:
Das fand ich schon einmal recht gut!


Heute Morgen sah das leider nicht mehr so überzeugend aus:

Die EPEX Spot Data kommen alle Stunde...
Eine Idee?
Dank und Gruß

 

[RudiP]

Hmmm, Daten kommen ja, so wie ich das sehe. Er zeigt ja einen Preis an. Aber wieso 14.03 ????
Für Übermorgen kann er gar keine Daten haben, die werden erst morgen Nachmittag ermittelt.

 

[HA-DAU]

Hallo zusammen,

bei mir scheint aber alles zu stimmen.



Da wir aber schon bei dem Thema sind.
Wie bekomme ich die Legende vom Datum weiter nach unten gesetzt?
Irgendwie sieht das obere Datum abgeschnitten aus.
Hat da jemand eine Idee?



Ich habe das mal so geregelt.

type: custom:apexcharts-card
header:
  show: true
  title: Test Strompreis heute und morgen
  show_states: true
  colorize_states: true
graph_span: 48h
span:
  start: day
now:
  show: true
  label: Jetzt
color_list:
  - var(--primary-color)
series:
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: column
    curve: smooth
    extend_to: false
    show:
      extremas: time
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_per_kwh]; }).slice(23,48);
    color_threshold:
      - value: 0
        color: "#186ddc"
      - value: 0.155
        color: "#04822e"
      - value: 0.2
        color: "#12A141"
      - value: 0.25
        color: "#79B92C"
      - value: 0.3
        color: "#C4D81D"
      - value: 0.35
        color: "#F3DC0C"
      - value: 0.4
        color: red
      - value: 0.5
        color: green
  - entity: sensor.epex_spot_data_net_price
    yaxis_id: uurprijs
    float_precision: 2
    type: column
    curve: straight
    extend_to: end
    show:
      extremas: time
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), entry.price_per_kwh]; }).slice(47,70);
    color_threshold:
      - value: 0
        color: "#186ddc"
      - value: 0.155
        color: "#04822e"
      - value: 0.2
        color: "#12A141"
      - value: 0.25
        color: "#79B92C"
      - value: 0.3
        color: "#C4D81D"
      - value: 0.35
        color: "#F3DC0C"
      - value: 0.4
        color: red
      - value: 0.5
        color: magenta
experimental:
  color_threshold: true
yaxis:
  - id: uurprijs
    decimals: 2
    apex_config:
      title:
        text: €/kWh
      tickAmount: 4
apex_config:
  legend:
    show: false
  tooltip:
    x:
      show: true
      format: HH:00 - HH:59

 

[Claudius]

Mit diesem Code sieht es bei mir so aus:
Ist das plausibel?