What I want to have:
I’ve created and chart in my OH 4.2.2 to visualize my thermostat values for set temperature, current temperature AND humidity. I also want to display the state of a second item, if the window is OPEN or CLOSED. So far so good.
Problem:
Now I have the problem that not all values are always displayed in the tooltip.
If I make a hover on the green lower area, the thermostat values are displayed, but the “Fenster“ will display „NaN“. If I do a hover above the green line (Set temperature), I only have the OPEN window value but no other thermostat values. If I am in a non-pink area, where the window should actually be CLOSED, it also says NaN.
I know that the value from “Fenster (markArea)” is displayed for the upper tooltip and the value from “Fenster (oh-time-series)” is displayed in the lower tooltip. I don’t know why! Both are in one component.
Here is my chart code
config:
chartType: ""
label: "Heizkorper Schlafzimmer: IST / SOLL / Luftfeuchtigkeit"
period: D
slots:
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
grid:
- component: oh-chart-grid
config:
includeLabels: true
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
series:
- component: oh-time-series
config:
gridIndex: 0
item: RST2HeizkorperthermostatSchlafzimmer_AktuelleTemperatur
markLine:
data:
- type: average
markPoint:
data:
- name: min
type: min
- name: max
type: max
label:
backgroundColor: auto
name: Aktuelle Temperatur
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: 0.2
gridIndex: 0
item: RST2HeizkorperthermostatSchlafzimmer_Solltemperatur
markLine:
data:
- type: average
markPoint:
data:
- name: min
type: min
- name: max
type: max
label:
backgroundColor: auto
name: Solltemperatur
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: RST2HeizkorperthermostatSchlafzimmer_Luftfeuchtigkeit
markPoint:
data:
- name: min
type: min
- name: max
type: max
label:
backgroundColor: auto
name: Luftfeuchtigkeit
type: line
xAxisIndex: 0
yAxisIndex: 1
- component: oh-time-series
config:
areaStyle: {}
gridIndex: 99
item: WDS_Fenster_Schlafzimmer_2_TurFensterstatus
name: Fenster (oh-time-series)
type: line
connectNulls: true
xAxisIndex: 0
yAxisIndex: 0
slots:
markArea:
- component: oh-mark-area
config:
item: WDS_Fenster_Schlafzimmer_2_TurFensterstatus
name: Fenster (markArea)
tooltip:
- component: oh-chart-tooltip
config:
_trigger: axis
confine: true
smartFormatter: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
max: "40"
min: "10"
name: °C
- component: oh-value-axis
config:
gridIndex: 0
name: "%"
Can someone please help me?
I’ve been trying for many days.
This is, as far as I know, just the default functioning of the e-charts tooltip. Because the data shown for the mark area and the line series is fundamentally different (note that the markarea tooltip shows the range of datetimes for that area, not the exact datetime of the cursor), e-charts is not going to combine them.
The reason that you have the Fenster (oh-time-series) added to the time series tooltip is that you have added the item and name configs to the time series itself which is not required if you just want the mark area.
I am not aware of a way to achieve what you are looking to do, although there is a small chance that you might be able to use e-charts tooltip formatter for this.
I spent 2 more long evenings trying several eChart things. I have NOT found a solution to bring both tooltips together.
I am happy with my solution so far. I have given “humidity” an additional “areaStyle” with opacity, so I also get my 3 most important return values displayed under this area: target, current and humidity
Above “yellow” it shows the duration when a window was open. In the “white area” there is nothing about the window, but my important values - it fits
Here are the current screenshots with the 3 scenarios:
Add itemStyle to the markArea config, and then add color to the itemStyle:
It probably is smoothing it just a little bit. The problem is that because your persistence data is every minute, you’re not really going to get much smoothing . If you add a data zoom and zoom in to a very high degree you’ll see the smoothing at the minute level like this:
