This will be part of 3.1 release - you can use 3.1 snapshot version if you want to try it out (@BobMiles latest snapshot 2169 also includes pie support).
Thx, the Gauge are now working with the examples above.
But i donāt get the line charts working in a widgetā¦
widget code
uid: ChartTestWidget
props:
parameters:
- context: item
description: Set an item which you want to control
label: Item
name: item
required: true
type: TEXT
parameterGroups: []
tags: []
component: f7-card
config:
title: Test Chart
slots:
default:
- component: oh-chart
slots:
series:
- component: oh-serie
config:
type: line
areaStyle: {}
slots:
grid:
- component: oh-chart-grid
config: {}
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
series:
- component: oh-time-series
config:
name: Test
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: props.item
legend:
- component: oh-chart-legend
config:
show: true
orient: horizontal
bottom: "8"
Theres the =
missing at the item prop inside the āoh-time-seriesā, so no item gets selected.
There are a couple of issues with your yaml (i.e. there is no oh-serie
), something like below should give you a line chart:
uid: ChartTestWidget
props:
parameters:
- context: item
description: Set an item which you want to control
label: Item
name: item
required: true
type: TEXT
parameterGroups: []
tags: []
component: f7-card
config:
title: Test Chart
slots:
default:
- component: oh-chart
config:
periodVisible: false
height: 300px
slots:
grid:
- component: oh-chart-grid
config: {}
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
series:
- component: oh-time-series
config:
name: Outdoor
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: gBasement_BoilerRoom_HP_Outdoor
legend:
- component: oh-chart-legend
config:
show: true
orient: horizontal
bottom: "8"
There is currently one limitation - oh-time-series
properties are not evaluated, meaning you cannot do
item: =props.item
but only specifying explicit item will work. I guess it makes sense to support this use case too, specially in the context of custom widgets ā¦
Awesome, now itās working
Thank you very much
Is there already Git issue for this? Or should i create one?
Hey again @crnjan
Thanks for your quick answer and the easy trick.
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 + ' ' + 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_BadeaThe 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.
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
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 ā¦
areaStyle:
color:
type: linear
x: 0
y: 0
x2: 0
y2: 1
colorStops:
- offset: 0
color: red
- offset: 1
color: blue
global: false
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:
Desktop:
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
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 ā¦
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).
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.
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.