Units in chart legend

Setup, Configuration and Use Widgets
1

Hi,
I’m looking to display the unit of a (UoM) item in OH charts legend (“tooltip”).
I mean the box that appears when I mouse-over a chart, it’s only showing the values, not any units.
Can I define them manually ? I did not find an option for that.
I know persistence only stores values, but if so, with recent UoM improvements, the unit to display could be taken from the displayPattern/displayState, too.

2 Likes
2

Does anyone know how to do this ? @JustinG our master of charts maybe ? Thanks!

3

Hi, I am sorry to not be of more help but as far as I remember, you can have a look at the echarts documentation and then try to get that into OHs config format.

It is a lot of trial and error though…

Edit: Hmm maybe I misread your question, I guess you want it to be dynamic? Maybe with some kind of variable but thats beyond my knowledge… sorry

4

That’s the tooltip.

Adding a static unit to the tooltip is very easy. The valueFormatter property will take an arrow function expression:

tooltip:
  - component: oh-chart-tooltip
    config:
      show: true
      valueFormatter: =x=>`${x} UoM`

I’ve never tried to make that dynamic, so I only know that it’s possible within the limits of the expression system (i.e., you could replace UoM with a variable or item state). If you have more than one series in the tooltip and you want different units then I doubt it’s possible, but I don’t know.

5

openHAB verison 4.1.2.

I have tried to display the units with

valueFormatter: =x=>'${x} UoM'

, unfortunately without success. Nothing is displayed in the openHAB log.

With

formatter: "{a}:<br>{c} ° C"

as described in the eCharts docu I see the following.

But I would like the unit to be displayed automatically. Does anyone have an idea?

image
image915×684 12.8 KB

Test Page Code 
config:
  label: Test Chart Unit Formatter
  period: W
  sidebar: false
slots:
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: slider
  grid:
    - component: oh-chart-grid
      config: {}
  legend:
    - component: oh-chart-legend
      config:
        show: true
  series:
    - component: oh-time-series
      config:
        dataZoomIndex: 1
        gridIndex: 0
        item: HeizungWarmwassersensorMQTT_Temperature
        markLine:
          data:
            - name: Average
              type: average
        markPoint:
          data:
            - name: max.
              type: max
            - name: min.
              type: min
        name: Wasser Temperatur
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
  toolbox:
    - component: oh-chart-toolbox
      config:
        bottom: "10"
        left: 2%
        presetFeatures: saveAsImage
        show: true
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        formatter: "{a}:<br>{c} °C"
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: m³
        nameLocation: start
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: l/h
        nameLocation: start
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: m³
6

Neither for me, valueFormatter does not have any effect.
valueFormatter became available in eCharts 5.3 - is that already part of OH ?

And given that I have a set of items to display plus that their display can be toggled per-item,
any dynamic solution based on formatter now would be quite a scripting challenge, wouldn’t it?
Even the Apaches themselves say so in that link.

7

Definitely works

image

But, Markus is correct, eCharts in OH is currently on 5.5, but that was updated only a few months ago it seems, so I don’t know which 4.1 updates might have the right libraries.

Part of the problem might be that you changed the expression. I used a string template with backticks `...` you changed it to a string literal with single quotes '...'. That’s probably not the whole problem, since you should still have seen the string literal in the tooltip, so it’s possible that 4.1.2 doesn’t have the required update yet.

Actually, that link gives the solution (again, if you’re on a recent enough version). I didn’t know that you could apply a per series override to the tooltip value formatter. But:

  series:
    - component: oh-time-series
      config:
        name: Series 1
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: BehrendWeather_Temperature
        tooltip:
          valueFormatter: =x=>`${x} UoM1`
    - component: oh-time-series
      config:
        name: Series 2
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Thermostat_Upstairs_Temperature
        tooltip:
          valueFormatter: =x=>`${x} UoM2`
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true

image

2 Likes