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

[mcBirne]

Hallo,
wie kann ich zwei json Balkendiagramme übereinander stapeln?
sie sehen so aus:

{
  "graphs": [
    {
      "data": [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0.0394,
        0.1734,
        0.3426,
        0.5642,
        0.8597,
        1.0658,
        1.2647,
        1.4537,
        1.5717,
        1.6275,
        1.5753,
        1.4316,
        1.2612,
        1.0639,
        0.8393,
        0.5604,
        0.3117,
        0.1427,
        0.0376,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0.0623,
        0.2385,
        0.5911,
        2.4899,
        3.3474,
        2.3398,
        2.0681,
        2.4571,
        2.6116,
        2.5933,
        2.4051,
        2.1704,
        1.885,
        1.5193,
        1.172,
        0.7994,
        0.4257,
        0.228,
        0.0684,
        0
      ],
      "type": "bar",
      "legendText": "NordOst",
      "displayOrder": 1,
      "color": "#2839c3",
      "tooltip_AppendText": "kW",
      "datalabel_show": true,
      "datalabel_rotation": 270,
      "datalabel_color": "",
      "datalabel_fontSize": 0,
      "barIsStacked": true,
      "barStackId": 1,
      "yAxis_id": 0,
      "yAxis_position": "left",
      "yAxis_show": true,
      "yAxis_appendix": "kW",
      "yAxis_step": 1,
      "yAxis_max": 14.41,
      "yAxis_maximumDigits": 3
    }
  ],
  "axisLabels": [
    "09.02. 18:00",
    "09.02. 18:30",
    "09.02. 19:00",
    "09.02. 19:30",
    "09.02. 20:00",
    "09.02. 20:30",
    "09.02. 21:00",
    "09.02. 21:30",
    "10.02. 06:00",
    "10.02. 06:30",
    "10.02. 07:00",
    "10.02. 07:30",
    "10.02. 08:00",
    "10.02. 08:30",
    "10.02. 09:00",
    "10.02. 09:30",
    "10.02. 10:00",
    "10.02. 10:30",
    "10.02. 11:00",
    "10.02. 11:30",
    "10.02. 12:00",
    "10.02. 12:30",
    "10.02. 13:00",
    "10.02. 13:30",
    "10.02. 14:00",
    "10.02. 14:30",
    "10.02. 15:00",
    "10.02. 15:30",
    "10.02. 16:00",
    "10.02. 16:30",
    "10.02. 17:00",
    "10.02. 17:30",
    "10.02. 18:00",
    "10.02. 18:30",
    "10.02. 19:00",
    "10.02. 19:30",
    "10.02. 20:00",
    "10.02. 20:30",
    "10.02. 21:00",
    "10.02. 21:30",
    "11.02. 06:00",
    "11.02. 06:30",
    "11.02. 07:00",
    "11.02. 07:30",
    "11.02. 08:00",
    "11.02. 08:30",
    "11.02. 09:00",
    "11.02. 09:30",
    "11.02. 10:00",
    "11.02. 10:30",
    "11.02. 11:00",
    "11.02. 11:30",
    "11.02. 12:00",
    "11.02. 12:30",
    "11.02. 13:00",
    "11.02. 13:30",
    "11.02. 14:00",
    "11.02. 14:30",
    "11.02. 15:00",
    "11.02. 15:30",
    "11.02. 16:00",
    "11.02. 16:30",
    "11.02. 17:00",
    "11.02. 17:30",
    "11.02. 18:00"
  ]
}

und

{
  "graphs": [
    {
      "data": [
        0,
        0.091,
        0.217,
        0.341,
        0.411,
        0.468,
        0.487,
        0.461,
        0.42,
        0.328,
        0,
        0,
        0.077,
        0.189,
        0.344,
        0.486,
        0.569,
        0.574,
        0.554,
        0.499,
        0.346,
        0
      ],
      "type": "bar",
      "legendText": "At Home",
      "displayOrder": 1,
      "color": "#ffff00",
      "tooltip_AppendText": "kW",
      "datalabel_show": true,
      "datalabel_rotation": 270,
      "datalabel_color": "#000000",
      "datalabel_fontSize": 0,
      "barIsStacked": true,
      "barStackId": 1,
      "yAxis_id": 0,
      "yAxis_position": "left",
      "yAxis_show": true,
      "yAxis_appendix": "kW",
      "yAxis_step": 1,
      "yAxis_max": 7.56,
      "yAxis_maximumDigits": 3
    }
  ],
  "axisLabels": [
    "09.02. 07:54",
    "09.02. 08:15",
    "09.02. 09:00",
    "09.02. 10:00",
    "09.02. 11:00",
    "09.02. 12:00",
    "09.02. 13:00",
    "09.02. 14:00",
    "09.02. 15:00",
    "09.02. 16:00",
    "09.02. 17:35",
    "10.02. 07:52",
    "10.02. 08:15",
    "10.02. 09:00",
    "10.02. 10:00",
    "10.02. 11:00",
    "10.02. 12:00",
    "10.02. 13:00",
    "10.02. 14:00",
    "10.02. 15:00",
    "10.02. 16:00",
    "10.02. 17:37"
  ]
}

[Codierknecht]

@mcbirne

1. Das hat wohl weniger mit Blockly zu tun als mit dem anzeigenden System
2. Apropos System: Wie willst Du das anzeigen? Grafana, Charts ...

[mcBirne]

@codierknecht sagte in zwei json Balkendiagramme übereinander stapeln:

@mcbirne

1. Das hat wohl weniger mit Blockly zu tun als mit dem anzeigenden System

Da hast du recht.

2. Apropos System: Wie willst Du das anzeigen? Grafana, Charts ...

Ich möchte es als Json Chart anzeigen.

[Codierknecht]

@mcbirne sagte in zwei json Balkendiagramme übereinander stapeln:

Ich möchte es als Json Chart anzeigen.

Sorry - da bin ich dann raus.
Gut möglich, dass man das dafür dann doch erstmal aufbereiten muss. Nichts für ungut.

[mcBirne]

Habs herausgefunden. man muss den Teil vor der Achsbezeichnung einfügen.

{
  "graphs": [
    {
      "data": [
        0,
        0        
      ],
      "type": "bar",
      "legendText": "NordOst",
      "displayOrder": 1,
      "color": "#2839c3",
      "tooltip_AppendText": "kW",
      "datalabel_show": true,
      "datalabel_rotation": 270,
      "datalabel_color": "",
      "datalabel_fontSize": 0,
      "barIsStacked": true,
      "barStackId": 1,
      "yAxis_id": 0,
      "yAxis_position": "left",
      "yAxis_show": true,
      "yAxis_appendix": "kW",
      "yAxis_step": 1,
      "yAxis_max": 14.41,
      "yAxis_maximumDigits": 3
    }
  ],
"data": [
        0,
        0        
      ],
      "type": "bar",
      "legendText": "NordOst",
      "displayOrder": 1,
      "color": "#ff39c3",
      "tooltip_AppendText": "kW",
      "datalabel_show": true,
      "datalabel_rotation": 270,
      "datalabel_color": "",
      "datalabel_fontSize": 0,
      "barIsStacked": true,
      "barStackId": 1,
      "yAxis_id": 0,
      "yAxis_position": "left",
      "yAxis_show": true,
      "yAxis_appendix": "kW",
      "yAxis_step": 1,
      "yAxis_max": 14.41,
      "yAxis_maximumDigits": 3
    }
  ],
  "axisLabels": [
    "09.02. 18:00",
    "09.02. 18:30"
  ]
}