[UI-Widget] Widget with a bar-chart, how to select an item via props?

Setup, Configuration and Use Widgets
1

Hello,
how do I get the item to be displayed in a chart with bars, which I can parameterize via the props? Unfortunately, this only works for me if I specify the item directly in the yaml. However, it works with line views.
I have the same question about the name of the y-axis.

Thanks
Heiko

uid: widget_chart_Balken
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: true
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      description: A item to chart
      label: item1
      name: item1
      required: false
      type: TEXT
    - description: Bezeichnung item1
      label: Description 1
      name: desc1
      required: false
      type: TEXT
    - description: Einheit item1
      label: Unit
      name: unit
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jan 11, 2023, 8:06:31 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7-card-header
      slots:
        default:
          - component: Label
            config:
              text: =props.title
              text-align: left
          - component: f7-icon
            config:
              f7: =props.icon
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: f7-row
                        slots:
                          default:
                            - component: f7-col
                              slots:
                                default:
                                  - component: oh-chart
                                    config:
                                      backgroundcolor: transparent
                                      chartType: day
                                      height: 240px
                                      label: props.title
                                      period: d
                                    slots:
                                      dataZoom:
                                        - component: oh-chart-datazoom
                                          config:
                                            type: inside
                                      grid:
                                        - component: oh-chart-grid
                                          config:
                                            containLabel: false
                                            height: 60%
                                      series:
                                        - component: oh-aggregate-series
                                          config:
                                            aggregationFunction: last
                                            dimension1: hour
                                            gridIndex: 0
                                            item: gEQKlima_NetAtmoRegen_KumulierterNiederschlag1h
                                            name: =props.desc1
                                            type: bar
                                            xAxisIndex: 0
                                            yAxisIndex: 0
                                      tooltip:
                                        - component: oh-chart-tooltip
                                          config:
                                            show: true
                                      xAxis:
                                        - component: oh-category-axis
                                          config:
                                            categoryType: day
                                            gridIndex: 0
                                            monthFormat: default
                                            weekdayFormat: default
                                      yAxis:
                                        - component: oh-value-axis
                                          config:
                                            gridIndex: 0
2

This was added recently, installing latest 4.0 snapshot should do the trick. Please give it a spin when possible and let me know how it goes.

3

OK thanks. I am currently using openhab 3.4.1. So is it a bug? I would have to set up a test system. Is there a chance that this will be fixed in 3.4.x?

4

I would rather call it a limitation, but regardless of how we call it, it’s not implemented in 3.4.1 and also not sure about the plan about what will be included in any potential 3.4.x version … also some other (rrd4j related) changes are needed too (in core) and would need to be cherry-picked …

5

With the 4.0 snapshort it works. The item and the y-axis name can parameterize via the props.

1 Like