Widget Chart

Hamlet · August 7, 2022, 9:43am

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

Nadalio · October 17, 2022, 2:40pm

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.

Hamlet · October 20, 2022, 9:39am

look here:

Nadalio · October 20, 2022, 11:58am

Thank you!

Nadalio · November 6, 2022, 5:12pm

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!

Hamlet · November 10, 2022, 9:31am

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

GrantElliot · November 11, 2022, 2:20pm

Thanks for sharing this.

mtrax · June 26, 2023, 10:44am

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

crnjan · June 26, 2023, 10:50am

Which OH version are you using?

period: =props.graphPeriod

will only work with OH 4.

mtrax · June 26, 2023, 10:51am

Stable 3.4.4

mtrax · June 28, 2023, 3:55am

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

crnjan · June 28, 2023, 4:22am

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.

brononius · July 9, 2023, 9:30am

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?

SamuelChukweze · August 5, 2023, 6:48am

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

HarryKane · August 12, 2023, 12:13pm

Thanks alot.

AlleneBrick1 · September 21, 2023, 4:14pm

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.