Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[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.

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.

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.

Spoiler

/************************************************************
*  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.

Spoiler

<!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

[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?

[Tino 0]

@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

[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

[Tino 0]

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

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

Gruß Tino

[claus1993]

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

Vielen Dank!

[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.

[Tino 0]

@Longbow

Hallo, in VIS 2 sollte es so aussehen.

Und die API in der HTML Seite dort ändern.

Gruß Tino

[Nashra]

Irgendwas stimmt da nicht mit dem Datum, nur komme ich nicht dahinter

An was könnte es liegen?

[Longbow]

@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?

[Tino 0]

@Nashra

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

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

wenn nicht dann stimmt wohl das hier nicht

@longbow
Hast du auch alle Punkte oben so erledigt?

Gruß Tino

[Longbow]

@tino-0

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

[Tino 0]

@Longbow

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

[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]}]}

[Tino 0]

@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
   

Gruß Tino

[Longbow]

@tino-0

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

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.

[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?

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

Nö, da ist allles sauber, Angaben stimmen.

[Tino 0]

@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

[Longbow]

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

[Tino 0]

@Nashra

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

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

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