Apex Chart aus JSON Daten

Allgemein
1

Hallo

ich verzweifele gerade mit der Gestaltung meiner Apex Karte. Ich möchte meine Wetterstationsdaten, die ich schon in mehreren JSON Daten aufbereitet habe, in Apex ersichtlich machen.

Bis auf Loading bzw einen Wert vor einer Woche komme ich rüber hinaus, auch GPT hilft mir nicht weiter. Habt ihr ne Idee?

PS: Bin totaler Anfänger, habe momentan alles mit ner KI gemacht.

Vielen Dank

> type: custom:apexcharts-card
> header:
>   show: true
>   title: Temperatur Test
> graph_span: 24h
> series:
>   - entity: sensor.time
>     name: Temperatur
>     type: line
>     data_generator: >
>       const url = "/local/wetter/JSON/temperatur_ewig.json?v=" +
>       Math.floor(Date.now()/60000);
> 
>       return fetch(url, { cache: "no-store" })
>         .then(r => r.json())
>         .then(json => {
>           const rows = json?.verlauf ?? [];
>           console.log("Apex RAW:", rows.slice(0,5)); // nur erste 5 Zeilen loggen
> 
>           // OHNE Filter, nur Timestamps nach Sekunden wandeln
>           return rows.map(([ts, val]) => {
>             const n = Number(ts);
>             let t;
>             if (n < 1e11) {
>               t = n * 1000;   // Sekunden → ms
>             } else {
>               t = n;          // Millisekunden
>             }
>             return [Math.floor(t/1000), Number(val)];
>           });
>         })
>         .catch(err => { console.error("Apex ERROR:", err); return []; });
> apex_config:
>   xaxis:
>     type: datetime
>     labels:
>       format: HH:mm
>

so ist die Json aufgebaut:

{“verlauf”: \[\[1752483000000, 30.0\], \[1752483060000, 29.0\], \[1752483600000, 30.0\], \[1752484200000, 30.0\], \[1752484800000, 29.0\], \[1752485400000, 29.0\], \[1752486000000, 31.0\],….

:crayon:by HarryP:

. Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)
. Code-/Logzeilen formatiert (bitte immer in </> einbinden)
. s.a.: (Neues Update & Features - Hier in der Community 🫶)

3

Moin,

na ich hoffe mal nicht, dass die KI dir diesen Code so ausgespuckt hat, denn so kann man den hier nicht verwenden, wegen der ganzen > am Anfang :wink:

Sauberer Code sieht so aus

type: custom:apexcharts-card
header:
  show: true
  title: Temperatur Test
graph_span: 24h
series:
  - entity: sensor.time
    name: Temperatur
    type: line
    data_generator: |
      const url = "/local/wetter/JSON/temperatur_ewig.json?v=" +
      Math.floor(Date.now()/60000);

      return fetch(url, { cache: "no-store" })
        .then(r => r.json())
        .then(json => {
          const rows = json?.verlauf ?? [];
          console.log("Apex RAW:", rows.slice(0,5)); // nur erste 5 Zeilen loggen

          // OHNE Filter, nur Timestamps nach Sekunden wandeln
          return rows.map(([ts, val]) => {
            const n = Number(ts);
            let t;
            if (n < 1e11) {
              t = n * 1000;    // Sekunden → ms
            } else {
              t = n;           // Millisekunden
            }
            return [Math.floor(t/1000), Number(val)];
          });
        })
        .catch(err => { console.error("Apex ERROR:", err); return []; });
apex_config:
  xaxis:
    type: datetime
    labels:
      format: HH:mm

VG
Bernd

P.S.:

keine Doppelposts, Du hättest Deinen ersten Post editieren können, da gibt es einen kleinen Stifft
grafik

4

Hab den Code so nur aus meinen Dashboard kopiert. Keine Ahnung wie die da rein kamen -.-

5

Moin,

ich auch nicht, kann an Windows, Browser oder sonst was liegen :man_shrugging:

Du scheinst einmal zu viel durch 1000 zu teilen

type: custom:apexcharts-card
header:
  show: true
  title: Temperatur Test
graph_span: 24h
series:
  - entity: sensor.time
    name: Temperatur
    type: line
    data_generator: |
      const url = "/local/wetter/JSON/temperatur_ewig.json?v=" +
      Math.floor(Date.now()/60000);

      return fetch(url, { cache: "no-store" })
        .then(r => r.json())
        .then(json => {
          const rows = json?.verlauf ?? [];
          console.log("Apex RAW:", rows.slice(0,5));

          return rows.map(([ts, val]) => {
            const n = Number(ts);
            let t;
            if (n < 1e11) {
              t = n * 1000;    // Sekunden → ms
            } else {
              t = n;           // Millisekunden
            }
            // Hier war der Fehler: Das Ergebnis soll in Millisekunden sein,
            // daher wird nicht durch 1000 geteilt.
            return [t, Number(val)];
          });
        })
        .catch(err => { console.error("Apex ERROR:", err); return []; });
apex_config:
  xaxis:
    type: datetime
    labels:
      format: HH:mm

Kann mich aber auch täuschen, ist nur geraten :slight_smile:

VG
Bernd

6

Weiter als wie so komme ich nicht, seit tagen:

image
image1600×900 142 KB

7

Moin,

dazu muss ich erst einmal wissen, was Du erreichen möchtest, welchen Zeitraum soll den die Apex Chat Karte umfassen.
Was sind das für Temperaturwerte, mit , oder . mit oder ohne °C, kannes sein, das der Datengenerator da keine Zahl herausbekommt?

type: custom:apexcharts-card
header:
  show: true
  title: Temperatur Test
graph_span: 24h
series:
  - entity: sensor.time
    name: Temperatur
    type: line
    data_generator: |
      const url = "/local/wetter/JSON/temperatur_ewig.json?v=" +
      Math.floor(Date.now()/60000);

      return fetch(url, { cache: "no-store" })
        .then(r => r.json())
        .then(json => {
          const rows = json?.verlauf ?? [];
          console.log("Apex RAW:", rows.slice(0,5));

          return rows.map(([ts, val]) => {
            const n = Number(ts);
            let t;
            if (n < 1e11) {
              t = n * 1000;    // Sekunden → ms
            } else {
              t = n;           // Millisekunden
            }
            
            // Die neue Logik für die Temperaturwerte
            let cleanedVal = String(val).replace(',', '.').replace(/[^\d.]/g, '');
            
            return [t, Number(cleanedVal)];
          });
        })
        .catch(err => { console.error("Apex ERROR:", err); return []; });
apex_config:
  xaxis:
    type: datetime
    labels:
      format: HH:mm

Auch wieder nur geraten, mir fehlen einfach daten um das selbst nachzustellen.
Weil Du beim Kopieren und einfügen hier, auch probleme hast, bin ich mir auch nicht sicher ob das json korrekt ist sind das grade Anführungszeichen im json also " nicht etwa “ weil diese wären im json falsch, kann aber auch beim Kopieren aus Windows, oder dem Browser kommen!

Du kannst die json Datei mal durch einen json linter schicken

grafik
grafik1773×865 44.7 KB

VG
Bernd

8

Ja möchte eben ein Dashboard gestalten, von meiner Wetterstation. Ich hole mir die Daten von der Wundergroud HACS Integration. Wenn ich auf das Temp Symbol klicke,dass habe ich soweit aufgebaut, sollen 5 Reiter erscheinen, das funktioniert ja soweit, (Tag, Woche, Monat, Jahr, Ewig). Tag fängt um 0:00 an usw. Der Chart ist rechts immer der letzte Verfügbare Wert aus den Sensor, klappt auch. Nur will ich, für die Charts, vorallem, Jahr und Ewigkeit, aus einer Json Datei ziehen, weil die Werte Systemintern auch nach einer Zeit gelöscht werden, was ich so nachgelesen habe, dadurch die JSON. :slight_smile:

Jetzt ärgere ich mich schon ein paar Tage, dass die Apex KArte nicht aus der Datei ladet… Sozusagen, dass Grundgerüst steht :slight_smile:

image
image1600×900 55.7 KB

9

Moin,

liegt vielleicht daran das ich heute um 2:30 Uhr aus dem Bettgefallen bin, aber ich kapiere es nicht :thinking:
Zumal Wetterdaten von HA Langzeit gespeichert werden :thinking:

Ich kenne das von APIs, gerade bei den Wetterdaten, so, dass man da nicht an die Jahreswerte herankommt, sondern eigentlich nur an die, sagen wir mal letzten 24 Stunden.
Sammelst Du also täglich die Wetterdaten in einer eigenen json-Datei?

Ich bekomme die Daten über DWD und meine Daten werden von HA Langzeit gespeichert, das Problem dabei ist, dass Apex standardmäßig nur auf die historischen Daten, also bei mir nur auf die 10 Tage schaut, Apex ist nicht auf die Statistikdaten = Langzeitdaten zuzugreifen.

Aber ich bin jetzt doch etwas zu müde um mir das Hirn noch zu verrenken, sorry.

VG
Bernd

10

Wird auf Ewig gespeichert? Ich hole sie mir eben von Wundergroud API. Ich Protokolliere sie auch schon in eine CSV Datei.

Aber fürs Optische, eben auch ein geniales Dashboard,da ich in der Annahme bin, da die Daten mal gelöscht werden, muss ich eben auf JSONs ausweichen.

So wurde es mir von Div KIs empfohlen.

Lass mich aber von was besseren belehren. :wink:

11

Moin,

nein belehren, oder war es beleeren :thinking:, will ich nicht, hast Du andere Sensoren in HA die Temperaturen ausgeben, dann kannst Du das ja im Verlauf verfolgen.

Beispiel, dieses Jahr

grafik
grafik2555×585 228 KB

Beispiel, gleucger Sensor aber von dem Zeitpunkt an wo er ins System gekommen ist

grafik
grafik2555×585 203 KB

Aber wie gesagt, bin etwas müde, daher heute keine Gehirnakrobatik mehr :slight_smile:

VG
Bernd

12

Verständlich, dass mit der integrierten habe ich mir auch angesehen. Hier ist ein Beispielfoto, wie ich es für jeden Wert haben möchte, bzw ich mir vorstelle :smiley:

:

image
image1600×900 187 KB