Colored graph support for switch, contact and text items

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:

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