Bar charts in OH3?

Add-ons UIs
,
1

Hi.
I am setting up a new rain sensor in my system. I’m planning to make rules that based on the rain readings populates Items for rain per hour (ie one value for each hour) and rain per day (one value per day). The intuitively correct way to graphically represent those Items would be with bar charts, but in MainUI I just find options for line charts. Is it something I’m missing or is there no way of doing bar charts?

2

Use the oh-chart component for this, which was introduced with OH 3.1.0 M1 - it supports all type of charts (including bars).

3

Ah, that sounds like about what I need.

A stupid question though: Do I need to do any additional steps to get it working? I started with simply copy-pasting the first example from that thread, leaves me with nothing:

bild
bild738×447 9.81 KB

This is on 3.1M3.

4

Hey! Please note the syntax in first post in not correct anymore (only used that when doing the POC and was changed/updated when doing the PR) - the oh-serie is not correct, please use:

 - component: oh-time-series

Sorry for the confusion, will update my post and remove this to avoid any future confusion.

5

@crnjan Gave you the answer. :wink:

Here is one other example for a temp graph which you can switch between line and bar charts:

uid: lineChart_test
component: f7-card
slots:
  default:
    - component: oh-chart
      config:
        periodVisible: false
        options:
          backgroundColor: transparent
      slots:
        grid:
          - component: oh-chart-grid
            config:
              top: 110
              left: 55
              right: 15
              height: 160
        title:
          - component: oh-chart-title
            config:
              left: center
              text: Temperature
              subtext: Some room
              top: 10
        tooltip:
          - component: oh-chart-tooltip
            config:
              trigger: axis
        toolbox:
          - component: oh-chart-toolbox
            config:
              left: center
              itemSize: 25
              top: 60
              feature:
                dataView:
                  readOnly: false
                dataZoom:
                  yAxisIndex: none
                magicType:
                  type:
                    - line
                    - bar
                restore: {}
                saveAsImage: {}
        xAxis:
          - component: oh-time-axis
            config:
              type: time
              boundaryGap: false
              gridIndex: 0
              axisLabel:
                show: true
        yAxis:
          - component: oh-value-axis
            config:
              type: value
              itemStyle:
                color: rgb(255, 70, 131)
              gridIndex: 0
              splitLine: false
              axisTick:
                inside: true
              axisLabel:
                formatter: "{value} °C"
              boundaryGap:
                - 0
                - 100%
        series:
          - component: oh-time-series
            config:
              itemStyle:
                color: rgb(255, 158, 68)
              name: Temperatur
              type: line
              item: =props.item
1 Like
6

Thanks! I’ve never done any own widgets before, so it feels like a threshold before I understand exactly how it works, but this feels like a starting point :slight_smile:

7

Would anyone know how to make bars in charts transparent ? The above has not worked for me (on OH4.0.1).
I have two bar-charted values that always cross, hiding part either part of visual information either on the left side of the crossing or on the other side.