[Main UI] echarts gauge and pie POC

Hey again @crnjan

Thanks for your quick answer and the easy trick. :wink:

This would be very helpful to have, yes!

Some things I recognized while fiddling around with the ECharts:

  • Line charts (and maybe other chart types) will set its own background in dark mode, instead of being transparent as in light mode - so that custom styling on the enclosing component gets hidden behind.

  • You mentioned it already, but there are some missing components & props within the inline help (like oh-chart-title, oh-chart-toolbox, oh-chart-tooltip and maybe more…)

  • Somehow connected to the above point - it’s hard to abstract the configuration of the charts from the ECharts example page to the YAML configuration in OH.

    Understanding what is a component and what is a setting took me some time and I’m still struggling on some of them…

    Example #1: Assigning a background gradient to a line-chart.

    • How would I translate this part
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      to usable YAML?

      See full ECharts example (linear gradient)
         areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
                 color: 'rgb(255, 158, 68)'
             }, {
                 offset: 1,
                 color: 'rgb(255, 70, 131)'
    • Or is it even necessary to work with these custom echart graphic classes (if this is the right term here…)?

    Example #2: Changing the timestamp-format in the tooltip.

    • I couldn’t find anything obvious about changing the tooltip-timestamp to a local format (like dd. MM yyyy) in the docs - a google search brought me to this function (which don’t work):

      Example changing timestamp in a tootltip (via google search)
        tooltip: {
         trigger: 'axis',
         formatter: function(params) {
             params = params[0];
             var chartdate = echarts.format.formatTime('dd-MM-yyyy', params.value[0]);
             var val = '<li style="list-style:none">' + params.marker +
                 params.seriesName + '&nbsp;&nbsp;' + params.value[1] + '</li>';
             return chartdate + val;
    • I could imagine that executing js functions isn’t allowed for security reasons?! Or did I miss anything here?

  • I think adding the single axis (timeline)-chart could also be helpful in the future, to achieve something like the BasicUI timeline inside the MainUI without have to fiddle something similar with f7-components:
    See → Timeline for Basic UI - #15 by Mihai_Badea

    The single axis type, looks like it would fit that use-case?!

Maybe you’ll find time give me some advice here or at least use this for future development of the implementation. :slight_smile:

Thank you!

Quick feedback - ECharts set some blueish background when in dark mode and we override it with

chartConfig.backgroundColor = '#121212'

so following same paradigm … That said, you can always override it

- component: oh-chart
      backgroundColor: transparent

not sure if it would make sense to set it to transparent by default …

I also prepared a PR that should enable binding like

 item: =props.item

Will try to add feedback for other questions too …



            type: linear
            x: 0
            y: 0
            x2: 0
            y2: 1
              - offset: 0
                color: red
              - offset: 1
                color: blue
            global: false


I’m on 3.1 snapshot now, too, and testing around.

One big issue for me: On my android devices the charts are not displayed, neither the chart pages nor the chart widgets.
It will show the legend, the min/max balloons, the points, but not the bars or the lines of the series.

On my PC it works just fine. Any ideas?

Thank you so much!

Similar behaviour here.

The chart isn’t displayed correctly on my Andorid device (Android 8.0.0 on Samsung Galaxy S8)

I tried to look at the used datapoints and it seems, that somehow not all of the available datapoints can be accessed on mobile (and returns null) - on Desktop all of these datapoints are available.

image image

image image

1 Like

Hi Rainer,

can I ask you which browser you tried with? I’m on chrome, if you’re using chrome too i’ll try out some other browsers!

Edit: It is working in the Android openhab beta app…

Hey! I have been using/testing with Safari and Chrome from both laptop and iPhone and did not notice any problems - however, based on your feedback did try to access OH through https://home.myopenhab.org/... and while it renders perfectly fine on my laptop (both Safari and Chrome), it does not seem to render i.e. gauge on my iPhone (again, in both Safari and Chrome) - will check what is going on, but first will upgrade to a more recent snapshot since I’m still on #2155 … but don’t think this will change anything. Small hint, you can always upgrade MainUI using

bundle:update org.openhab.ui https://ci.openhab.org/job/openHAB-WebUI/lastSuccessfulBuild/artifact/bundles/org.openhab.ui/target/org.openhab.ui-3.1.0-SNAPSHOT.jar

Executing above command (if running OH 3.1) or upgrading to the latest snapshot should give the ability to bind oh-time-series:

item: =props.item
1 Like

Just checked why gauge would not work on my iPhone - and seen that js files did not yet contain the new additions - so cleared browser cache + did a purge cache in the about section - now everything loads in both Safari and Chrome on my iPhone too.


I have tried this, and at least on my Android 9 Tablet in Chrome it did not work. I cleared the browser cache and went to About->Reload on openhab (not sure if that’s exactly how it’s called in english).

Anotther question:

Could it be that the period expression is not yet evaluated? It will only take hardcoded values for now - at least for me:

    - component: oh-chart
        period: =props.period

For me clearing browser cache and invoking “purge caches and refresh” did the trick (not sure if both are actually needed).

In my PR above only properties under oh-time-series were added, period expression is still not evaluated …

Interesting, I don’t have that button…
Is it only there using myopenhab.org?

Only if you’re using HTTPS and the service worker (that’s in charge of caching) was registered. It cannot register if you’re not on a so-called “secure origin”. On myopenhab.org these conditions are satisfied so you get the caching and other features (like the ability to install as a PWA from Chrome or Firefox, and use speech recognition in the HABot chat box).

1 Like

So do I understand right, that in any other case there is nothing cached except for what is in my browser cache?

Oh, sry - forgot to mention that. Tried it with chrome.
It’s working flawlessly with firefox and the OH beta app.

Accessing the item property with an expression is working without problems now - on desktop as well as on mobile. I’m on snapshot build #2172.

1 Like

Yes, the caching when in PWA mode (with the service worker) is much more aggressive and will basically cache the entire application (JS, CSS, fonts) so the network will only be used for the API calls and eventual images.

1 Like

Hi, is it possible to disable the mouse over effect in a graph? I don’t want to get always the dashed line with values displayed when scrolling with my hand. See screenshot:

    - component: oh-time-axis
          show: false

Thanks! It works!

But I have one more question. Is it possible to display several time series on top of each other. I need something like this for my photovoltaic system. The total power consumption is made up of the solar power plus the battery power plus the income from the grid. These three values added together give the total consumption. Can I display this in the graph? I found a similar example in the dikumentantion of the echarts. I can’t get this to work though.

Try adding

- component: oh-time-series
      stack: 1
- component: oh-time-series
      stack: 1

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.