Auslesen aus io Broker und visualisieren über Chart.js

[ehome]

Hallo,
eine Frage an die Java-Script-Kundigen... hat zwar nur indirekt was mit IOBroker zu tun aber ich frage mal trotzdem...

Ich möchte gerne mit Chart.js Werte aus dem IO Broker visualisieren.

Dafür habe ich mir in iobroker ein Skript gebaut, welches die DB abfragt und das Ergebnis dann in einen Datenpunkt schreibt. - Das funktioniert auch

/*

Auswertung Gasverbrauch seit Beginn der Aufzeichnungen

*/

const logging=true;
const path = 'Auswertungen.0.';
const id_gas_gesamt=path+'Gas.Gesamtverbrauch';
const name_gas_gesamt='Gesamtverbrauch seit Anfang Erfassung';

objektErstellen(id_gas_gesamt,name_gas_gesamt);

// Alle Werte seit Anfang der Aufzeichnungen

/* 
const myQuery='SELECT \
             (YEAR(FROM_UNIXTIME(SUBSTRING(ts, 1, 10)))) AS Jahr,\
            (MONTH(FROM_UNIXTIME(SUBSTRING(ts, 1, 10)))) AS Monat,\
              ROUND(MAX(val) - MIN(val), 0) AS Verbrauch\
             FROM\
               iobroker.ts_number\
             WHERE YEAR(FROM_UNIXTIME(SUBSTRING(ts, 1, 10)))=2019 and\
              id = (SELECT id FROM iobroker.datapoints WHERE name = "Versorgung.0.Gas.Zaehlerstand")\
             GROUP BY YEAR(FROM_UNIXTIME(SUBSTRING(ts, 1, 10))) , \
                      MONTH(FROM_UNIXTIME(SUBSTRING(ts, 1, 10))) \
                   order by ts';
*/ 

// Fuer den Anfang erst mal nur ein Jahr

const myQuery='SELECT \
            (MONTH(FROM_UNIXTIME(SUBSTRING(ts, 1, 10)))) AS Monat,\
              ROUND(MAX(val) - MIN(val), 0) AS Verbrauch\
             FROM\
               iobroker.ts_number\
             WHERE YEAR(FROM_UNIXTIME(SUBSTRING(ts, 1, 10)))=2019 and \
              id = (SELECT id FROM iobroker.datapoints WHERE name = "Versorgung.0.Gas.Zaehlerstand")\
             GROUP BY YEAR(FROM_UNIXTIME(SUBSTRING(ts, 1, 10))) , \
                      MONTH(FROM_UNIXTIME(SUBSTRING(ts, 1, 10))) \
                   order by ts';

mysqlAbfrage(myQuery,id_gas_gesamt);

function mysqlAbfrage (myQuery,id) {
    var ergebnis;
    tolog(logging,"mysqlAbfrage :  "+myQuery);
    sendTo('sql.0', 'query', myQuery, function (result) {
        if (result.error) {
            tolog(logging,"ERROR IN QUery: "+result.error); 
        } else {
            ergebnis=JSON.stringify(result.result);
            tolog(logging," TypeOf:"+typeof(ergebnis));
            setState(id,ergebnis);
            
            //tolog(logging,"mysqlAbfrage val: "+ergebnis);
        }
    });
}


function objektErstellen (id,name){
   var obj = {};
   obj.type = 'state';
   obj.common = {};
   obj.common.name = name;
   obj.common.type = 'string';
   obj.common.read = true;
   obj.common.write = true;
   obj.common.def = true;

   setzeObject(id, obj);
} 

function setzeObject(id, obj) {
   log("ID: "+id);
   //if(getObject(path + idDev + '.status')) return;
   
   
   if (getObject(id)) {
            log("Objekt: "+id+" existiert lege es nicht erneut an");
    } else {
        log("Objekt: "+id+" existiert nicht, lege es an");
        setObject(id, obj, function(err) {
            if(err) log('Cannot write object: ' + err);
            else setState(id, obj.common.def);
        }); 
    }
    
}

Das geht auch sauber, wenn ich die Werte abrufe bekomme ich folgendes:

curl http://d-iobroker.fritz.box:8087/get/Auswertungen.0.Gas.Gesamtverbrauch | jq
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   790  100   790    0     0  98750      0 --:--:-- --:--:-- --:--:-- 98750
{
  "val": "[{\"Monat\":1,\"Verbrauch\":912},{\"Monat\":2,\"Verbrauch\":1238},{\"Monat\":3,\"Verbrauch\":603},{\"Monat\":4,\"Verbrauch\":354},{\"Monat\":5,\"Verbrauch\":292},{\"Monat\":6,\"Verbrauch\":72},{\"Monat\":7,\"Verbrauch\":68},{\"Monat\":8,\"Verbrauch\":65},{\"Monat\":9,\"Verbrauch\":143},{\"Monat\":10,\"Verbrauch\":350},{\"Monat\":11,\"Verbrauch\":675},{\"Monat\":12,\"Verbrauch\":726}]",
  "ack": false,
  "ts": 1589463029568,
  "q": 0,
  "from": "system.adapter.javascript.11",
  "user": "system.user.admin",
  "lc": 1589465646460,
  "type": "state",
  "common": {
    "name": "Gesamtverbrauch seit Anfang Erfassung",
    "type": "string",
    "read": true,
    "write": true,
    "def": true
  },
  "_id": "Auswertungen.0.Gas.Gesamtverbrauch",
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

Wenn ich nun in der Webseite versuche, das JSON auszuwerten, bekomme ich die Wertepaare nicht zugeordnet, soll heißen, die Monate in ein Array und die Werte in ein Aarry. Hier die Funktion in der html-Seite

async function getData2() {
         const api_url=`http://d-iobroker.fritz.box:8087/get/Auswertungen.0.Gas.Gesamtverbrauch`;
         const response = await fetch(api_url);
         const json = await response.json();
         console.log(typeof(response));
         //xlabels=json.val.Monat;
         //ylabels=json.datapoints.Verbrauch;
         console.log(json);
         console.log(json.val);
         console.log(json.val.Monat);
         console.log(json.val.Verbrauch);
      }

Irgendwie steh ich da wie der Ochs vor'm Berg .....
In der Java-Script Konsole von Chrome steht für die letzten beiden Ausgaben jeweils "undefined".
Wenn ich "xlabels" auskommentiere, kommt in der Chrome-Konsole: Unhandled Promise Rejection: TypeError: Attempted to assign to readonly property. "Unhandled
Jemand eine Idee wie ich die Zuweisung machen muss/kann??