Displaying Switch Item in Custom Widget

Setup, Configuration and Use Beginners
1

Greetings forum members,

I am trying to display a chart from a switch item in a custom widget.

All of the examples here on the forum are working for me, as long as the item I am displaying is “number”, none has worked for me so far using a Switch (ON/OFF) item.
Nothing is shown in the graph.

For OpenHab 3.2, what should I be using to display a switch item?

oh-aggregate-series
oh-time-series
to show in a day graph when switch was ON/OFF

Any help very much appreciated.
Thanks!

2

I assume you mean that you want to see the on off area blocked off as in the default charts for switches. In that case you still use a time series. But you have to add to that series a mark area. I think you have to do this in the code tab, I don’t believe that there’s a UI wizard for this. It looks like this:

    - component: oh-time-series
      config:
        name: On Off Block Series
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: Some Label Here
              item: Item_Name_Goes_Here
3

Many thanks for your reply. I was playing earlier around with the “oh-mark-area” with no success.
I have the feeling one little syntax error screws up the whole widget, here is what I have so far:

uid: pumpen_graphen
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 11, 2022, 2:37:49 AM
component: f7-card
config:
  width: 75
slots:
  default:
    - component: oh-chart
      config:
        chartType: ""
        label: =props.chart1
        period: D
      slots:
        dataZoom:
          - component: oh-chart-datazoom
            config:
              type: inside
        grid:
          - component: oh-chart-grid
            config:
              containLabel: false
        legend:
          - component: oh-chart-legend
            config:
              bottom: 3
              type: scroll
        series:
          - component: oh-time-series
            config:
              name: Brunnen
              gridIndex: 0
              xAxisIndex: 0
              yAxisIndex: 0
              type: line
              areaStyle: {}
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    name: BrunnenBars
                    item: item
                    silent: false
          - component: oh-chart-tooltip
            config:
              confine: true
              smartFormatter: true
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
              min: 0
              name: LosHuncos

Is there any way to debug this?

Thank you very much!

4

I think there are a couple of tings going on here.

  1. You need the tooltip slot for the oh-chart-tooltip so that’s probably cause the entire chart rendering to fail.
tooltip:
  - component: oh-chart-tooltip
    config:
      confine: true
      smartFormatter: true
  1. In the markArea itself, item: item is not meaningful. You need to have the name of an item set there. But I think the news is worse than that. It looks like you meant to have item: =props.item for that line, but I don’t think that will work. There are only some properties within the chart components that will accept expressions and I don’t think this is one of them. So, I don’t believe there is anyway to make the item of a mark area dynamic.