ramack
August 20, 2021, 8:44pm
1
I am on openHAB version: 3.2.0~S2468-1 and try to use some advanced styling in my charts in Main UI. As the charts in openHAB are based on the ECharts I looked into the corresponding cheat sheet and would like to try out many cool features from there, but the official OH docs about charts do not really help me.
Currently I try to have a line series with a green color if the value is above 0 and red at or below zero which is quite close to the echarts example but I don’t catch how to translate the sample code there into the JAML code equivalent. On ECharts I can simplify the example to
$.get(ROOT_PATH + '/data/asset/data/aqi-beijing.json', function (data) {
myChart.setOption(option = {
xAxis: {
data: data.map(function (item) {
return item[0];
})
},
yAxis: {},
visualMap: {
top: 50,
right: 10,
pieces: [{
gt: 0,
lt: 200,
color: '#FD0100'
}, {
gt: 200,
color: '#93CE07'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: data.map(function (item) {
return item[1];
}),
}
});
});
which yields
my oh config looks as follows:
config:
label: GreenRock Chart
period: D
slots:
grid:
- component: oh-chart-grid
config: {}
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
- component: oh-value-axis
config:
gridIndex: 0
name: Leistung
visualMap:
- component: oh-chart-visualmap
config:
pieces: 2
type: piecewise
slots:
default:
- component: oh-chart-visualmap
config:
gt: 0
color: "#FD0100"
- component: oh-chart-visualmap
config:
lte: 0
color: "#93CE07"
series:
- component: oh-time-series
config:
name: Leistung
gridIndex: 0
xAxisIndex: 0
type: line
item: Greenrock_BAT_Power
yAxisIndex: 1
- component: oh-time-series
config:
name: Ladezustand
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: Greenrock_BAT_Level
which yields:
So not completely wrong but
the color code is using 5 pieces not 2
the colors are not what I want them to be
all series are using the same color code
Any idea is welcome and in general I search for some explanation or the rules of how to translate the code from ECharts page into the corresponding OH YAML or a “complete documentation” of the chart capabilities in openHAB.
1 Like
Dibbler42
August 21, 2021, 10:23am
2
Taking the eCharts page into account ist should be possible to cerate Barcharts and all the other charts as well. uuuuiiiiiii
1 Like
it should be so that 2 pcs. was
config:
label: Температура Улица
chartType: day
slots:
grid:
- component: oh-chart-grid
config:
containLabel: true
show: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
visualMap:
- component: oh-chart-visualmap
config:
pieces: [
{min: 0, max: 50, color: 'Red'},
{min: 50, max: 60, color: 'Lime'},
{min: 60, max: 90, color: 'Aqua'}
]
type: piecewise
series:
- component: oh-time-series
config:
name: Series 1
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: Meteo_Humidity1
service: rrd4j
tooltip:
- component: oh-chart-tooltip
config:
show: true
orient: horizontal
legend:
- component: oh-chart-legend
config:
show: true
orient: horizontal
toolbox:
- component: oh-chart-toolbox
config:
show: false
calendar: []
Also a good option:
config:
chartType: ""
period: D
label: Температура Улица
slots:
grid:
- component: oh-chart-grid
config:
includeLabels: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: °C
visualMap:
- component: oh-chart-visualmap
config:
pieces:
- min: 0
max: 25
color: Blue
- min: 25
max: 30
color: Lime
- min: 30
max: 45
color: Red
series:
- component: oh-time-series
config:
name: Температура
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: Meteo_Temperature1
areaStyle:
opacity: 0.2
markLine:
data:
- type: average
markPoint:
label:
backgroundColor: auto
data:
- type: min
name: min
- type: max
name: max
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
ramack
August 21, 2021, 2:24pm
6
Coming closer, thanks:
series:
- component: oh-time-series
config:
gridIndex: 0
item: Greenrock_BAT_Level
name: Ladezustand
type: line
xAxisIndex: 0
yAxisIndex: 0
color: 'Blue'
- component: oh-time-series
config:
gridIndex: 0
item: Greenrock_BAT_Power
name: Leistung
type: line
xAxisIndex: 0
yAxisIndex: 1
visualMap:
- component: oh-chart-visualmap
config:
pieces: [
{min: 1, color: '#76b729'},
{max: 0, color: '#aa1800'}
]
type: piecewise
But the visual map is still applied to all data series, any idea how to change that? I’d like to have a constant color (which is correct in the legend BTW) for some series.
And last but not least, please tell me how you found that…
Try it like this
series:
- component: oh-time-series
config:
id: 0
gridIndex: 0
item: Greenrock_BAT_Level
name: Ladezustand
type: line
xAxisIndex: 0
yAxisIndex: 0
color: 'Blue'
- component: oh-time-series
config:
id: 1
gridIndex: 0
item: Greenrock_BAT_Power
name: Leistung
type: line
xAxisIndex: 0
yAxisIndex: 1
visualMap:
- component: oh-chart-visualmap
config:
pieces: [
{min: 1, color: '#76b729'},
{max: 0, color: '#aa1800'}
]
seriesIndex: 0
type: piecewise
You need to assign an id to the series and add it to visualMap: seriesIndex: id
config:
chartType: ""
period: D
label: Температура Улица
slots:
grid:
- component: oh-chart-grid
config:
includeLabels: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: °C
visualMap:
- component: oh-chart-visualmap
config:
pieces:
- min: 0
max: 25
color: Blue
- min: 25
max: 30
color: Lime
- min: 30
max: 45
color: Red
seriesIndex: 0
series:
- component: oh-time-series
config:
id: 0
name: Температура
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: Meteo_Temperature1
areaStyle:
opacity: 0.2
markLine:
data:
- type: average
markPoint:
label:
backgroundColor: auto
data:
- type: min
name: min
- type: max
name: max
- component: oh-time-series
config:
id: 1
name: Температура 1
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
color: Fuchsia
item: Meteo_Temperature
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
2 Likes
ramack
August 21, 2021, 6:50pm
10
Vladimir40:
seriesIndex: 0
Yes, that did the trick - together with the fact that arrays in the echarts docs convert to
xxx:
- one
- two
Thanks a lot!
Finally my Solar battery status chart looks like this:
and the code for everyone interested:
config:
label: GreenRock Chart
period: D
sidebar: true
slots:
grid:
- component: oh-chart-grid
config: {}
series:
- component: oh-time-series
config:
gridIndex: 0
item: Greenrock_BAT_Level
name: Ladezustand
type: line
xAxisIndex: 0
yAxisIndex: 0
markPoint:
data:
- type: min
name: Min
- component: oh-time-series
config:
gridIndex: 0
item: Greenrock_BAT_Power
name: Leistung
type: line
xAxisIndex: 0
yAxisIndex: 1
visualMap:
- component: oh-chart-visualmap
config:
pieces:
- gt: 1
color: "#76b729"
- lte: 0
color: "#aa1800"
type: piecewise
text:
- Laden
- Entladen
seriesIndex: 1
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: Ladestand [%]
nameLocation: middle
nameGap: 25
- component: oh-value-axis
config:
gridIndex: 0
name: Leistung [W]
nameLocation: middle
nameGap: 35
min: -2000
max: 2000
legend:
- component: oh-chart-legend
config:
top: 3
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: slider
ramack
August 21, 2021, 6:53pm
11
Yes, whoever in the openHAB team came up with the idea to integrate ECharts: I definitely owe him/her a beer! This is simply fantastic!
Has this capability markedly increased in OH v3.2 vs. 3.1?
hello, is there a way to specify the Charts of the “actionAnalyzer” to? I am looking for a way to customize ,for example the x-min-value and the color, at the “configure Widget” menu.
like this way:
config:
action: analyze
actionAnalyzerItems: =[props.RoomTemperature,props.HeatSetpoint]
"actionAnalyzerColor: =...."
thanks for help
