Widget Chart

Chart widget with up to three items, and selectable filld area for each item. Refreshes when item is updated.

Changelog

Version 0.1

  • initial release

Resources

uid: CHART_Widget
tags: []
props:
  parameters:
    - description: Header of the cell
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      label: Graph Item 1
      name: graphItem1
      required: false
      type: TEXT
    - label: Area 1 filled
      name: area1filled
      required: false
      type: BOOLEAN
    - context: item
      label: Graph Item 2
      name: graphItem2
      required: false
      type: TEXT
    - label: Area 2 filled
      name: area2filled
      required: false
      type: BOOLEAN
    - context: item
      label: Graph Item 3
      name: graphItem3
      required: false
      type: TEXT
    - label: Area 3 filled
      name: area3filled
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Aug 7, 2022, 7:57:23 AM
component: f7-card
config:
  key: =Math.random() + items[props.graphItem1].state.split(" ")[0] + items[props.graphItem2].state.split(" ")[0] + items[props.graphItem3].state.split(" ")[0]
  style:
    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
    background-color: rgba(0,0,0,0)
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.header ? props.header : ''"
  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-page
            config:
              containLabel: true
              includeLabels: true
              show: false
              width: 95%
              left: 20px
              top: 16px
              height: 85%
        legend:
          - component: oh-chart-legend
            config:
              bottom: 0px
              show: true
              type: scroll
        series:
          - component: oh-time-series
            config:
              areaStyle:
                opacity: "=props.area1filled ? 0.2 : 0.0"
              item: =props.graphItem1
              name: =props.graphItem1
              markPoint:
                data:
                  - name: Max
                    type: "=props.item1max ? 'max' : ''"
                  - name: Min
                    type: "=props.item1min ? 'min' : ''"
                  - name: Average
                    type: "=props.item1average ? 'average' : ''"
              smooth: true
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
          - component: oh-time-series
            config:
              areaStyle:
                opacity: "=props.area2filled ? 0.2 : 0.0"
              gridIndex: 0
              item: =props.graphItem2
              name: =props.graphItem2
              markPoint:
                data:
                  - name: Max
                    type: "=props.item2max ? 'max' : ''"
                  - name: Min
                    type: "=props.item2min ? 'min' : ''"
                  - name: Average
                    type: "=props.item2average ? 'average' : ''"
              smooth: true
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
          - component: oh-time-series
            config:
              areaStyle:
                opacity: "=props.area3filled ? 0.2 : 0.0"
              item: =props.graphItem3
              name: =props.graphItem3
              markPoint:
                data:
                  - name: Max
                    type: "=props.item3max ? 'max' : ''"
                  - name: Min
                    type: "=props.item3min ? 'min' : ''"
                  - name: Average
                    type: "=props.item3average ? 'average' : ''"
              smooth: true
              type: line
              xAxisIndex: 0
              yAxisIndex: 0
        tooltip:
          - component: oh-chart-tooltip
            config:
              confine: true
              orient: vertical
              show: true
              smartFormatter: true
        xAxis:
          - component: oh-time-axis
            config:
              gridIndex: 0
        yAxis:
          - component: oh-value-axis
            config:
              gridIndex: 0
4 Likes

Hi,
that looks nice. How can I set it to update only once a minute? Because my data gets updated every 2 seconds and this would be too much redraws.
Thanks.

look here:

Thank you!

Hi Hamlet,

is there any chance to change the layout of the menu (period selection)? I did only find some few --f7-elements and normal css does not work in the scoped-cage.

Another thing: As I read there is no possibility to stear the period with expressions. Is there any workaround to use this with popup-props, so I can open my chart page with a period parameter?

Thank you!

oh, i can’t answer your questions, unfortunately. Maybe someone else knows?

Thanks for sharing this.

thanks for the widget, does anyone know how to make the default Period selecting in the properties
I tried but it doesn’t seem to resolve correctly

eg

- description: Period 4H,D,W,2H
  label: Graph Period
  name: graphPeriod
  required: false
  type: TEXT

default:
- component: oh-chart
config:
options:
color:
- rgba(255,0,0,1)
- rgba(0,255,255,1)
- rgba(0,255,0,1)
period: =props.graphPeriod

Which OH version are you using?

period: =props.graphPeriod

will only work with OH 4.

Stable 3.4.4

Has OH v4 updated the chart engine, because I can’t seem to get the formatter for MarkPoint working as well?

Before Generalize evaluating expressions for charts & fix diff_last aggregates by crnjan · Pull Request #1649 · openhab/openhab-webui · GitHub only a handful of properties were evaluated for charts. Now you should be able to evaluate pretty much all of them. But as said, this is part of OH 4.

1 Like

When see the code, I assume I can add custom text (labels) to the items?
But in the actually widget, these settings seems not be available?

How to limit updates to once a minute due to frequent data changes? Seeking advice.

Thanks alot.

This widget appears to be a Chart component with the ability to display up to three items, each with a selectable filled area. It refreshes when an item is updated. It seems to be suitable for creating interactive charts and graphs in UI applications.