[Main UI] echarts gauge and pie POC

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
  config:
    options:
      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 …

2 Likes

Gradient:

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

3 Likes

Hi,
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.

Mobile:
image image

Desktop:
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.

Hi,

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:

slots:
  content:
    - component: oh-chart
      config:
        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:

slots:
  xAxis:
    - component: oh-time-axis
      config:
        axisPointer:
          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
    config:
      stack: 1
      ...
- component: oh-time-series
    config:
      stack: 1
      ...
2 Likes

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