OH3 oh-chart on oh-grid-item data refresh

Add-ons UIs
1

Hello,

currently i migrate my OH2 Habpanel to new OH3 Pages. My Habpanel refresh the chart on data change but my oh-charts not refreshed on my room displays without manualy reload the page. How can i trigger chart refesh on item value update?

- component: oh-grid-item
    config:
      x: 6
      y: 6
      h: 3
      w: 5
    slots:
      default:
        - component: oh-chart
          config:
            period: D
            label: Außentemperatur
          slots:
            grid:
              - component: oh-chart-grid
                config:
                  containLabel: true
            xAxis:
              - component: oh-time-axis
                config:
                  gridIndex: 0
            yAxis:
              - component: oh-value-axis
                config:
                  gridIndex: 0
                  name: °C
            visualMap:
              - component: oh-chart-visualmap
                config:
                  show: false
                  pieces:
                    - min: -100
                      max: -9
                      color: purple
                    - min: -9
                      max: -5
                      color: Blue
                    - min: -5
                      max: 0
                      color: darkblue
                    - min: 0
                      max: 10
                      color: Green
                    - min: 10
                      max: 20
                      color: Lime
                    - min: 20
                      max: 26
                      color: yellow
                    - min: 26
                      max: 100
                      color: Red
            series:
              - component: oh-time-series
                config:
                  name: Außentemperatur
                  gridIndex: 0
                  xAxisIndex: 0
                  yAxisIndex: 0
                  type: line
                  color: green
                  item: TempOutdoor_ActualTemperature
                  areaStyle:
                    opacity: 0.5
            tooltip:
              - component: oh-chart-tooltip
                config:
                  confine: true
                  smartFormatter: true
            title:
              - component: oh-chart-title
                config:
                  show: true
                  text: Außentemperatur

Thanks for help!

2

Very good, I have exactly the same problem. I run the pages in kiosk mode on a terminal. Everything is updated, except the charts. If someone here has a solution, that would be great!

3

Thumbs up. Same problem here.

4

The way to force a refresh of a vue component is with the key property. Whatever else is going on, when this property changes, the component will be refreshed, so you just have to set that property so that it contains the state of the item and when the item state changes the component will know to refresh. There are a couple of caveats here:

  1. I don’t think this work within the oh-chart family of components, so you’ll have to put the key property in something that contains the chart (in this case the oh-grid-item will probably work).
  2. You cannot have two key properties on a page with the same value… So, one easy way to avoid this is to make the key property equal to the item state combined with a random number:
key: =Math.random() + items.TempOutdoor_ActualTemperature.state

This can be extended to just a periodic refresh instead, but it will take an extra item and a rule. If you create a DateTime item and a rule that runs on a cron period to update that DateTime to the current time, you now have an item that changes reliably at a given time interval. Use this DateTime item’s state in the key property instead and your chart should refresh at automatically at that time interval.

1 Like
5

i try different things but nothing works.
I create an updateChart switch with cron job to update the chart but no effects:

- component: oh-grid-item
    config:
       key: =(items["updateChart"].state)
   ...

any other ideas or I making a mistake?

6

I don’t work with the grid system much, which was why I qualified my statement before. The oh-grid-item is a vue based component, so I was hopeful that this would work at that level. It is, however, a very specialized component and so may not be passing the key property on faithfully. Without seeing the full configuration (rule, item, and all) I don’t know if this is a mistake somewhere or just that this doesn’t work if used on the oh-grid-item config. From what you have posted I can see that you missed the second point I listed above which is to make sure that the key value is unique. If you’ve tried to put that non-unique key value in more than one place on the page, it will fail.

It definitely works on the page level, so you could move the key statement up to the page config, but then the whole page refreshes which my be overkill.

You could also wrap the chart in an f7-block or f7-row first and put the key in there:

- component: oh-grid-item
  ...
  slots:
    default:
      - component: f7-block
        config:
          key: =Math.random() + items.TempOutdoor_ActualTemperature.state
        slots:
          default:
            - component: oh-chart
              ...

The downside there is you will likely need to work a little bit with the block’s or row’s stylings to get it to fill the grid item exactly.

Because this question has come up a lot at this point, I’ve started working on a lengthy tutorial. I’m hoping to get it posted later today or tomorrow. Then you’ll have a much better reference to follow if you haven’t figured it out by that point.

2 Likes
7

Here’s the long-form tutorial in case it helps:

1 Like
8

This works for me, thanks!!