ApexChart Darstellungsfragen

Dashboard/Cards/Frontend
1

Hallo,
eine Frage zu dem ApexChart.
Wie bekomme ich es hin, dass der Graph nur aktuelle Aufzeichnungen anzeigt. Bei mir ist zieht er eine komplette Linie bis zum Ende des Tages durch.
grafik

type: custom:apexcharts-card
experimental:
  color_threshold: true
  brush: true
graph_span: 20h
span:
  start: day
  offset: '+6'
header:
  show: true
  title: PV aktuell
  show_states: true
  colorize_states: true
apex_config:
  chart:
    height: 175px
  legend:
    show: false
  grid:
    strokeDashArray: 0
    borderColor: rgb(52,52,52)
all_series_config:
  type: area
  curve: smooth
  stroke_width: 2
  group_by:
    func: avg
    duration: 1min
  color_threshold:
    - value: 0
      opacity: 0.2
    - value: 1000
      opacity: 0.7
    - value: 3000
      opacity: 0.7
series:
  - entity: sensor.pv_aktuell
    float_precision: 0

Eigentlich soll es so aussehen:
grafik

Zusätzlich funktioniert auch nicht, dass man die Aufzeichnung ab einer bestimmten Uhrzeit angezeigt bekommt. In der Hilfe steht es so:
Display 12h between 06:00 and 18:00 of the current day

type: custom:apexcharts-card
graph_span: 12h
span:
  start: day
  offset: +6h

Funktioniert aber nicht.
Hat jemand eine Idee?
Danke.

2
  1. in deinem ersten code noch extend_to: now einfügen.
  2. hab ich auch noch nicht raus gefunden.
3

Perfekt, vielen Dank.

4

Den Offset ohne Hochkommas , so wie in der Hilfe steht:

  • offset: +6h

Bei mir funktioniert das einwandfrei.

Gruß Jörg

5

Oh mein Gott, wie blind bin ich denn. Ich hatte ein Beispiel mit ‘-6’ und hatte das komplett übersehen.
Vielen Dank.

6

Ich habe zu Danken! Habe den Code fast 1:1 für meine PV Anlage übernommen :grinning:

7

Passt das im auch Sommer noch?

8

dann musst Du die Werte ändern, zum Beispiel von 5 bis 21 Uhr
offset: +5h
graph_span: +16h
Ideal wäre, wenn man beide Werte mit Sonnenaufgang / Untergang versehen könnte.
Eventuell geht das vielleicht, habe ich aber nicht geprüft.

9

Genau das meine ich!

10

Ich schließe mich dem Thema mit einer weiteren Frage zur Darstellung an. Ich würde gerne unter meinem Chart Werte weiterer Sensoren ausgeben, die nichts mit dem Chart direkt zu tun haben. Allerdings komme ich nicht auf die Lösung. Wie muss ich den Code anpassen, sodass ich unten weitere Werte von verschiedenen Sensoren anzeigen lassen kann? Die Werte sind: AVG heute, Min heute, Max heute, AVG morgen, Min morgen, Max morgen. Der Code des Charts sind aktuell so aus:

type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  unit: Cent/kWh Jetzt
apex_config:
  grid:
    show: true
    borderColor: "#E0E0E0"
  chart:
    height: 260px
  tooltip:
    enabled: true
    followCursor: false
    x:
      show: false
    fixed:
      enabled: true
  annotations:
    yaxis:
      - "y": 33
        borderColor: "#FF0000"
        strokeDashArray: 4
        opacity: 1
        label:
          borderColor: "#FF0000"
          style:
            color: "#fff"
            background: "#FF0000"
header:
  show: true
  title: Strompreisentwicklung Heute/Morgen
  show_states: true
  colorize_states: true
  standard_format: false
graph_span: 48h
now:
  show: true
  color: 9E9E9E
span:
  start: day
series:
  - entity: sensor.tibber_prices
    show:
      in_header: before_now
      name_in_header: false
    color_threshold:
      - value: 0
        color: 4DD0E1
      - value: 10
        color: 26A69A
      - value: 15
        color: 4CAF50
      - value: 20
        color: 7CB342
      - value: 25
        color: FBC02D
      - value: 30
        color: EF6C00
      - value: 40
        color: B71C1C
    type: line
    curve: stepline
    extend_to: false
    stroke_width: 3
    float_precision: 1
    color: 0153A4
    data_generator: |
      const noon = new Date();
      noon.setHours(0, 0, 0, 0);
      const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
      const data = [];
      for(let i = 0; i < prices.length; i++) {
        data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100]);
      }
      return data;

Das Chart sie so aus:
grafik

11

im abschnitt

apex_config:
  legend:
    show: true

und im folgenden Abschnitt

series:
  - entity: sensor.avg_heute
    show:
      in_chart: false

damit hast du die Legende des weiteren Entities aber kein Diagramm.
Vermutlich musst du auch noch in_header: false setzen für die Dinge die nur in der Legende auftauchen sollen.

12

Vielen Dank für die schnelle Rückmeldung! Ich schaffe es leider nicht die Werte unter dem Chart anzeigen zu lassen.
Wenn ich header auf false setze, bekomme ich nichts mehr angezeigt. Mein Code sieht jetzt so aus. Bis auf den gelb markierten Wert sollen alle Werte unter dem Chart angezeigt werden. Hast du noch eine Idee wie es klappen könnte?
grafik

type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  unit: Cent/kWh
apex_config:
  grid:
    show: true
    borderColor: "#E0E0E0"
  chart:
    height: 260px
  tooltip:
    enabled: true
    followCursor: false
    x:
      show: false
    fixed:
      enabled: true
  annotations:
    yaxis:
      - "y": 33
        borderColor: "#FF0000"
        strokeDashArray: 4
        opacity: 1
        label:
          borderColor: "#FF0000"
          style:
            color: "#fff"
            background: "#FF0000"
  legend:
    show: true
    position: bottom
    horizontalAlign: center
    floating: false
    offsetY: 10
header:
  show: true
  title: Strompreisentwicklung Heute/Morgen
  show_states: true
  colorize_states: true
  standard_format: false
graph_span: 48h
now:
  show: true
  color: 9E9E9E
span:
  start: day
series:
  - entity: sensor.tibber_prices
    show:
      in_header: before_now
      name_in_header: false
    color_threshold:
      - value: 0
        color: 4DD0E1
      - value: 10
        color: 26A69A
      - value: 15
        color: 4CAF50
      - value: 20
        color: 7CB342
      - value: 25
        color: FBC02D
      - value: 30
        color: EF6C00
      - value: 40
        color: B71C1C
    type: line
    curve: stepline
    extend_to: false
    stroke_width: 3
    float_precision: 1
    color: 0153A4
    data_generator: |
      const noon = new Date();
      noon.setHours(0, 0, 0, 0);
      const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
      const data = [];
      for(let i = 0; i < prices.length; i++) {
        data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100]);
      }
      return data;
  - entity: sensor.tibber_avg_heute
    name: AVG heute
    color: "#000000"
    show:
      in_chart: false
  - entity: sensor.tibber_min_heute
    name: Min heute
    color: "#000000"
    show:
      in_chart: false
  - entity: sensor.tibber_max_heute
    name: Max heute
    color: "#000000"
    show:
      in_chart: false
  - entity: sensor.tibber_avg_morgen
    name: AVG morgen
    color: "#000000"
    show:
      in_chart: false
  - entity: sensor.tibber_min_morgen
    name: Min morgen
    color: "#000000"
    show:
      in_chart: false
  - entity: sensor.tibber_max_morgen
    name: Max morgen
    color: "#000000"
    show:
      in_chart: false
13

ah verdampt, er nimmt die legend mit weg wenn man in_chart: false definiert.

dann bleibt dir nur die in_chart: false zeilen wieder zu entfernen und dafür bei den Dingen in denen du keine Kurve sehen willst, aber die Legende trotzdem ein

stroke_width: 0

zu benutzen.
du musst dann aber vermutlich mit

tooltip:
  enabledOnSeries:
    - 0

rumprobieren sonst zeigt er dir natürlich für alle (auch die nicht sichtbaren Kurven) einen Tooltip an. Ich glaube das enabled: true muss dann weg, bin mir aber grad nicht sicher zumal das auch nicht immer klappt. Aber du hast dann zumindest mal die Legends für die weiteren entitäten.

Edit: aber irgendwie mag dein charts das alles nicht. Ich versuch grad rauszufinden warum nicht. Liegt aber wohl an den Entitäten die ich mal probeweise verwenden wollte.

14

Was ist wenn du einen Vertical Stack oder eine Vertical Stack in Card benutzt und die Werte einfach mittels Entity-Card drunter setzt? Erspart dir das rumfrickeln.

15

Danke euch! Ich werde es mit einer Vertical Stack Karte darunter packen.