Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor
  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum
donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com)

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.4k
  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.1k
  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.5k

Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com)

Geplant Angeheftet Gesperrt Verschoben Visualisierung
39 Beiträge 5 Kommentatoren 1.2k Aufrufe 9 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • T Tino 0

    Hallo,
    jahrelang hatte ich in FHEM ein Wetterdiagramm mit Icons über das FTUI Widget Chart – FHEMWiki im Einsatz.
    Nach dem Wechsel zu ioBroker fand ich keine vergleichbare Möglichkeit, ein solches Diagramm mit Icons darzustellen. Mit Hilfe von ChatGPT habe ich schließlich eine funktionierende Lösung entwickelt.

    Hier ist das Ergebnis.
    Screenshot 2025-11-25 151709.png Screenshot 2025-11-25 151723.png
    Screenshot 2025-11-25 171101.png Screenshot 2025-11-25 160239.png

    Voraussetzungen und Setup

    1. Aktive ioBroker-API
    Am einfachsten über den Adapter „Simple API“.

    2. Wetterdatenquelle
    Die Daten stammen aus dem „Wetter.com“-Adapter.
    Dieser kann zusätzlich über GitHub installiert werden.

    Screenshot 2025-11-25 164848.png

    Danke an eifel-tech für den Adapter.

    3. JScript zur Aufbereitung der Wetterdaten
    Dieses Script schreibt die Daten des Wetter.com-Adapters in einen Datenpunkt im JSON-Format.

    • Im oberen Teil des Scripts können grundlegende Parameter angepasst werden (z. B. IP-Adresse und Port des ioBroker).

    • Diese Angaben sind notwendig, damit die Icons korrekt geladen werden.

    • Die Icons selbst werden mit dem Wetter.com-Adapter installiert.

    • Das Script erzeugt den Datenpunkt: 0_userdata.0.wetter.chartdata, in dem die Daten für das Chart abgelegt werden.

    Hier der Script-Code.

    /************************************************************
*  Wetter JSON Generator für ChartJS
*  Läuft bei Neustart + täglich um 02:10 Uhr
*  Schreibt nach: 0_userdata.0.wetter.chartdata
************************************************************/

const TARGET = '0_userdata.0.wetter.chartdata';

// Anzahl der Tage (Day_01 … Day_14)
const DAYS = 16;

// Basis-Pfad Wettercom
const BASE = 'wettercom.0.Day_';

// Icon-Pfad
const ICON_BASE = "http://192.168.16.10:8082";

/************************************************************
*  Funktion: JSON erzeugen
************************************************************/
async function buildWeatherJson() {

   const labels = [];
   const maxData = [];
   const minData = [];
   const rainData = [];
   const snowData = [];
   const maxIcons = [];

   for (let i = 1; i <= DAYS; i++) {

       const dayId = i.toString().padStart(2, "0"); // 01, 02, …
       const prefix = `${BASE}${dayId}.`;

       // Label bauen: [Wochentag, TT.MM]
       const dateStr = getState(`${prefix}date`)?.val; // z.B. "28.11.2025"
       let label = ["", ""];
       if (dateStr) {
           const parts = dateStr.split("."); // ["28","11","2025"]
           const day = parseInt(parts[0], 10);
           const month = parseInt(parts[1], 10) - 1; // JS-Monate 0-11
           const year = parseInt(parts[2], 10);

           const dateObj = new Date(year, month, day);
           const weekdays = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
           const dayName = weekdays[dateObj.getDay()];

           //label = [dayName, `${parts[0]}.${parts[1]}`]; // Wochentag + TT.MM
           label = [`${dayName} - ${parts[0]}.${parts[1]}.`];
       }

       const tempMax   = getState(`${prefix}tempMax`)?.val || 0;
       const tempMin   = getState(`${prefix}tempMin`)?.val || 0;
       const rain      = getState(`${prefix}rain`)?.val || 0;
       const rainRounded = Math.round(rain * 10) / 10;
       const snow      = getState(`${prefix}freshSnow`)?.val || 0;
       const snowRounded = Math.round(snow * 10) / 10;
       const iconCode  = getState(`${prefix}weatherIcon`)?.val || "n_e_0";

       labels.push(label);
       maxData.push(tempMax);
       minData.push(tempMin);
       rainData.push(rainRounded);
       snowData.push(snowRounded);

       // Icon URL bauen
       maxIcons.push(`${ICON_BASE}${iconCode}`);
   }

   const json = {
       labels: labels,
       datasets: [
           {
               label: "Regen",
               data: rainData
           },
           {
               label: "Neuschnee",
               data: snowData
           },
           {
               label: "Max Temperatur",
               data: maxData,
               pointStyle: maxIcons
           },
           {
               label: "Min Temperatur",
               data: minData
           }
       ]
   };

   console.log("Wetter-JSON aktualisiert");
   setState(TARGET, JSON.stringify(json), true);
}

/************************************************************
*  Trigger: täglich um 02:10 Uhr
************************************************************/
schedule("10 2 * * *", () => buildWeatherJson());

/************************************************************
*  Trigger: Skriptstart
************************************************************/
buildWeatherJson();

    4. Chart.js lokal bereitstellen
    Für die Darstellung wird Chart.js (chart.umd.min.js) benötigt:
    cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js
    Die Datei sollte lokal unter /vis.0/www/ gespeichert werden (z. B. neben weatherchart.html).
    Bei mir funktionierte das Laden nur zuverlässig, wenn die Datei lokal vorlag.

    5. HTML-Seite für das Diagramm
    Die HTML-Datei wird idealerweise unter /vis.0/www/weatherchart.html abgelegt.

    Hier der HTML-Code.

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Weather Chart — Gradient + Icons + Full Scales</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="chart.umd.min.js"></script>

<style>
html, body { height:100%; margin:0; background:transparent; }
#container { width:100%; height:100%; display:flex; align-items:stretch; }
#chartbox { flex:1; position:relative; }
canvas { width:100%; height:100%; display:block; }
</style>
</head>
<body>
<div id="container">
 <div id="chartbox">
   <canvas id="weatherChart"></canvas>
 </div>
</div>

<script>
const SIMPLE_API_BASE = 'http://192.168.16.10:8087/get/';
const DP_ID = '0_userdata.0.wetter.chartdata';

// Fetch helper
function fetchIoBrokerState(id) {
 return fetch(SIMPLE_API_BASE + encodeURIComponent(id))
   .then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
   .then(obj => obj.val);
}

// ---------- Gradient ----------
function createFixedGradient(ctx, area) {
 const g = ctx.createLinearGradient(0, area.bottom, 0, area.top);
 g.addColorStop(0.0, 'rgba(0,161,222,1.0)');
 g.addColorStop(0.49, 'rgba(0,161,222,0.1)');
 g.addColorStop(0.50, 'rgba(186,74,0,0.1)');
 g.addColorStop(1.0, 'rgba(186,74,0,1.0)');
 return g;
}

// ---------- Image preloader (caches on chart object) ----------
function ensureImageCache(chart, datasets) {
 // initialize cache on chart instance
 if (!chart._imageCache) chart._imageCache = { images: {}, pending: 0 };

 const cache = chart._imageCache;
 const urls = new Set();

 // collect unique URLs from datasets' pointStyle arrays
 datasets.forEach(ds => {
   if (!Array.isArray(ds.pointStyle)) return;
   ds.pointStyle.forEach(url => { if (url) urls.add(url); });
 });

 urls.forEach(url => {
   if (cache.images[url]) return; // already created or loading
   cache.pending++;
   const img = new Image();
   // If images served cross-origin and need to be used in canvas, consider: img.crossOrigin = 'anonymous';
   img.onload = () => {
     cache.images[url] = img;
     cache.pending--;
     // when each image loads, trigger a redraw so plugin can draw it synchronously
     // chart may be destroyed in the meantime; guard it
     try { if (chart && chart.ctx) chart.draw(); } catch(e) { /* ignore */ }
   };
   img.onerror = () => {
     // mark as null to avoid retry loops
     cache.images[url] = null;
     cache.pending--;
     try { if (chart && chart.ctx) chart.draw(); } catch(e) { /* ignore */ }
   };
   img.src = url;
   // store a placeholder until onload replaces it
   cache.images[url] = cache.images[url] || null;
 });
}

// ---------- Plugins ----------

// Gradient plugin: set backgroundColor for the min-dataset after layout
const tempGradientPlugin = {
 id: "tempGradientPlugin",
 afterLayout(chart) {
   const {ctx, chartArea} = chart;
   if (!chartArea || !chartArea.height) return;
   const g = createFixedGradient(ctx, chartArea);
   const ds = chart.data.datasets.find(d => d.label && d.label.toLowerCase().includes("min"));
   if (ds) ds.backgroundColor = g;
 }
};

// Icon drawing plugin: uses chart._imageCache.images to draw cached images
const drawIconsPlugin = {
 id: "drawIconsPlugin",
 afterDatasetsDraw(chart) {
   const cache = chart._imageCache && chart._imageCache.images ? chart._imageCache.images : {};
   const {ctx} = chart;

   chart.data.datasets.forEach((dataset, dsIndex) => {
     if (!Array.isArray(dataset.pointStyle)) return;
     const meta = chart.getDatasetMeta(dsIndex);
     meta.data.forEach((point, i) => {
       const url = dataset.pointStyle[i];
       if (!url) return;
       const img = cache[url];
       if (!img) return; // not loaded or errored
       // draw centered above point (adjust size/offset to taste)
       const w = 60, h = 50;
       ctx.drawImage(img, point.x - w/2, point.y - h - 3, w, h);
     });
   });
 }
};

// ---------- Chart lifecycle ----------
let weatherChart = null;

function renderChartFromJson(json) {
 if (!json) return;
 let data;
 try { data = JSON.parse(json); } catch (e) { console.error('Invalid JSON', e); return; }

 const labels = data.labels || [];
 const maxDatasetRaw = data.datasets.find(ds => ds.label && ds.label.toLowerCase().includes('max'));
 const minDatasetRaw = data.datasets.find(ds => ds.label && ds.label.toLowerCase().includes('min'));
 const rainDatasetRaw = data.datasets.find(ds => ds.label && ds.label.toLowerCase().includes('regen'));
 const snowDatasetRaw = data.datasets.find(ds => ds.label && ds.label.toLowerCase().includes('neuschnee'));

 if (!maxDatasetRaw || !minDatasetRaw) { console.warn('missing max/min datasets'); return; }

 const ctx = document.getElementById('weatherChart').getContext('2d');

 // compute y axis min/max robustly (handle empty arrays)
 const maxTemp = (Array.isArray(maxDatasetRaw.data) && maxDatasetRaw.data.length) ? Math.max(...maxDatasetRaw.data) : 30;
 const minTemp = (Array.isArray(minDatasetRaw.data) && minDatasetRaw.data.length) ? Math.min(...minDatasetRaw.data) : 10;
 const yMax = maxTemp + 5;
 const yMin = minTemp - 2;

 // destroy old
 if (weatherChart) {
   try { weatherChart.destroy(); } catch(e) { /* ignore */ }
   weatherChart = null;
 }

 // build datasets (keep pointStyle arrays as-is)
 const datasets = [
   {
     type: 'bar',
     label: 'Regen',
     data: rainDatasetRaw ? rainDatasetRaw.data : [],
     backgroundColor: 'rgba(0, 120, 255, 0.4)',
     borderColor: 'rgba(0, 120, 255, 1)',
     borderWidth: 1,
     yAxisID: 'y2',
     order: 0
   },
   {
     type: 'bar',
     label: 'Neuschnee',
     data: snowDatasetRaw ? snowDatasetRaw.data : [],
     backgroundColor: 'rgba(102, 153, 255, 0.4)',
     borderColor: 'rgba(102, 153, 255, 1)',
     borderWidth: 1,
     yAxisID: 'y2',
     order: 1
   },
   {
     label: maxDatasetRaw.label,
     data: maxDatasetRaw.data,
     borderColor: '#cdcdcd50',
     borderWidth: 1,
     fill: false,
     tension: 0.3,
     pointRadius: 0,
     backgroundColor: 'transparent',
     pointStyle: maxDatasetRaw.pointStyle || [],
     order: 2
   },
   {
     label: minDatasetRaw.label,
     data: minDatasetRaw.data,
     borderColor: '#cdcdcd50',
     borderWidth: 1,
     fill: { target: 2 },
     tension: 0.3,
     pointRadius: 0,
     backgroundColor: 'transparent', // gradient plugin will set this
     pointStyle: minDatasetRaw.pointStyle || [],
     order: 3
   }
 ];

 // create chart instance
 weatherChart = new Chart(ctx, {
   type: 'line',
   data: { labels, datasets },
   options: {
     responsive: true,
     maintainAspectRatio: false,
     color: "#cdcdcd",
     interaction: { mode: 'nearest', intersect: false },
     plugins: {
       legend: { display: false, position: 'top' },
       tooltip: {
         callbacks: {
           label: ctx => {
             const label = ctx.dataset.label || '';
             const value = ctx.raw;
             const unit = label.toLowerCase().includes('regen') ? 'l/m²' : label.toLowerCase().includes('neuschnee') ? 'cm' : '°C';
             return `${label}: ${value} ${unit}`;
           }
         }
       }
     },
     scales: {
       x: {
         display: true,
         ticks: { color: '#cdcdcd' },         // Label-Farbe
         grid: { color: '#334e6670' }         // Grid-Linien leicht transparent
       },
       y: {
         display: true,
         beginAtZero: false,
         position: 'left',
         ticks: { color: '#cdcdcd' },
         grid: { color: '#334e6670' },
         min: yMin,
         max: yMax,
         title: { display: true, text: 'Temperatur (°C)', color: '#cdcdcd' } // Achsentitel
       },
       y2: {
         display: true,
         beginAtZero: true,
         position: 'right',
         ticks: { color: '#cdcdcd' },
         grid: { drawOnChartArea: false },
         min: 0,
         max: 80,
         title: { display: true, text: 'Niederschlag (l/m²)', color: '#cdcdcd' }
       }
     }
   },
   plugins: [tempGradientPlugin, drawIconsPlugin]
 });

 // ensure images are preloaded and cached on chart instance
 ensureImageCache(weatherChart, datasets);
}

// ---------- Update loop ----------
function update() {
 fetchIoBrokerState(DP_ID)
   .then(val => renderChartFromJson(val))
   .catch(err => console.error('fetch error', err));
}

// initial run
update();
setInterval(update, 600000);
</script>
</body>
</html>

    • In der HTML-Datei muss die SIMPLE_API_BASE angepasst werden.

    • Falls der Datenpunkt im Script geändert wurde, muss auch DP_ID entsprechend angepasst werden.

    6. Einbindung in VIS
    In VIS eine neue View anlegen, ein Basic iFrame einfügen und bei Quelle folgendes eintragen: /vis.0/www/weatherchart.html

    Ich hoffe ich habe nichts vergessen.
    Gruß Tino

    C Offline
    C Offline
    claus1993
    schrieb am zuletzt editiert von
    #2

    Hi,

    vielen Dank das du deinen Skript hier zu Verfügung stellst. So eine Ansicht habe ich für meine VIS geplant und du ersparst mir dann doch einiges an Arbeit.

    Habe den Skript bei mir angelegt, bekomme jedoch die Meldungen das die Wetterdaten nicht gefunden wurden. Von daher habe ich zu den Basiseinstellungen Frage.

    @Tino-0 sagte in Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com):

    // Basis-Pfad Wettercom
    const BASE = 'wettercom.0.Day_';

    // Icon-Pfad
    const ICON_BASE = "http://192.168.16.10:8082";

    Woher kommen die Basisdaten? Du hast dort den Pfad "Wettercom.0.Day_" angegeben. Wie ich es sehe beziehst du die Daten aus dem Adapter "Wetter.com". Der Pfad ist bei mir jedoch "daswetter.0.....". Muss ich eventuell an meinem Adaptereinstellungen etwas anpassen?

    Die Icon werden mit dem Wetter Adapter installiert. Muss ich dort als Pfad den Port vom ioBroker angeben oder von der VIS?

    T 1 Antwort Letzte Antwort
    0
    • C claus1993

      Hi,

      vielen Dank das du deinen Skript hier zu Verfügung stellst. So eine Ansicht habe ich für meine VIS geplant und du ersparst mir dann doch einiges an Arbeit.

      Habe den Skript bei mir angelegt, bekomme jedoch die Meldungen das die Wetterdaten nicht gefunden wurden. Von daher habe ich zu den Basiseinstellungen Frage.

      @Tino-0 sagte in Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com):

      // Basis-Pfad Wettercom
      const BASE = 'wettercom.0.Day_';

      // Icon-Pfad
      const ICON_BASE = "http://192.168.16.10:8082";

      Woher kommen die Basisdaten? Du hast dort den Pfad "Wettercom.0.Day_" angegeben. Wie ich es sehe beziehst du die Daten aus dem Adapter "Wetter.com". Der Pfad ist bei mir jedoch "daswetter.0.....". Muss ich eventuell an meinem Adaptereinstellungen etwas anpassen?

      Die Icon werden mit dem Wetter Adapter installiert. Muss ich dort als Pfad den Port vom ioBroker angeben oder von der VIS?

      T Offline
      T Offline
      Tino 0
      schrieb am zuletzt editiert von
      #3

      @claus1993
      Hallo, ich habe kein daswetter.com da es keine neuen API Zugänge gibt, das ganze ist auf dem neuen Adapter wetter.com ausgelegt. Was alles für daswetter.com angepasst werden muss kann ich nicht sagen.

      Der Icon-Pfad ist die IP-Adresse und Port deines ioBroker.

      Gruß Tino

      1 Antwort Letzte Antwort
      0
      • C Offline
        C Offline
        claus1993
        schrieb am zuletzt editiert von
        #4

        @tino-0

        Hallo Tino,

        Danke schon mal für deine Rückmeldung.

        Mir ist nicht ganz klar welchen Adapter du nutzt. Dein Link für wetter.com verweist auf die Internetseite von Wetter.com.
        Laut Google kann ich nur den folgenden Adapter finden, https://github.com/eifel-tech/ioBroker.wettercom.
        Ist das der von dir genutzte Adapter?

        Grüße, Claus

        T 1 Antwort Letzte Antwort
        0
        • C claus1993

          @tino-0

          Hallo Tino,

          Danke schon mal für deine Rückmeldung.

          Mir ist nicht ganz klar welchen Adapter du nutzt. Dein Link für wetter.com verweist auf die Internetseite von Wetter.com.
          Laut Google kann ich nur den folgenden Adapter finden, https://github.com/eifel-tech/ioBroker.wettercom.
          Ist das der von dir genutzte Adapter?

          Grüße, Claus

          T Offline
          T Offline
          Tino 0
          schrieb am zuletzt editiert von Tino 0
          #5

          @claus1993
          Moin Claus,
          ja das ist der Adapter, den kann man auch über den Expertenmodus installieren.

          Screenshot 2025-12-08 091412.png

          PS: Dazu brauchst du noch den API Key "Light Air"

          Gruß Tino

          1 Antwort Letzte Antwort
          1
          • C Offline
            C Offline
            claus1993
            schrieb am zuletzt editiert von
            #6

            Cool....jetzt hat es funktioniert :-)

            Vielen Dank!

            1 Antwort Letzte Antwort
            0
            • LongbowL Offline
              LongbowL Offline
              Longbow
              schrieb am zuletzt editiert von
              #7

              sieht echt super aus, wie wäre es unter der VIS-2?

              Und wie passte die Hmtl Datei die Api an? Wo müsste ich da was einragen.

              T 1 Antwort Letzte Antwort
              0
              • LongbowL Longbow

                sieht echt super aus, wie wäre es unter der VIS-2?

                Und wie passte die Hmtl Datei die Api an? Wo müsste ich da was einragen.

                T Offline
                T Offline
                Tino 0
                schrieb am zuletzt editiert von
                #8

                @Longbow

                Hallo, in VIS 2 sollte es so aussehen.

                b86dc294-7bcf-486c-9442-8b36a4b30ac5-image.png

                Und die API in der HTML Seite dort ändern.

                aea8e965-802b-4a4c-936a-b5c18784cb11-image.png

                Gruß Tino

                1 Antwort Letzte Antwort
                0
                • NashraN Offline
                  NashraN Offline
                  Nashra
                  Most Active Forum Testing
                  schrieb am zuletzt editiert von
                  #9

                  Irgendwas stimmt da nicht mit dem Datum, nur komme ich nicht dahinter
                  Screenshot 2025-12-09 195049.png
                  An was könnte es liegen?

                  Gruß Ralf
                  Mir egal, wer Dein Vater ist! Wenn ich hier angel, wird nicht übers Wasser gelaufen!!

                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                  T 1 Antwort Letzte Antwort
                  0
                  • LongbowL Offline
                    LongbowL Offline
                    Longbow
                    schrieb am zuletzt editiert von
                    #10

                    @tino-0
                    Danke für den Tip, aber bei mir sieht es so aus. Was mache ich falsch? Muss es auch bei vis.0, es auch so heißen? hab es dort aber abgespeichert nur leider auch das bringt kein erfolg. Wo liegt mi nun de Fehler?

                    Greenshot 2025-12-09 19.16.57.png

                    1 Antwort Letzte Antwort
                    0
                    • NashraN Nashra

                      Irgendwas stimmt da nicht mit dem Datum, nur komme ich nicht dahinter
                      Screenshot 2025-12-09 195049.png
                      An was könnte es liegen?

                      T Offline
                      T Offline
                      Tino 0
                      schrieb am zuletzt editiert von Tino 0
                      #11

                      @Nashra

                      Hallo, was steht bei dir in dem Datenpunkt 0_userdata.0.wetter.chartdata drin?

                      03b18787-9da3-4656-905e-9a136525f1a3-image.png

                      und da drin wettercom.0.Day_01.date so? 9.12.2025

                      wenn nicht dann stimmt wohl das hier nicht

                      ed03f9a4-24ba-419e-8c97-d67d708c65f2-image.png

                      @longbow
                      Hast du auch alle Punkte oben so erledigt?

                      Gruß Tino

                      NashraN 1 Antwort Letzte Antwort
                      0
                      • LongbowL Offline
                        LongbowL Offline
                        Longbow
                        schrieb am zuletzt editiert von
                        #12

                        @tino-0

                        ja, ich bin da so nach gegangen, wie du es beschrieben hast

                        T 1 Antwort Letzte Antwort
                        0
                        • LongbowL Longbow

                          @tino-0

                          ja, ich bin da so nach gegangen, wie du es beschrieben hast

                          T Offline
                          T Offline
                          Tino 0
                          schrieb am zuletzt editiert von
                          #13

                          @Longbow

                          was steht in dem Datenpunkt 0_userdata.0.wetter.chartdata drin?

                          1 Antwort Letzte Antwort
                          0
                          • LongbowL Offline
                            LongbowL Offline
                            Longbow
                            schrieb am zuletzt editiert von
                            #14

                            @tino-0

                            Was Nashra geschrieben hat, ist bei mir auch wenn ich das öffnen mi Wert schreiben. Da steht das Datum auch so.

                            hier der Inhalt des Datenpunkt.

                            {"labels":[["undefined - 12/9/2025.undefined"],["undefined - 12/10/2025.undefined"],["undefined - 12/11/2025.undefined"],["undefined - 12/12/2025.undefined"],["undefined - 12/13/2025.undefined"]],"datasets":[{"label":"Regen","data":[3.5,0.6,0,0,0.7]},{"label":"Neuschnee","data":[0,0,0,0,0]},{"label":"Max Temperatur","data":[12,11,10,7,7],"pointStyle":["http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_60.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_3.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_3.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_3.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_0.svg"]},{"label":"Min Temperatur","data":[10,8,7,2,1]}]}
                            T 1 Antwort Letzte Antwort
                            0
                            • LongbowL Longbow

                              @tino-0

                              Was Nashra geschrieben hat, ist bei mir auch wenn ich das öffnen mi Wert schreiben. Da steht das Datum auch so.

                              hier der Inhalt des Datenpunkt.

                              {"labels":[["undefined - 12/9/2025.undefined"],["undefined - 12/10/2025.undefined"],["undefined - 12/11/2025.undefined"],["undefined - 12/12/2025.undefined"],["undefined - 12/13/2025.undefined"]],"datasets":[{"label":"Regen","data":[3.5,0.6,0,0,0.7]},{"label":"Neuschnee","data":[0,0,0,0,0]},{"label":"Max Temperatur","data":[12,11,10,7,7],"pointStyle":["http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_60.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_3.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_3.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_3.svg","http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_0.svg"]},{"label":"Min Temperatur","data":[10,8,7,2,1]}]}
                              T Offline
                              T Offline
                              Tino 0
                              schrieb am zuletzt editiert von Tino 0
                              #15

                              @Longbow sagte in Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com):

                              1. http://192.168.7.249:8082/adapter/wettercom/icons/weather/svg/d_60.svg
                                kannst du das aufrufen, kommt da ein Icon?

                              2. in der HTML hast du da den Port von Simple AIP drin? Sollte default 8087 sein also
                                bei dir 'http://192.168.7.249:8087/get/' dann sollte bei dir unter http://192.168.7.249:8087/get/0_userdata.0.wetter.chartdata der json auftauchen.

                              3. Das Datum sind die Systemsettings unter
                                f6e20529-da00-4b9f-80b6-3f924d24178d-image.png

                              Gruß Tino

                              1 Antwort Letzte Antwort
                              0
                              • LongbowL Offline
                                LongbowL Offline
                                Longbow
                                schrieb am zuletzt editiert von
                                #16

                                @tino-0

                                Hab dir mal von den links Bildausdrücke gemacht.
                                Vielleicht kannst du di dann ein bild machen....

                                Greenshot 2025-12-10 07.33.22.png Greenshot 2025-12-10 07.28.29.png Greenshot 2025-12-10 07.27.51.png Greenshot 2025-12-10 07.27.00.png

                                Im übigen finde ich deine Seite mit den ganzen Daten sehr schön übersichtlich, vllt könntest du Sie uns mal bereitstellen.

                                Danke im übrigen sehr für deine Bemühungen.

                                1 Antwort Letzte Antwort
                                0
                                • T Tino 0

                                  @Nashra

                                  Hallo, was steht bei dir in dem Datenpunkt 0_userdata.0.wetter.chartdata drin?

                                  03b18787-9da3-4656-905e-9a136525f1a3-image.png

                                  und da drin wettercom.0.Day_01.date so? 9.12.2025

                                  wenn nicht dann stimmt wohl das hier nicht

                                  ed03f9a4-24ba-419e-8c97-d67d708c65f2-image.png

                                  @longbow
                                  Hast du auch alle Punkte oben so erledigt?

                                  Gruß Tino

                                  NashraN Offline
                                  NashraN Offline
                                  Nashra
                                  Most Active Forum Testing
                                  schrieb am zuletzt editiert von Nashra
                                  #17

                                  @Tino-0 sagte in Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com):

                                  @Nashra

                                  Hallo, was steht bei dir in dem Datenpunkt 0_userdata.0.wetter.chartdata drin?

                                  03b18787-9da3-4656-905e-9a136525f1a3-image.png

                                  Das selbe wie @longbow schon als Bild eingestellt hat s.o.

                                  und da drin wettercom.0.Day_01.date so? 9.12.2025

                                  Ja, Datum ist so drin

                                  wenn nicht dann stimmt wohl das hier nicht

                                  ed03f9a4-24ba-419e-8c97-d67d708c65f2-image.png

                                  Nö, da ist allles sauber, Angaben stimmen.

                                  Gruß Ralf
                                  Mir egal, wer Dein Vater ist! Wenn ich hier angel, wird nicht übers Wasser gelaufen!!

                                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                  T 2 Antworten Letzte Antwort
                                  0
                                  • NashraN Nashra

                                    @Tino-0 sagte in Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com):

                                    @Nashra

                                    Hallo, was steht bei dir in dem Datenpunkt 0_userdata.0.wetter.chartdata drin?

                                    03b18787-9da3-4656-905e-9a136525f1a3-image.png

                                    Das selbe wie @longbow schon als Bild eingestellt hat s.o.

                                    und da drin wettercom.0.Day_01.date so? 9.12.2025

                                    Ja, Datum ist so drin

                                    wenn nicht dann stimmt wohl das hier nicht

                                    ed03f9a4-24ba-419e-8c97-d67d708c65f2-image.png

                                    Nö, da ist allles sauber, Angaben stimmen.

                                    T Offline
                                    T Offline
                                    Tino 0
                                    schrieb am zuletzt editiert von
                                    #18

                                    @Nashra
                                    moin,
                                    was passiert wenn du http://192.168.7.249:8082/vis.0/www/weatherchart.html aufrufst?

                                    das vis.0/www sieht so aus
                                    225878e8-9664-4207-8dc9-486b6b4adf51-image.png

                                    1 Antwort Letzte Antwort
                                    0
                                    • LongbowL Offline
                                      LongbowL Offline
                                      Longbow
                                      schrieb am zuletzt editiert von
                                      #19

                                      Achtung @tino-0 und @nashra, das ist die IP von meinem Iobroker, die muss bei Nashra nicht stimmen.

                                      1 Antwort Letzte Antwort
                                      0
                                      • NashraN Nashra

                                        @Tino-0 sagte in Wetterdiagramm mit Icons in VIS (Chart.js + Wetter.com):

                                        @Nashra

                                        Hallo, was steht bei dir in dem Datenpunkt 0_userdata.0.wetter.chartdata drin?

                                        03b18787-9da3-4656-905e-9a136525f1a3-image.png

                                        Das selbe wie @longbow schon als Bild eingestellt hat s.o.

                                        und da drin wettercom.0.Day_01.date so? 9.12.2025

                                        Ja, Datum ist so drin

                                        wenn nicht dann stimmt wohl das hier nicht

                                        ed03f9a4-24ba-419e-8c97-d67d708c65f2-image.png

                                        Nö, da ist allles sauber, Angaben stimmen.

                                        T Offline
                                        T Offline
                                        Tino 0
                                        schrieb am zuletzt editiert von
                                        #20

                                        @Nashra

                                        ich habe es mal getestet bei euch warum auch immer steht das Datum mit / drin

                                        ba5ad40e-6a64-4ff3-a8ef-c1c4c09ebb67-image.png

                                        wenn ich ein Datum so ändere kommt genau euerm Format in den Json

                                        fec3280b-5c69-43e4-980c-522dfa587ad1-image.png

                                        ihr könnt jetzt die Zeile 39 im JScript

                                        von

                                                    const parts = dateStr.split("."); // ["28","11","2025"]

                                        in

                                                    const parts = dateStr.split("/"); // ["28","11","2025"]

                                        ändern, dann sollte es passen.

                                        Gruß Tino

                                        1 Antwort Letzte Antwort
                                        1
                                        • LongbowL Offline
                                          LongbowL Offline
                                          Longbow
                                          schrieb am zuletzt editiert von Longbow
                                          #21

                                          @tino-0 Könntest du was mit meinen Bildschirmausdrucken was anfangen? Wo der Fehler liegen könnte

                                          T 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen

                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          641

                                          Online

                                          32.7k

                                          Benutzer

                                          82.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden
                                          • Du hast noch kein Konto? Registrieren
                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe