Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Negalein]

@paul53 sagte in Diagramm mehrerer Datenpunkte ohne History:

@Negalein 40 Zeilen ?

So zB hätte ich gedacht

[dtp]

Hier gingen jetzt zwei Sachen durcheinander. Zum Einen das Skript von @paul53 zur Erstellung einer JSON-Tabelle und dann meine Version, die die Grundlage für charts.js bilden sollte. Das sollten wir vielleicht klarer trennen.

Mir ging es in erster Linie um eine grafische Darstellung der Vorhersagewerte. Eine JSON-Tabelle ist da ggf. nicht so zielführend, zumal man die Werte ja auch problemlos einzeln mit entsprechenden Widgets als Tabelle darstellen kann.

@paul53: hab die Units aus den Array-Datenpunkten ebenfalls entfernt. Danke für den Hinweis.

Hab mir nun mal charts.js mit

npm install chart.js --save

installiert. Unter node_modules befinden sich auch die entsprechenden charts.js-Verzeichnisse. Doch nun stocke ich bei der Erstellung des entsprechenden Skripts mit

require(['chart.js/dist/Chart.js'], function(Chart){
  var myChart = new Chart(ctx, {...});
});

Wie und wo zeige ich die entsprechenden Daten an? Jemand eine Idee?

[Negalein]

@dtp sagte in Diagramm mehrerer Datenpunkte ohne History:

Mir ging es in erster Linie um eine grafische Darstellung der Vorhersagewerte.

Ja, das möchte ich auch!
Mit dem Script von @paul53 funktioniert das leider nicht.

[paul53]

@Negalein sagte:

So zB hätte ich gedacht

Versuche es mal so (nicht getestet)

var path    = "daswetter.0.NextDaysDetailed.Location_1.Day_"; // Pfad der String-Datenpunkte aus "list"
var idTable = "vis.dasWetterTable"; // Pfad des Datenpunkts für das vis-Json

// Datenpunkte anlegen
createState(idTable, "", {
  name: idTable,
  desc: 'Tabelle der Vorhersagewerte aus daswetter.com als Json-Objekt',
  type: 'string',
  role: 'json'
});

function wetter() {
   var list = [];
   for(let i = 0; i < 20; i++) {
      var j = i % 4;
      var sensor = 'temp_value';
      var unit = '°C';
      if(j == 1) {
	     sensor = 'humidity_value';
	     unit = '%rH';
      } 
      else if(j == 2) {
	     sensor = 'rain_value';
	     unit = 'mm';
      }		 
      else if(j == 3) {
	     sensor = 'wind_value';
             unit = 'km/h';
      }		 
      var day = Math.floor(i / 4);
      var tage = ['Heute','Morgen','Tag 2','Tag 3','Tag 4']
      list[i] = {};
      if(j == 0) list[i].Tag = tage[day];
      list[i].Sensor = unit;
      day = day + 1;
      list[i]['02:00'] = getState(path + day + '.Hour_1.' + sensor).val;
      list[i]['05:00'] = getState(path + day + '.Hour_2.' + sensor).val;
      list[i]['08:00'] = getState(path + day + '.Hour_3.' + sensor).val;
      list[i]['11:00'] = getState(path + day + '.Hour_4.' + sensor).val;
      list[i]['14:00'] = getState(path + day + '.Hour_5.' + sensor).val;
      list[i]['17:00'] = getState(path + day + '.Hour_6.' + sensor).val;
      list[i]['20:00'] = getState(path + day + '.Hour_7.' + sensor).val;
      list[i]['23:00'] = getState(path + day + '.Hour_8.' + sensor).val;
   }   
   var json = JSON.stringify(list);
   // log(json);
   setState(idTable, json, true);
}

// Trigger
schedule('10 */15 * * * *', wetter);

[Negalein]

@paul53 sagte in Diagramm mehrerer Datenpunkte ohne History:

@Negalein sagte:

So zB hätte ich gedacht

Versuche es mal so (nicht getestet)

Funktioniert leider nicht.
Aber egal. Ich versuchs irgendwie grafisch umzusetzen.

Danke

[paul53]

@Negalein
Ändere mal

      if(j == 0) list[i].Tag = tage[day];

in

      if(j == 0) list[i].Tag = tage[day];
      else list[i].Tag = '';

[sigi234]

@paul53 sagte in Diagramm mehrerer Datenpunkte ohne History:

@Negalein
Ändere mal

      if(j == 0) list[i].Tag = tage[day];

in

      if(j == 0) list[i].Tag = tage[day];
      else list[i].Tag = '';

Schaut bei mir so aus:

Edit:

[dtp]

Also das finde ich aber ehrlich gesagt alles andere, als übersichtlich. Da würde ich lieber bei der Ansicht aus meinem Ausgangsposting bleiben.

Eigentlich schwebte mir eher sowas vor:

[paul53]

@sigi234 sagte:

Edit:

Passt doch zur Excel-Tabelle von @Negalein.

[sigi234]

@paul53 sagte in Diagramm mehrerer Datenpunkte ohne History:

@sigi234 sagte:

Edit:

Passt doch zur Excel-Tabelle von @Negalein.

Ja sag ich eh...........

[Negalein]

@dtp sagte in Diagramm mehrerer Datenpunkte ohne History:

Eigentlich schwebte mir eher sowas vor:

Mir auch!
Eventuell wird es ja noch was! :)

[paul53]

@dtp sagte:

Oh, hab da was gefunden. Klick!

Bist Du damit nicht weiter gekommen ?

[Streit187]

@paul53 Darf ich dieses, zugegeben sehr altes Thema noch einmal aufwärmen?
Ich habe jetzt das ganz Internet durch aber scheinbar gibt es keine Möglichkeit die von deinem Skript ausgegebenen Daten in einem einfachen Graphen darzustellen so wie in dem angehängten Bild.
Ich kann das einfach nicht glauben.

[paul53]

@streit187 sagte: keine Möglichkeit die von deinem Skript ausgegebenen Daten in einem einfachen Graphen darzustellen so wie in dem angehängten Bild.

Mit der Darstellung von Graphen kenne ich mich nicht aus (außer Flot in Verbindung mit History).

[Streit187]

@paul53 Mit Flot und History komme ich auch gut zurecht.
Aber es handelt sich ja um JSON Daten und ich habe nun das hier gefunden: https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart
Damit sollte es eigentlich sehr gut funktionieren aber mir fehlt leider hier auch das KnowHow diese Daten nun in dieses Chart zu bekommen. Vielleicht findet sich ja hier noch jemand mit den entsprechenden Fähigkeiten.
Das ganz ist nämlich auf jeden Fall für jeden Besitzer ein PV Anlage interessant da komplett kostenlos.

[Streit187]

@paul53
Ich hab es geschafft. Mit deiner Hilfe könnten wir das Thema jetzt schließen. Könntest du dein Skript wie folgt anpassen:

Neuen Datenpunkt anlegen:
in: 0_userdata.0/Solar/Energie
Name: Energie
Rolle: table
Art: Objekt
Typ: State
Wert: Die Response der bekannten URL in dieser Form:
{ "axisLabels": ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
"graphs": <erster Wert>
z.B.: [{"data": [0, 0.01, 0.588, 1.392, 1.484, 1.1, 1.05, 0.95, 0.7, 0.22, 0, 0, 0.02, 0.45, 0.82, 0.98, 1.1, 1.05, 0.95, 0.7, 0.22, 0],
"type": "line",
"yAxis_min": 0,
"yAxis_max": 10,
"yAxis_step": 1,
"yAxis_position": "left",
"yAxis_appendix": " kW",
"datalabel_show": false}]}

Neuen Datenpunkt anlegen:
in: 0_userdata.0/Solar/Leistung
Name: Leistung
Rolle: table
Art: Objekt
Typ: State
Wert: Die Response der bekannten URL in dieser Form:
{ "axisLabels": ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
"graphs": <zweiter Wert>,
"type": "line",
"yAxis_min": 0,
"yAxis_max": 10,
"yAxis_step": 1,
"yAxis_position": "left",
"yAxis_appendix": " kW",
"datalabel_show": false}]}

Diesen Datenpunkt dann einfach nur noch im JSON Chart vom Material Design Widget Adapter auswählen und fertig.
Das wäre großartig.