I’m trying to visualize my heatpump use. I’m logging the compressor (Switch item) and also the valve (switch item) that regulates if it heats the house or the hotwater. I also log the electric price (number item).
What I have now is
What I would like is to shade only the area UNDER the line for electric prics by the use of the compressor. Something like this
I have found something that looks what I’m looking for in Echarts examples but what I can see in the example the area is static and not based on a series?
Anyone know if it is possible with echarts?
My code for the graph above.
config:
chartType: ""
period: D
label: electric_price_total + 2
sidebar: true
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
splitLine:
show: false
series:
- component: oh-time-series
config:
name: Current Total Price
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
item: electric_price_total
areaStyle:
opacity: 0.2
- component: oh-time-series
config:
name: Kompressor
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
areaStyle: {}
slots:
markArea:
- component: oh-mark-area
config:
name: HeatingSystem_Compressor
item: HeatingSystem_Compressor
silent: false
- component: oh-time-series
config:
name: Växelventil
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
areaStyle: {}
slots:
markArea:
- component: oh-mark-area
config:
name: HeatingSystem_SwitchValve
item: HeatingSystem_SwitchValve
silent: false
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