How to show Chart for itemstates switchitem ON/OFF in a page

Add-ons UIs
1

Hi all,
i can do complicate scripts but i have a simple problem with new page which i cannot do and this time i thought im asking you if someone can help me. Openhab is 4.0.1 but the problem i had with older versions too.

What i have: some items which having ON OFF state like that which is showing states correctly:

Bildschirmfoto vom 2023-08-08 08-21-17
Bildschirmfoto vom 2023-08-08 08-21-171961×1144 26.7 KB

I want to make pages like this simple testpage with only adding the item to page:

config:
  label: test_status
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: Series 1
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: bar
        item: status_anwesend

But the result whatever im changing is not same:

Bildschirmfoto vom 2023-08-08 08-28-46
Bildschirmfoto vom 2023-08-08 08-28-461705×1131 19.4 KB

My problem is, that i dont understand whats wrong. Later i want to show Switch-Items together with other graphs. What im doing wrong? The only thing what im doing is Adding TimSeries, Selecting the Item and clicking type bar and save.
Hope someone can help me what im doing wrong.

Best regards
Andreas

2

Charting ON/OFF items differs from a “normal” oh-time-series. You need to add a markArea to the chart:
In your code, change the type to line
Replace item: xxxx with:

        markArea:
          - component: oh-mark-area
            config:
              item: status_anwesend
              name: yyyy

For more disucssion about charts of switches have alook at this thread: OH3: Charts/Graphs/Plots - #17 by spy0r

3

Thank you. It works this way. So i learned that it is not possible from the graphical ui assistant to make this kind of oh-mark-areas. but it is possible if im modifying th code manually. Thanks!