Charts in OH3

@mashborn: Can you post the yaml code for this example?

config:
  label: Heizverlauf
  sidebar: true
  period: 2D
slots:
  grid:
    - component: oh-chart-grid
      config: {}
    - component: oh-chart-grid
      config:
        show: true
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
    - component: oh-time-axis
      config:
        gridIndex: 1
    - component: oh-time-axis
      config:
        gridIndex: 2
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
    - component: oh-value-axis
      config:
        gridIndex: 0
        scale: true
    - component: oh-value-axis
      config:
        gridIndex: 1
    - component: oh-value-axis
      config:
        gridIndex: 2
        name: °C
        max: "60"
        nameGap: -2
        position: right
    - component: oh-value-axis
      config:
        gridIndex: 2
  series:
    - component: oh-time-series
      config:
        name: Warmwasser
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: H_WP_Warmwasser_RuntimeMinutes
        color: "#0000ff"
    - component: oh-time-series
      config:
        name: Heizung
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: H_WP_Heizung_RuntimeMinutes
        color: "#ff0000"
    - component: oh-time-series
      config:
        name: Pumpe läuft
        gridIndex: 1
        item: Heizung_Pumpe
        xAxisIndex: 1
        yAxisIndex: 2
        type: line
        areaStyle: {}
        color: "#bbbbbb"
        step: end
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: Heizung_Pumpe
              item: Heizung_Pumpe
    - component: oh-time-series
      config:
        name: Heizstab läuft
        gridIndex: 1
        item: Heizung_Heizstab
        xAxisIndex: 1
        yAxisIndex: 2
        type: line
        areaStyle: {}
        color: "#ff9999"
        step: end
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: Heizung_Heizstab
              item: Heizung_Heizstab
    - component: oh-time-series
      config:
        name: Kesseltemperatur
        gridIndex: 2
        xAxisIndex: 2
        yAxisIndex: 3
        type: line
        item: H_WP_Kesseltemperatur
    - component: oh-time-series
      config:
        name: Aussentemperatur
        gridIndex: 2
        xAxisIndex: 2
        yAxisIndex: 3
        type: line
        item: Wetterstation_Aussentemperatur
    - component: oh-time-series
      config:
        name: H_WP_Leistung_1W
        gridIndex: 2
        xAxisIndex: 2
        yAxisIndex: 4
        type: line
        item: H_WP_Leistung_1W
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: inside
  legend:
    - component: oh-chart-legend
      config:
        show: true

not sure this is the right place to post this question…

I have partial success to get Grafana charts into OH3 Main UI.
(Yes, I still prefer Grafana over the built in chart function OH3, since the Grafana charts have a much nicer look.)

In OH2 sitemap I used:

Image refresh=60000 url="http://192.168.0.13:3000/render/d-solo/4OdYJNbMk/test?orgId=1&from=now-6h&to=now&panelId=2&width=1000&height=500&tz=Europe%2FVienna" visibility=[test_chart_period=="0"]

I managed to get the chart into Main UI with the Image card/widget.

Now I wonder:

  • How to automatically refresh the image e.g. once a minute? or any other way to refresh the image?
  • How to apply visibility - is there the same or similar function for OH3 Main UI?

Same setup here. I’m also thinking about it. Did you go that way? What’s about the historical data in Influxdb. Did you migrate them to rrd4j (as far as that makes sense with a RoundRobinDB)?

@opus is working on a tool to do that migration. It works be awesome if you could help test it. See

I think I’m going to just cut it off and start a new. I don’t have any need to see more than a month worth a data anyway.

As of me the works are completed

How can i solve this problem?
I have serveral items with channels humidity.
Value of humidity ist actual 81%:
image 1

When i click to analyze item to chart, then the y-axis in chart show false range 0-1%
but correct range should be 0-100%

How are the items defined? In truth a percentage is a value between 1 and 0 and that’s what’s being charted here. 80% is 0.8.

But it charts 0,8% and not 0,8.

I’ve got similar problems charting CO2 values in ppm and noise in dB.
And for some reason also with “mm” of the Netatmo rain sensor .

Again, I won’t be able to do anything without the Item defnitions.

Here one example for CO2 and its ppm values:

In fact, the item correctly displays in 1209 ppm, but the chart shows 0,001 ppm, which is a factor of 1 million away.

Same issue I have with “mm” (factor 1.000), “%” (factor 100), and dB…

1 Like

All humidity items has Type “Number:Dimensionless”.
All items shows in the overview of items in the UI values between 0 and 100 percent.
See here:

But 2 items has in the chart values between 0 and 1 percent.
See below:

Hint: the 2 humidity items are also netatmo-items (indoor and outdoor modul)
See by @maxmaximax
Netatmo-Binding problem?

adding noise (dB) and rain (mm)…

Use the REST API and query for the current states of these Items. Don’t use events.log or the UI for this as the value is already transformed by Unit of Measurement at those points. I’m hoping that through the REST API we can see the actual value the Item is stored prior to transformation.

The database is going to store that actual state, not a transformed state.

You can also use the REST API explorer to query what values are stored in the database for those Items. That will show the actual values being used to chart with. But it’s already pretty clear that it’s storing the percentages for those Items as a value between 0 and 1, not 0 and 100.

REST API:
Get the status of persistence/items of ‘OutdoorModulWolferstadt_Humidity’ is 0,88000000000001

for comparison: the status of ‘WandthermostatWohnzimmer_Humidity’ is 33.0

you’re right @rlkoshak.
How can i change this state value of OutdoorModulWolferstadt_Humidity to 88.0?
Is this a issue of the netatmo-binding?

CO2:

  • REST API: 0.001209
  • Main UI: 1209 ppm
  • Chart: 0.001 ppm

Noise:

  • REST API: 19952.62314968879
  • Main UI: 47 dB
  • Chart: 50 dB (value shown on marker = 50118.723

Rain:

  • REST API: 0.029500000000000002
  • Main UI: 29.50 mm
  • Chart: 0.03 mm

I added State Transformation in Metadata: %d %%
I guess this is rather a workaround than a solution, since I couldn’t find any such tweak for CO2, Noise and Rain.

I also had that in mind, since I only have these issues with Netatmo devices…
Let’s see.

2 Likes

I have same problem with CO2 and Noise like @maxmaximax
I don’t have rain and wind modules in use.

I have the same issue with the Senec-binding: the fuel level of the battery is in the chart between 0 and 1% instead of 0 and 100%

Sounds like it might be. It’s not a problem necessarily. Values between 0 and 1 for percent isn’t necessarily incorrect. But you an apply a transform profile to multiply the value by 100 before it gets to the item.

How can i create such transform profile?
My attempt to set an offset value (*100) as profile in the channel of the item, was not successful.
It is possible to create it in the Main UI? Where?