# Home Assistant: Die Zukunft enthüllen: Prognosedaten ohne Grafana visualisieren!

**URL:** <https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149>\
**Category:** Dashboards\
**Tags:** apex-chart-card, dashboard, homeassistant\
**Created:** [9. Dezember 2024 um 14:41 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149 "2024-12-09T14:41:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![smarthomeandmore](https://community-smarthome.com/user_avatar/community-smarthome.com/smarthomeandmore/32/176_2.png) [@smarthomeandmore](https://community-smarthome.com/u/smarthomeandmore)\
**Post date:** [9. Dezember 2024 um 14:41 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149/1 "2024-12-09T14:41:42Z")

</div>

![image](https://community-smarthome.com/uploads/default/original/1X/3c29f493892764302f59551313432fea22cee1b9.jpeg)  
[Home Assistant: Die Zukunft enthüllen: Prognosedaten ohne Grafana visualisieren!](https://youtu.be/R0knPiJk3ts)

Du hast dich vielleicht auch schon gefragt, wie du Forecast Daten auslesen kannst und diese  
ohne Grafana direkt in Home Assistant visualisieren kannst ?  
Dieses Tutorial zeigt dir den Umgang mit der HACS Erweiterung Apex-Chart-Card und zeigt auch noch, wie man Daten aus einem Forecast verarbeiten kann.

---

<div class="post-metadata">

**Author:** ![Timo](https://community-smarthome.com/letter_avatar_proxy/v4/letter/t/c4cdca/32.png) [@Timo](https://community-smarthome.com/u/Timo)\
**Post date:** [19. Januar 2025 um 11:41 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149/2 "2025-01-19T11:41:59Z")

</div>

Hallo

Habe die Apex Karte im Einsatz. Bei mir ist die nur so schmal höhe kann ich ja einstellen.  
Aber wie geht die Breite ?

Gruß Timo

---

<div class="post-metadata">

**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\
**Post date:** [19. Januar 2025 um 11:47 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149/3 "2025-01-19T11:47:56Z")

</div>

müsste doch über die columuns (layout) funktionieren.

```auto
grid_options:
  columns: full
  rows: auto

```

oder mit beliebigen Zahlen

```auto
grid_options:
  columns: 9
  rows: 3

```

---

<div class="post-metadata">

**Author:** ![Timo](https://community-smarthome.com/letter_avatar_proxy/v4/letter/t/c4cdca/32.png) [@Timo](https://community-smarthome.com/u/Timo)\
**Post date:** [19. Januar 2025 um 14:28 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149/4 "2025-01-19T14:28:15Z")

</div>

die Apex card hat nur yaml

wo müsste das dann hin ?

```auto
type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  unit: Cent/kWh
apex_config:
  grid:
    show: true
    borderColor: "#E0E0E0"
  chart:
    height: 300px
  tooltip:
    enabled: true
    followCursor: false
    x:
      show: false
    fixed:
      enabled: true
header:
  show: true
  title: Strompreis
  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
    name: Preis
    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: 2
    float_precision: 3
    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;

```

height ist die höher sollte da nicht die breite dabei ?

---

<div class="post-metadata">

**Author:** ![meins57](https://community-smarthome.com/user_avatar/community-smarthome.com/meins57/32/406_2.png) [@meins57](https://community-smarthome.com/u/meins57)\
**Post date:** [19. Januar 2025 um 14:35 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149/5 "2025-01-19T14:35:06Z")

</div>

ich habe es bei anderen Karten die nur per Yaml konfiguriert werden einfach ans Ende gepackt. So wie @jayjojayson den Code gepostet hat.  
Probier es einfach mal.

---

<div class="post-metadata">

**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\
**Post date:** [19. Januar 2025 um 14:43 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149/6 "2025-01-19T14:43:18Z")

</div>

Ja genau, einfach am Ende einfügen. Ohne Leerzeilen davor.

---

<div class="post-metadata">

**Author:** ![Timo](https://community-smarthome.com/letter_avatar_proxy/v4/letter/t/c4cdca/32.png) [@Timo](https://community-smarthome.com/u/Timo)\
**Post date:** [19. Januar 2025 um 15:18 UTC](https://community-smarthome.com/t/home-assistant-die-zukunft-enthuellen-prognosedaten-ohne-grafana-visualisieren/149/7 "2025-01-19T15:18:18Z")

</div>

> [@jayjojayson](#):
>
> ```auto
> grid_options:
> columns: 9
> rows: 3
> 
> ```

```auto
type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  unit: Cent/kWh
apex_config:
  grid:
    show: true
    borderColor: "#E0E0E0"
  chart:
    height: 300px
  tooltip:
    enabled: true
    followCursor: false
    x:
      show: false
    fixed:
      enabled: true
header:
  show: true
  title: Strompreis
  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
    name: Preis
    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: 2
    float_precision: 3
    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;
grid_options:
  columns: 9
  rows: 3

```

nö geht nicht kommt fehler