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

[dos1973]

hi, ich möchte gerne ein json Datei für mein Chart erstellen.

das json sieht so aus,
das habe ich manuell erstellt aus diversen Vorlagen und der Material Design Hilfeseiten.

{
    "axisLabels": [
    "30.10.",
    "31.10.",
    "01.11.",
    "02.11.",
    "03.11.",
    "04.11.",
    "05.11.",
    "06.11.",
    "07.11.",
    "08.11.",
    "09.11."],
"graphs": [{"type": "line",
"data": [
        9.489,
        7.709,
        5.883,
        7.404,
        5.454,
        6.69,
        9.776,
        7.608,
        6.662,
        7.655,
        5.14],
        "yAxis_id": 0,
        "yAxis_zeroLineWidth": 0.1,
        "yAxis_zeroLineColor": "black",
        "barIsStacked": true,
        "line_pointSize":0,
        "line_Thickness":4,
        "datalabel_show": true,
        "datalabel_maxDigits": 2,
        "datalabel_minDigits": 2,
        "datalabel_fontFamily": "OpenSans-CondLight",
        "datalabel_fontSize": 16,
        "datalabel_borderRadius": 6,
        "datalabel_offset": -10,
        "datalabel_backgroundColor": "#3E4765",
        "datalabel_color": "#f5f5f5",
        "color": "#ff9900",
        "line_UseFillColor": false,
        "yAxis_gridLines_show": false,
        "use_gradient_color": true,
        "gradient_color": 
        [{
        "value": 8.5,
        "color": "#d43e3a"
        }, 
        {
            "value": 6,
            "color": "#ff9900"
        },
        {
            "value": 3,
            "color": "#4f6765"
        }
    ],
            "yAxis_appendix": " kw/h"  
	}, {
		"type": "bar",
		"barIsStacked": true,
		"data": [
        9.489,
        7.709,
        5.883,
        7.404,
        5.454,
        6.69,
        9.776,
        7.608,
        6.662,
        7.655,
        5.14
      ],
		"yAxis_id": 0,
		"barStackId": 0,
        "datalabel_show": false,
		"color": "#000000",
		"datalabel_color": "#FFFFFF",
		"datalabel_align": "start",
		"use_gradient_color": true,
        "yAxis_show": false,
        "yAxis_min": 0,
        "yAxis_maxSteps": 4,
        "yAxis_gridLines_border_show": false,
        "yAxis_gridLines_ticks_show": false,
        "yAxis_gridLines_show": false,
		"gradient_color": [
        {
        "value": 9.1,
        "color": "#ED97A8"
        }, {
            "value": 5.5,
            "color": "#F3D8A5"
        }, {    
            "value": -5,
            "color": "#7CA27E"
			}
		]
	}
		]
	}

wenn ich das in einen DP packe, sieht es gut aus.

in blockly habe ich meine DP "axis" und "data" in Variablen gepackt

und baue dann das json hiermit nach

ich copy /paste einfach alles aus der obigen json Vorlage und ersetze nur die Reihen mit den Variablen aus den DP.

mein Ergebnis sieht aber so aus.

ich verzweifel, der inhalt meines DP ist identisch mit dem oberen...

ier seht ihr inhalt des DP welchen ich via Blockly reinschreibe

{"axisLabels": ["30.10.", "31.10.", "01.11.", "02.11.", "03.11.", "04.11.", "05.11.", "06.11.", "07.11.", "08.11.", "09.11."],"graphs": [{"type": "line","data": [7.709, 5.883, 7.404, 5.454, 6.69, 9.776, 7.608, 6.662, 7.655, 6.331, 4.052],         "yAxis_id": 0,         "yAxis_zeroLineWidth": 0.1,         "yAxis_zeroLineColor": "black",         "barIsStacked": true,         "line_pointSize":0,         "line_Thickness":4,         "datalabel_show": true,         "datalabel_maxDigits": 2,         "datalabel_minDigits": 2,         "datalabel_fontFamily": "OpenSans-CondLight",         "datalabel_fontSize": 16,         "datalabel_borderRadius": 6,         "datalabel_offset": -10,         "datalabel_backgroundColor": "#3E4765",         "datalabel_color": "#f5f5f5",         "color": "#ff9900",         "line_UseFillColor": false,         "yAxis_gridLines_show": false,         "use_gradient_color": true,         "gradient_color":          [{         "value": 8.5,         "color": "#d43e3a"         },          {             "value": 6,             "color": "#ff9900"         },         {             "value": 3,             "color": "#4f6765"         }     ],             "yAxis_appendix": " kw/h"   	}, {"data": [7.709, 5.883, 7.404, 5.454, 6.69, 9.776, 7.608, 6.662, 7.655, 6.331, 4.052],"yAxis_id": 0, 		"barStackId": 0,         "datalabel_show": false, 		"color": "#000000", 		"datalabel_color": "#FFFFFF", 		"datalabel_align": "start", 		"use_gradient_color": true,         "yAxis_show": false,         "yAxis_min": 0,         "yAxis_maxSteps": 4,         "yAxis_gridLines_border_show": false,         "yAxis_gridLines_ticks_show": false,         "yAxis_gridLines_show": false, 		"gradient_color": [         {         "value": 9.1,         "color": "#ED97A8"         }, {             "value": 5.5,             "color": "#F3D8A5"         }, {                 "value": -5,             "color": "#7CA27E" 			} 		] 	} 		] 	}

liegt es an der Formatierung, bzw. wie bekomme ich das hin.
die ganzen "string" Blöcke sind diverse Versuche gewesen...

[mickym]

@dos1973 Ich kann Dir nur raten (Du nutzt doch auch NodeRed ??? ) aber selbst mit Blockly nutze JSONATA.

[dos1973]

@mickym

ich nutze nur node red nur die funktionen die du mir gezeigt hast...
mit nodered würde ich nicht bis hierher kommen ;-) ich finds toll - aber ich kann damit nicht denken. wenn du etwas baust kann ich das nachbauen aber start geht nicht...
bei Dir easy und klar, bei mir ???

[mickym]

@dos1973 Na dann fangen wir halt mal an. ;)

Wie gesagt Blockly kann nicht mit Objekten umgehen - mit Nodered ist das easy.

Wenn ich dein obiges Objekt einfach in eine Inject Node kopiere hast Du doch schon das Objekt

Im x-axis Label kommen die Label Deiner X-Achse rein.

Im Graphs Objekt hast Du mehrer - ich weiß allerdings nicht warum. Zum einen die Daten und zum anderen die Farbformatierung. Ahh ich verstehe das 1. Objekt ist die Linie und im 2. Objekt sind die Balken. OK - Du brauchst also nur ein neues Datum und einen neun Wert einfügen und einen alten Löschen???

[dos1973]

@mickym

ich muss mir die Daten für mein datum und den Verbrauch aber aus meine bestehenden DP rausholen

DP liegen hier

0_userdata.0.Wohnung.Status.Strom.3_EM.Diagramm.-_1_Tage

und das mach ich 9x um die letzten 10 Tag inkl. Heute als Balken darzustellen

[mickym]

@dos1973 Und wie schauen die Datenpunkte aus?

Also steht im Datum zum Beispiel Datum-1 : 9.11. ?

und im Verbrauch - 1: 9.777

[dos1973]

@mickym

ja, das baue ich mir mit einem anderen scriot zusammen...

das ist gestern( -1 tag) verbrauch das entsprechende datum und Verbrauch, und so gehts immer weiter, kann 3o Tage zurück ;-)

[mickym]

@dos1973 Ok dann weiß ich Bescheid . ich bastle mal was und Du musst ggf die Pfade noch anpassen. Musst aber bissi Geduld haben. ;) - Ich muss ja selbst ein paar datenpunkte erstellen

[dos1973]

@mickym
:-) nur kein Stress... Danke Dir vielmals

die dp verändern nur axisLabels, also das Datum und die "data" Werte. Die Data werden 2x im json geschrieben, einmal für Kurve und einmal für die Balken

[mickym]

@dos1973 Ja habe ich inzwischen alles kapiert - ich erstell mal die Datenpunkte und Du bestätigst kurz ob das so passt.

[dos1973]

@mickym
was noch offen war, ist das Heutige Datum... ich habe ja alle Tage rückwirkend, aber für die Heutige Messung fehlt der, da wusst ich nicht wo ich den hernehmen kann.

[mickym]

Stimmt die Datenstruktur so?

[dos1973]

@mickym
yes, genauso.

[mickym]

@dos1973 So der Flow ist simple

Du musst nur das übergeordnete Verzeichnis in Deine List Node eintragen:

Also wie auf dem Bild unten siehst Du ja dass ich bei den Objekten ein Verzeichnis dos-1973 erstellt habe.

Hier der Flow:

Spoiler

[
   {
       "id": "7f416d63e5ece5a5",
       "type": "ioBroker list",
       "z": "5a7d3179c5870381",
       "name": "",
       "topic": "0_userdata.0.Test.dos-1973.*",
       "objType": "state",
       "regex": "",
       "asArray": "true",
       "onlyIDs": "false",
       "withValues": "true",
       "x": 360,
       "y": 940,
       "wires": [
           [
               "bd4ad0d8a225e159"
           ]
       ]
   },
   {
       "id": "f297aa12a709d590",
       "type": "inject",
       "z": "5a7d3179c5870381",
       "name": "Trigger",
       "props": [
           {
               "p": "payload"
           },
           {
               "p": "topic",
               "vt": "str"
           }
       ],
       "repeat": "",
       "crontab": "",
       "once": false,
       "onceDelay": 0.1,
       "topic": "",
       "payload": "",
       "payloadType": "date",
       "x": 150,
       "y": 940,
       "wires": [
           [
               "7f416d63e5ece5a5"
           ]
       ]
   },
   {
       "id": "bd4ad0d8a225e159",
       "type": "change",
       "z": "5a7d3179c5870381",
       "name": "Analyse",
       "rules": [
           {
               "t": "set",
               "p": "payload",
               "pt": "msg",
               "to": "payload.{\"axisLabels\":$contains(_id,\"Datum\") ? val,\"data\": $contains(_id,\"Verbrauch\") ? val}",
               "tot": "jsonata"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 580,
       "y": 940,
       "wires": [
           [
               "86fca619786d1e49"
           ]
       ]
   },
   {
       "id": "86fca619786d1e49",
       "type": "change",
       "z": "5a7d3179c5870381",
       "name": "Erstelle Graph",
       "rules": [
           {
               "t": "set",
               "p": "payload",
               "pt": "msg",
               "to": "{\t   \"axisLabels\":payload.axisLabels,\t   \"graphs\":[\t       {\t           \"type\":\"line\",\t           \"data\":payload.data,\t           \"yAxis_id\":0,\t           \"yAxis_zeroLineWidth\":0.1,\t           \"yAxis_zeroLineColor\":\"black\",\t           \"barIsStacked\":true,\t           \"line_pointSize\":0,\t           \"line_Thickness\":4,\t           \"datalabel_show\":true,\t           \"datalabel_maxDigits\":2,\t           \"datalabel_minDigits\":2,\t           \"datalabel_fontFamily\":\"OpenSans-CondLight\",\t           \"datalabel_fontSize\":16,\t           \"datalabel_borderRadius\":6,\t           \"datalabel_offset\":-10,\t           \"datalabel_backgroundColor\":\"#3E4765\",\t           \"datalabel_color\":\"#f5f5f5\",\t           \"color\":\"#ff9900\",\t           \"line_UseFillColor\":false,\t           \"yAxis_gridLines_show\":false,\t           \"use_gradient_color\":true,\t           \"gradient_color\":[\t               {\"value\":8.5,\"color\":\"#d43e3a\"},\t               {\"value\":6,\"color\":\"#ff9900\"},\t               {\"value\":3,\"color\":\"#4f6765\"}\t           ],\t           \"yAxis_appendix\":\" kw/h\"\t       },\t       {\t           \"type\":\"bar\",\t           \"barIsStacked\":true,\t           \"data\":payload.data,\t           \"yAxis_id\":0,\t           \"barStackId\":0,\t           \"datalabel_show\":false,\t           \"color\":\"#000000\",\t           \"datalabel_color\":\"#FFFFFF\",\t           \"datalabel_align\":\"start\",\t           \"use_gradient_color\":true,\t           \"yAxis_show\":false,\t           \"yAxis_min\":0,\t           \"yAxis_maxSteps\":4,\t           \"yAxis_gridLines_border_show\":false,\t           \"yAxis_gridLines_ticks_show\":false,\t           \"yAxis_gridLines_show\":false,\t           \"gradient_color\":[\t               {\"value\":9.1,\"color\":\"#ED97A8\"},\t               {\"value\":5.5,\"color\":\"#F3D8A5\"},\t               {\"value\":-5,\"color\":\"#7CA27E\"}\t           ]\t       }\t   ]\t}",
               "tot": "jsonata"
           }
       ],
       "action": "",
       "property": "",
       "from": "",
       "to": "",
       "reg": false,
       "x": 760,
       "y": 940,
       "wires": [
           [
               "f1e2f69ae8e15d75"
           ]
       ]
   },
   {
       "id": "f1e2f69ae8e15d75",
       "type": "debug",
       "z": "5a7d3179c5870381",
       "name": "fertig",
       "active": true,
       "tosidebar": true,
       "console": false,
       "tostatus": false,
       "complete": "payload",
       "targetType": "msg",
       "statusVal": "",
       "statusType": "auto",
       "x": 950,
       "y": 940,
       "wires": []
   }
]

Ich werde diese Blockly-Quälerei NIE verstehen!!!!

[dos1973]

@mickym

moment, ich schau mal...

[mickym]

@dos1973
Wenn Du den flow triggerst (also die Inject Node drückst) brauchst ja nur den Wert raus zu kopieren, um zu sehen, ob es passt

Wenn Du das ganze in einem Datenpunkt haben willst - einfach noch eine JSON Node und eine iobroker-Out Node dahinter machen. Falls Du es über einen Datenpunkt triggern willst - zum Beispiel über VIS dann halt noch eine iobroker-IN Node mit dem Datenpunkt triggern.

[dos1973]

@mickym

scheint zu passen. wenn ich das manuell in den DP kopiere siehts gut aus.

[mickym]

@dos1973 sagte in json datei für Chart aus vorhandenen DP's erstellen:

@mickym

scheint zu passen. wenn ich das manuell in den DP kopiere siehts gut aus.

Na dann ist ja alles gut - dann kann ich meine Datenpunkte zum Testen und den Flow wieder löschen? Oder brauchst Du noch Hilfe zum externen triggern und um das Objekt in einem Datenpunkt zu schreiben?

[dos1973]

@mickym
warte noch mit löschen :-)

[mickym]

@dos1973 Wenn Du was am Graphen ändern willst, dann kannst Du das direkt einfach in der 2. Change Node machen:

also Farben oder was Du sonst noch so einstellen willst.