Influx-->JSON-->Chart Beispiel

[StefanRied]

@cmorlok @Scrounger
Hallo,
ich habe grade JSON Charts für mich entdeckt.
Extrem cool. Ich habe in einem Influx Measurement den aktuellen Strompreis-Forecast liegen. Der kommt immer um 14 Uhr für den nächsten Tag von 0 bis 24 Uhr raus. Für die Leute die wie ich einen hourly Tarif https://www.awattar.de/ haben die Entscheidung, wann man den Stromflitzer aufladen läßt, wenn die Sonne nicht scheint.
Das Chart hat also je nachdem, wann man drauf schaut eine andere Auflösung. Kurz vor 14 Uhr sind nur noch werte von 14 Uhr bis 23 Uhr des aktuellen Tages drin. Kurz nach 14 Uhr dann eben die 24 neue Stundentarife für den folgenden Tag. Man will nie abgelaufene Preise sehe, es ist ja ein Forecast.
Das habe ich nicht mit Grafana oder eCharts auf ioBroker hin bekommen.

Das Chart soll also immer von den Strompreis von jetzt bis zum Ende der Datenbank anzeigen. In SQL recht einfach:

select * from StromPreis WHERE time > now() - 1h 

Weil ich auch in https://forum.iobroker.net/topic/31871/material-design-widgets-json-chart-widget/39 kaum gute Beispiele gefunden habe, wie man die JSONs für JSON-Charts zusammen baut, möchte ich den Code einfach mal posten. Viel Spaß beim Jonglieren mit JSON Objekten ...

// Influx im iobroker
const Influx = require('influx');
const influx = new Influx.InfluxDB({
    host: '127.0.0.1',
    database: 'iobroker' 
  });

// Das beschreibt das Chartaussehen
var myChart =  {"graphs":[
    {"type":"bar",
     "color":"#FF0000",
     "legendText": "ct/kWh",
     "yAxis_id":0,"line_UseFillColor":true,"displayOrder":0,
     "line_Thickness":2,"line_pointSize":0,
     "datalabel_show":false,"yAxis_min":10,"yAxis_max":55,"yAxis_zeroLineWidth":0,"xAxis_bounds":"ticks",
    "xAxis_timeFormats":{"millisecond":"H:mm:ss.SSS","second":"H:mm:ss","minute":"H","hour":"dd.[\\n]H",
    "day":"dd[\\n]DD",
    "week":"dd[\\n]DD.MM","month":"MMM[\\n]YYYY","quarter":"[Q]Q - YYYY","year":"YYYY"}, data:[]
}]}

// Hier kommen alle Daten aus der InfluxDB und laden im data segment des ChartJSONs

await influx.query(`select * from StromPreis WHERE time > now() - 1h limit 48;`).
    then((rows) => {
        myChart.graphs[0].data = rows;
    }).
    catch(err => { console.log(`Error query InfluxDB! ${err.stack}`) });  

// Hier gehe ich nochmal schnell durch das data array und benenne die felder so um das JSONCharts 
// die daten in t und y findet. Alle anderen Felder die aus dem Query kommen löschen. Man könnte natürlich auch 
// Labels im Influx query nehmen um das zu fixen.

myChart.graphs[0].data.forEach(data => {
            data.t = data.time; 
            delete data.time;
            data.y = data.preis_brutto; 
            delete data.preis_netto; delete data.preis_brutto; 
        })

// console.log(myChart);
// Und das ganze auf den State schreiben der im VIS als ID zum JSONChart eingetragen ist. Fertig und echt Mega-Cool :)
setState("0_userdata.0.StromManagement.Chart",myChart);

[Percy]

Coole Lösung. Ich bin mir nicht sicher, ob du mit deiner Aussage, dass du das mit Grafana nicht hinbekommen hast, die Einbettung eines Charts in ioBroker oder die Darstellung des Charts selbst meintest.

Für ersteres kann ich dir eine Lösung zeigen:

Ich habe das mal schnell für den PV-Tagesertrag und die Poolwassertemperatur gemacht (es sei mir verziehen, dass diese weder thematisch noch vom Layout her in die VIS Seite passen, aber ich denke man versteht das Konzept):

Das Widget ist ein iFrame. Als Quelle einfach den Link eintragen, den Grafana dir für ein Chart anzeigt, wenn du auf "Teilen" gehst. Um den Header zu entfernen, musst du den Link etwas anpassen:

http://[grafana IP]:3000/d-solo/[ID]/pool?orgId=1theme=dark&panelId=14

Bei der panel ID im Zweifel nochmal in Grafana nachschauen oder einfach durchprobieren.

Falls es dir um die Darstellung des Charts für deinen Anwendungsfall ging, vergiss meinen Post einfach Vielleicht hilft er aber jemand anderem.

LG Percy

[StefanRied]

@percy Einfach etwas von Grafana zu embedden ist nicht das Problem. Meine Aufgabe war, dass ein Script, dass zum Beispiel auf eine Nutzereingabe reagiert, das Chart direkt ändert. Also zum Beispiel die Zeitgrenze verändert. Das habe ich bei Grafana nicht durch die "App" (also ein Script das auf States reagiert) hin bekommen.