Loving the look of this, im trying to setup my Octopus graph to show current rates and i know i need a generator but not sure on the syntax for my entity.
Example below, basically i want to see last 4 hours and future 8 hours of value_inc_vat plotted so i can see future rates but the JSON returned is tricky to work with.
results:
- value_exc_vat: 25.2
value_inc_vat: 26.46
valid_from: '2021-03-06T16:00:00Z'
valid_to: '2021-03-06T16:30:00Z'
- value_exc_vat: 12.67
value_inc_vat: 13.3035
valid_from: '2021-03-06T15:30:00Z'
valid_to: '2021-03-06T16:00:00Z'
- value_exc_vat: 12.32
value_inc_vat: 12.936
valid_from: '2021-03-06T15:00:00Z'
valid_to: '2021-03-06T15:30:00Z'
- value_exc_vat: 12.72
value_inc_vat: 13.356
valid_from: '2021-03-06T14:30:00Z'
valid_to: '2021-03-06T15:00:00Z'
- value_exc_vat: 12.72
value_inc_vat: 13.356
valid_from: '2021-03-06T14:00:00Z'
valid_to: '2021-03-06T14:30:00Z'
- value_exc_vat: 12.76
value_inc_vat: 13.398
valid_from: '2021-03-06T13:30:00Z'
valid_to: '2021-03-06T14:00:00Z'
- value_exc_vat: 14.61
value_inc_vat: 15.3405
valid_from: '2021-03-06T13:00:00Z'
valid_to: '2021-03-06T13:30:00Z'
- value_exc_vat: 14.7
value_inc_vat: 15.435
valid_from: '2021-03-06T12:30:00Z'
valid_to: '2021-03-06T13:00:00Z'
- value_exc_vat: 14.74
value_inc_vat: 15.477
valid_from: '2021-03-06T12:00:00Z'
valid_to: '2021-03-06T12:30:00Z'
- value_exc_vat: 13.64
value_inc_vat: 14.322
valid_from: '2021-03-06T11:30:00Z'
valid_to: '2021-03-06T12:00:00Z'
- value_exc_vat: 13.42
value_inc_vat: 14.091
valid_from: '2021-03-06T11:00:00Z'
valid_to: '2021-03-06T11:30:00Z'
- value_exc_vat: 13.83
value_inc_vat: 14.5215
valid_from: '2021-03-06T10:30:00Z'
valid_to: '2021-03-06T11:00:00Z'
- value_exc_vat: 14.1
value_inc_vat: 14.805
valid_from: '2021-03-06T10:00:00Z'
valid_to: '2021-03-06T10:30:00Z'
- value_exc_vat: 14.52
value_inc_vat: 15.246
valid_from: '2021-03-06T09:30:00Z'
valid_to: '2021-03-06T10:00:00Z'
- value_exc_vat: 13.68
value_inc_vat: 14.364
valid_from: '2021-03-06T09:00:00Z'
valid_to: '2021-03-06T09:30:00Z'
- value_exc_vat: 12.85
value_inc_vat: 13.4925
valid_from: '2021-03-06T08:30:00Z'
valid_to: '2021-03-06T09:00:00Z'
- value_exc_vat: 12.12
value_inc_vat: 12.726
valid_from: '2021-03-06T08:00:00Z'
valid_to: '2021-03-06T08:30:00Z'
- value_exc_vat: 13.35
value_inc_vat: 14.0175
valid_from: '2021-03-06T07:30:00Z'
valid_to: '2021-03-06T08:00:00Z'
- value_exc_vat: 11.88
value_inc_vat: 12.474
valid_from: '2021-03-06T07:00:00Z'
valid_to: '2021-03-06T07:30:00Z'
- value_exc_vat: 11.22
value_inc_vat: 11.781
valid_from: '2021-03-06T06:30:00Z'
valid_to: '2021-03-06T07:00:00Z'
- value_exc_vat: 11
value_inc_vat: 11.55
valid_from: '2021-03-06T06:00:00Z'
valid_to: '2021-03-06T06:30:00Z'
- value_exc_vat: 11
value_inc_vat: 11.55
valid_from: '2021-03-06T05:30:00Z'
valid_to: '2021-03-06T06:00:00Z'
- value_exc_vat: 10.08
value_inc_vat: 10.584
valid_from: '2021-03-06T05:00:00Z'
valid_to: '2021-03-06T05:30:00Z'
- value_exc_vat: 10.03
value_inc_vat: 10.5315
valid_from: '2021-03-06T04:30:00Z'
valid_to: '2021-03-06T05:00:00Z'
- value_exc_vat: 11.22
value_inc_vat: 11.781
valid_from: '2021-03-06T04:00:00Z'
valid_to: '2021-03-06T04:30:00Z'
- value_exc_vat: 10.56
value_inc_vat: 11.088
valid_from: '2021-03-06T03:30:00Z'
valid_to: '2021-03-06T04:00:00Z'
- value_exc_vat: 11.22
value_inc_vat: 11.781
valid_from: '2021-03-06T03:00:00Z'
valid_to: '2021-03-06T03:30:00Z'
- value_exc_vat: 11
value_inc_vat: 11.55
valid_from: '2021-03-06T02:30:00Z'
valid_to: '2021-03-06T03:00:00Z'
- value_exc_vat: 11.79
value_inc_vat: 12.3795
valid_from: '2021-03-06T02:00:00Z'
valid_to: '2021-03-06T02:30:00Z'
- value_exc_vat: 11.04
value_inc_vat: 11.592
valid_from: '2021-03-06T01:30:00Z'
valid_to: '2021-03-06T02:00:00Z'
- value_exc_vat: 11.97
value_inc_vat: 12.5685
valid_from: '2021-03-06T01:00:00Z'
valid_to: '2021-03-06T01:30:00Z'
- value_exc_vat: 11.7
value_inc_vat: 12.285
valid_from: '2021-03-06T00:30:00Z'
valid_to: '2021-03-06T01:00:00Z'
- value_exc_vat: 11.22
value_inc_vat: 11.781
valid_from: '2021-03-06T00:00:00Z'
valid_to: '2021-03-06T00:30:00Z'
- value_exc_vat: 11.26
value_inc_vat: 11.823
valid_from: '2021-03-05T23:30:00Z'
valid_to: '2021-03-06T00:00:00Z'
- value_exc_vat: 13.2
value_inc_vat: 13.86
valid_from: '2021-03-05T23:00:00Z'
valid_to: '2021-03-05T23:30:00Z'
- value_exc_vat: 12.3
value_inc_vat: 12.915
valid_from: '2021-03-05T22:30:00Z'
valid_to: '2021-03-05T23:00:00Z'
- value_exc_vat: 12.47
value_inc_vat: 13.0935
valid_from: '2021-03-05T22:00:00Z'
valid_to: '2021-03-05T22:30:00Z'
- value_exc_vat: 12.32
value_inc_vat: 12.936
valid_from: '2021-03-05T21:30:00Z'
valid_to: '2021-03-05T22:00:00Z'
- value_exc_vat: 13.35
value_inc_vat: 14.0175
valid_from: '2021-03-05T21:00:00Z'
valid_to: '2021-03-05T21:30:00Z'
- value_exc_vat: 13.2
value_inc_vat: 13.86
valid_from: '2021-03-05T20:30:00Z'
valid_to: '2021-03-05T21:00:00Z'
- value_exc_vat: 16.72
value_inc_vat: 17.556
valid_from: '2021-03-05T20:00:00Z'
valid_to: '2021-03-05T20:30:00Z'
- value_exc_vat: 17.61
value_inc_vat: 18.4905
valid_from: '2021-03-05T19:30:00Z'
valid_to: '2021-03-05T20:00:00Z'
- value_exc_vat: 30.8
value_inc_vat: 32.34
valid_from: '2021-03-05T19:00:00Z'
valid_to: '2021-03-05T19:30:00Z'
- value_exc_vat: 33.33
value_inc_vat: 34.9965
valid_from: '2021-03-05T18:30:00Z'
valid_to: '2021-03-05T19:00:00Z'
- value_exc_vat: 33.33
value_inc_vat: 34.9965
valid_from: '2021-03-05T18:00:00Z'
valid_to: '2021-03-05T18:30:00Z'
- value_exc_vat: 33.33
value_inc_vat: 34.9965
valid_from: '2021-03-05T17:30:00Z'
valid_to: '2021-03-05T18:00:00Z'
- value_exc_vat: 29.82
value_inc_vat: 31.311
valid_from: '2021-03-05T17:00:00Z'
valid_to: '2021-03-05T17:30:00Z'
- value_exc_vat: 28.72
value_inc_vat: 30.156
valid_from: '2021-03-05T16:30:00Z'
valid_to: '2021-03-05T17:00:00Z'
friendly_name: Octopus
Hi, I love the look of these! Can you share your code?
Absolutey! Might have changed them slightly since you saw them but here they are
type: horizontal-stack
cards:
- type: 'custom:apexcharts-card'
header:
title: ''
show: true
show_states: true
colorize_states: true
graph_span: 24h
apex_config:
tooltip:
enabled: false
yaxis:
min: 0
forceNiceScale: true
decimalsInFloat: 0
opposite: false
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
chart:
height: 175
grid:
show: false
borderColor: '#404040'
strokeDashArray: 3
position: back
legend:
show: false
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0.6
opacityTo: 0
stops:
- 0
series:
- entity: sensor.nibe_105703_40008
name: Framledning
type: area
color: 2eb9ff
fill_raw: last
float_precision: 0
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 8px 0px 28px 8px;
font-size: 15px;
font-family: Segoe UI Light;
}
div#header__title {
font-size: 10px;
}
- type: 'custom:apexcharts-card'
header:
title: ''
show: true
show_states: true
colorize_states: false
graph_span: 24h
apex_config:
tooltip:
enabled: false
yaxis:
min: 0
forceNiceScale: true
decimalsInFloat: 0
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
chart:
height: 175
grid:
show: false
borderColor: '#404040'
strokeDashArray: 3
position: back
legend:
show: false
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0.5
opacityTo: 0
stops:
- 0
series:
- entity: sensor.nibe_105703_40014
name: Varmvatten
type: area
color: 2eb9ff
float_precision: 0
fill_raw: last
- entity: sensor.nibe_105703_43084
name: Eltillsats
type: column
curve: smooth
color: orange
fill_raw: last
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 8px 8px 28px 0px;
font-size: 15px;
font-family: Segoe UI Light;
}
div#header__title {
font-size: 10px;
}
type: 'custom:apexcharts-card'
header:
title: ''
show: true
show_states: true
colorize_states: false
graph_span: 2d
apex_config:
yaxis:
forceNiceScale: true
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
legend:
show: false
chart:
height: 225
grid:
show: true
borderColor: '#303030'
strokeDashArray: 3
position: back
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0
opacityTo: 0.7
stops:
- 0
series:
- entity: sensor.nibe_105703_40004
name: Utomhus
type: area
curve: smooth
fill_raw: last
color: 2eb9ff
float_precision: 1
transform: return x + 1;
- entity: sensor.garaget
name: Garaget
type: area
curve: smooth
fill_raw: last
color: 3ca358
float_precision: 1
transform: return x + 1;
- entity: sensor.nibe_105703_43084
name: Eltillsats
type: column
curve: smooth
color: orange
show:
in_chart: false
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 8px 8px 28px 8px;
font-size: 15px;
text-align: center;
font-family: Segoe UI Light;
}
div#header__title {
font-size: 15px;
font-family: Segoe UI Light;
}
#state__value > #state {
font-weight: 100;
}
2 Likes
prankousky
March 6, 2021, 11:17am
688
I am trying to create a card that will display temperature measurements of multiple rooms to compare.
Is it possible to set a minimum value? So that values smaller than this threshold will not be displayed? For example
2pm: 14.6
3pm: 14.8
4pm: 14.1
4.30pm: 14.4
5pm: 16.3
Threshold: 14.5
so ======> do not display the measurements from 4pm and 4.30pm
Seems like you’re hitting this bug: https://github.com/RomRider/apexcharts-card/issues/121
It is possible to set a minimum value for the chart on the yaxis:
apex_config:
yaxis:
min: MIN_VALUE_HERE
1 Like
skank
March 6, 2021, 12:38pm
693
Hi im on latest version now 1.8.2
Here’s the code, i dunno whats wrong, it was ok before
- type: 'custom:apexcharts-card'
graph_span: 365d
update_interval: 1hour
cache: true
span:
end: month
header:
show: false
apex_config:
xaxis:
labels:
format: MM
show: true
showAlways: true
yaxis:
forceNiceScale: false
decimalsInFloat: 0
chart:
type: area
height: 300
stroke:
show: true
width: 1
legend:
show: true
dataLabels:
enabled: false
distributed: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- entity: sensor.maandelijks_energie_dagtarief
type: column
name: Stroom dagtarief
float_precision: 2
group_by:
func: max
duration: 31d
- entity: sensor.maandelijks_energie_nachttarief
name: Stroom nachttarief
float_precision: 2
type: column
group_by:
func: max
duration: 31d
- color: 'rgb(128,128,128)'
entity: sensor.maandelijks_gas
type: column
name: Gas
float_precision: 2
group_by:
func: max
duration: 31d
I think I know what’s going on. I’ll look into it.
1 Like
RomRider:
last
issue is still present…
- type: custom:apexcharts-card
graph_span: 7d
header:
show: true
title: Electricity Consumption
show_states: true
colorize_states: true
series:
- entity: sensor.daily_energy
type: column
name: Daily Consumption
group_by:
func: last
duration: 1d
I see that apexcharts is showing data for the last 7 days from the time the time of browser. Due to which depends when you load the page, values getting pushed in different days (bars). Could we force the chart to show last 7 days and each day is in between 00:00 to 23:59. That means, only today’s “bar” will keep increasing. This is the same reason, why there is no value shown for today’s date.
Now it makes much more sense… Thanks a lot !!
I need to fix that, it’s a long standing issue.
1 Like
No worries, its very very good… !!!
mirekmal
March 7, 2021, 11:41am
701
This would be awesome! I’m trying from couple of days to show traffic on my router’s WAN ports. Trick is that while WAN1 is regularly used, WAN2 is used only for VPN (so no trraffic for most of the time) and LTE (used only as failover, so again very unfrequently used). So WAN2 and LTE ports shows zero values for most of the time. Not updated values cause chart to be somehow corrupted (see VPN chart on screenshot). I tried to use fill_raw: zero or last, but it does not help (probably because last updated data is beyond chrt span). I overcomed this by forcing small, negligible data variations to sensor, so now data is properly spanning across chart, but run into other problem; chart is constantly scalling in yaxis to these small data (in range of +/-0.01, while normal data is in range of up to 500 - see LTE chart on screenshot).
Next step was to try to use min: 0.01, which works fine in one direction… but I have chart in form of stacked bars, with downloads directed up and uploads directed down (using invert: true), which is causing that bottom part of chart is not displayed at all (it is negative, so it is below threshold). Having dynamic scalling should solve this… I hope
1 Like
DonNL
March 7, 2021, 4:45pm
702
Really like the card so far! Thanks!
Now I have to dig into getting the y-axis formatted like I want to.
3 Likes
poudenes
March 7, 2021, 5:27pm
703
Nice !!!
Would be nice to have implementation for Apple Watch Health app
2 Likes
benm7
March 8, 2021, 12:16am
704
Love this card and the radial charts!
13 Likes
