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

[Scriptwriter (Andreas)]

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:

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:

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

[Fleck (Jens Heilig)]

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

[Scriptwriter (Andreas)]

@Scriptwriter

status_anwesend

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!

[PabloP (Pawel G)]

Based on the information in that thread I tried to build a history graph of a switch (later on few switches on the same page).

config:
  label: Heating history
  period: 2D
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: test
        scale: true
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
      slots:
        markArea:
          - component: oh-mark-area
            config:
              item: 1_Relay
              name: 1_Relay

However the history doesn’t look a proper switch on/off graph with a proper 2 stages.

Is there a way to do in like that:

[DiegoDf (Diego)]

Hi Pablo,

You can use multiple grids. Here is an example of your code with two grids.

config:
  label: Heating history
  period: 2D
  options:
    axisPointer:
      link:
        xAxisIndex: all  
slots:
  grid:
    - component: oh-chart-grid
      config: 
        bottom: "50"
        height: "400"
    - component: oh-chart-grid
      config: 
        bottom: "500"
        height: "400"
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
    - component: oh-time-axis
      config:
        gridIndex: 1
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: test
        scale: true
    - component: oh-value-axis
      config:
        gridIndex: 1
        name: test
        scale: true
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
      slots:
        markArea:
          - component: oh-mark-area
            config:
              item: 1_Relay
              name: 1_Relay
    - component: oh-time-series
      config:
        gridIndex: 1
        xAxisIndex: 1
        yAxisIndex: 1
        type: line
      slots:
        markArea:
          - component: oh-mark-area
            config:
              item: 2_Relay
              name: 2_Relay