Colored graph support for switch, contact and text items

Add-ons UIs
1

Hi all,

I am currently setting up some graphs for my items with OpenHAB 3 Pages. I noticed that there is no possibility to make graphs for e.g. switch, contact or text items. It would be nice to make some of these, for example to display a presence (home/away) history.

Homeassistant for example has a nice feature to make such graphs:

homeassistant_history
homeassistant_history1201×788 99.5 KB

(source: Home Assistant | MySensors - Create your own Connected Home Experience)

Is something like this already possible? Or do you think this feature could be added in future?

Thanks for your help :slight_smile:

2

If you press the “Analyze” button on the configuration page of a switch item it should give you a (full-screen) page of the switch.

For switches (and also for contact items) it is possible to create a chart page like the one in your screenshot, but it requires some additional work:
Create a standard line chart with your switch item
In the chart editor switch to “Code” Tab
In the - component: oh-time-series section replace the line item: xxxx with

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

where “xxxx” is the ID of the switch
or contact item you want to chart. This gives you a full-page chart for one item.

If you want something like in your screenshot, with multiple switches or contacts, it gets a bit more cumbersome: You need to add a grid for each item and in the Configure Grid properties dialog change the top (or bottom) and height properties for each grid so they do not overlap.
(Perhaps somebody will eventually write a nice widget with a repeater to automate this, but so far the only way I know is to do this manually). I use this to get an overview of the presence of the family members over the last two weeks:

grafik
grafik869×284 9.92 KB

There is a more detailed description in this thread: OH3: Charts/Graphs/Plots - #14 by jensflorian

This is not as nice as a Grafana solution, but it does not require the additional installation of InfluxDB and Grafana. However, if you do use Grafana, a (much simpler, IMHO) solution is described here: Grafana InfluxDB - Help with queries and creating graphs and charts - #6 by Fleck

4 Likes
3

Thanks. This is exactly what I was looking for :+1:

4

Can you share your code please?

5

@Fleck could you share your code please?

6

Sure. I have meanwhile created a UI script to generate the code. I‘ll see if I can create a short tutorial.

Meanwhile, here is the code for a widget which has 5 timelines for 5 switches. The widget looks like this:

Bild
Bild1975×664 32.1 KB

This is the widget code:


uid: Widget_Chart_OnlineTimeline
tags:
  - chart
  - widget
  - timeline
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
  parameterGroups: []
timestamp:
component: f7-card

config:
  key: =Math.random() + items["EspGarageDoor_DeviceStatus"].state.split(" ")[0] + items["Wifilight03_DeviceStatus"].state.split(" ")[0] + items["Wifilight06_DeviceStatus"].state.split(" ")[0] + items["Wifiplug10_DeviceStatus"].state.split(" ")[0] + items["Zigbeeplug01_DeviceStatus"].state.split(" ")[0]
  style:
    background-color: rgba(0,0,0,0)
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title ? props.title : ''"
  default:
    - component: oh-chart
      config:
        options:
          color:
            - rgba(255,0,0,1)
            - rgba(0,255,255,1)
            - rgba(0,255,0,1)
        period: W
      slots:
        grid:

          - component: oh-chart-grid
            config:
              bottom: 68.6%
              show: true
              height: 15.4%
              left: 91px

          - component: oh-chart-grid
            config:
              bottom: 53.2%
              show: true
              height: 15.4%
              left: 91px

          - component: oh-chart-grid
            config:
              bottom: 37.8%
              show: true
              height: 15.4%
              left: 91px

          - component: oh-chart-grid
            config:
              bottom: 22.4%
              show: true
              height: 15.4%
              left: 91px

          - component: oh-chart-grid
            config:
              bottom: 7%
              show: true
              height: 15.4%
              left: 91px
        series:
          - component: oh-time-series
            config:
              gridIndex: 0
              name: EspGarageDoor
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
              service: influxdb
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: EspGarageDoor_DeviceStatus
                    name: EspGarageDoor

          - component: oh-time-series
            config:
              gridIndex: 1
              name: Wifilight03
              type: line
              xAxisIndex: 1
              yAxisIndex: 1
              service: influxdb
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: Wifilight03_DeviceStatus
                    name: Wifilight03

          - component: oh-time-series
            config:
              gridIndex: 2
              name: Wifilight06
              type: line
              xAxisIndex: 2
              yAxisIndex: 2
              service: influxdb
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: Wifilight06_DeviceStatus
                    name: Wifilight06

          - component: oh-time-series
            config:
              gridIndex: 3
              name: Wifiplug10
              type: line
              xAxisIndex: 3
              yAxisIndex: 3
              service: influxdb
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: Wifiplug10_DeviceStatus
                    name: Wifiplug10

          - component: oh-time-series
            config:
              gridIndex: 4
              name: Zigbeeplug01
              type: line
              xAxisIndex: 4
              yAxisIndex: 4
              service: influxdb
            slots:
              markArea:
                - component: oh-mark-area
                  config:
                    item: Zigbeeplug01_DeviceStatus
                    name: Zigbeeplug01
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
              splitLine:
                show: true
              axisLabel:
                show: false
              axisLine:
                show: false
              axisTick:
                show: false

          - component: oh-time-axis
            config:
              gridIndex: 1
              splitLine:
                show: true
              axisLabel:
                show: false
              axisLine:
                show: false
              axisTick:
                show: false

          - component: oh-time-axis
            config:
              gridIndex: 2
              splitLine:
                show: true
              axisLabel:
                show: false
              axisLine:
                show: false
              axisTick:
                show: false

          - component: oh-time-axis
            config:
              gridIndex: 3
              splitLine:
                show: true
              axisLabel:
                show: false
              axisLine:
                show: false
              axisTick:
                show: false

          - component: oh-time-axis
            config:
              gridIndex: 4
              splitLine:
                show: true
              axisLabel:
                show: true
              axisLine:
                show: true
              axisTick:
                show: true
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
              name: EspGarageDoor
              nameLocation: center
              nameGap: 5
              nameRotate: "0"

          - component: oh-value-axis
            config:
              gridIndex: 1
              name: Wifilight03
              nameLocation: center
              nameGap: 5
              nameRotate: "0"

          - component: oh-value-axis
            config:
              gridIndex: 2
              name: Wifilight06
              nameLocation: center
              nameGap: 5
              nameRotate: "0"

          - component: oh-value-axis
            config:
              gridIndex: 3
              name: Wifiplug10
              nameLocation: center
              nameGap: 5
              nameRotate: "0"

          - component: oh-value-axis
            config:
              gridIndex: 4
              name: Zigbeeplug01
              nameLocation: center
              nameGap: 5
              nameRotate: "0"
2 Likes