Here my new solution with data from sensors. The only bad thing … when I change the values, I have to refresh the diagram manually. The dynamic and changeable one, you find at the bottom (Heizkurve Neu ???).
type: horizontal-stack
title: Heizgrenze und Heizkurven
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: input_number.luxtronik_heizkurve_hks
name: HK Start
- type: entities
entities:
- entity: input_number.luxtronik_heizkurve_hke
name: HK Ende
- type: entities
entities:
- entity: input_number.luxtronik_heizkurve_offset
name: HK Offset
- type: horizontal-stack
cards:
- type: custom:plotly-graph
layout:
xaxis:
type: number
range:
- -20
- 20
showlegend: true
yaxis:
fixedrange: true
range:
- 15
- 40
entities:
- entity: ''
name: Heizgrenze 2022
x:
- 14
- 14
'y':
- 14
- 41
line:
shape: spline
color: darkgrey
- entity: ''
name: Heizgrenze 2023
x:
- 16
- 16
'y':
- 14
- 41
line:
shape: spline
color: grey
- entity: input_number.luxtronik_heizkurve_hke
internal: true
fn: >-
$fn ({ ys }) => { /*debugger; console.log(ys);
console.log(ys.length-1);*/ window.luxtronik_heizkurve_hke =
ys[ys.length-1]; }
- entity: input_number.luxtronik_heizkurve_hks
internal: true
fn: >-
$fn ({ ys }) => { /*debugger; console.log(ys);
console.log(ys.length-1);*/ window.luxtronik_heizkurve_hks =
ys[ys.length-1]; }
- entity: input_number.luxtronik_heizkurve_offset
internal: true
fn: >-
$fn ({ ys }) => { /*debugger; console.log(ys);
console.log(ys.length-1);*/ window.luxtronik_heizkurve_offset
= ys[ys.length-1]; }
- entity: ''
name: Original Heizkurve
fn: |
$fn ({ vars, state }) => {
const x = [];
const y = [];
let ta, hks, hke, offset;
ta = 20;
hks = 22;
hke = 35;
offset = 0;
for (let i = 0; i <= 40; i++) {
x[i] = ta;
y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
ta = ta - 1;
};
vars.x = x;
vars.y = y;
};
x: $fn ({ vars }) => vars.x
'y': $fn ({ vars }) => vars.y
line:
shape: spline
color: darkgreen
- entity: ''
name: September 2022
fn: |
$fn ({ vars, state }) => {
const x = [];
const y = [];
let ta, hks, hke, offset;
ta = 20;
hks = 22;
hke = 35;
offset = -1;
for (let i = 0; i <= 40; i++) {
x[i] = ta;
y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
ta = ta - 1;
};
vars.x = x;
vars.y = y;
};
x: $fn ({ vars }) => vars.x
'y': $fn ({ vars }) => vars.y
line:
shape: spline
color: green
- entity: ''
name: Haus 19, 21 & 25
fn: |
$fn ({ vars, state }) => {
const x = [];
const y = [];
let ta, hks, hke, offset;
ta = 20;
hks = 22;
hke = 35;
offset = -3;
for (let i = 0; i <= 40; i++) {
x[i] = ta;
y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
ta = ta - 1;
};
vars.x = x;
vars.y = y;
};
x: $fn ({ vars }) => vars.x
'y': $fn ({ vars }) => vars.y
line:
shape: spline
color: orange
- entity: ''
name: Haus 23
fn: |
$fn ({ vars, state }) => {
const x = [];
const y = [];
let ta, hks, hke, offset;
ta = 20;
hks = 22;
hke = 35;
offset = -4;
for (let i = 0; i <= 40; i++) {
x[i] = ta;
y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
ta = ta - 1;
};
vars.x = x;
vars.y = y;
};
x: $fn ({ vars }) => vars.x
'y': $fn ({ vars }) => vars.y
line:
shape: spline
color: red
- entity: ''
name: Heizkurve Neu ???
fn: |
$fn ({ vars, state }) => {
const x = [];
const y = [];
let ta, hks, hke, offset;
ta = 20;
// debugger;
// console.log(window.luxtronik_heizkurve_hks) ;
// console.log(window.luxtronik_heizkurve_hke) ;
// console.log(window.luxtronik_heizkurve_offset) ;
// hks = 22;
// hke = 35;
// offset = 0;
hks = window.luxtronik_heizkurve_hks * 1 ;
hke = window.luxtronik_heizkurve_hke * 1 ;
offset = window.luxtronik_heizkurve_offset * 1 ;
for (let i = 0; i <= 40; i++) {
x[i] = ta;
y[i] = ((hks + offset) + ((hke - 20) * ((hks + offset) - ta) / (20 - (ta - (hks + offset)) / 2))) ;
ta = ta - 1;
};
vars.x = x;
vars.y = y;
};
x: $fn ({ vars }) => vars.x
'y': $fn ({ vars }) => vars.y
line:
shape: spline
color: turqois
raw_plotly_config: true
2 Likes
nikop
February 24, 2023, 3:13pm
20
Nice @sofa74surfer
It took me hours to find code examples, I was able to adapt for my needs. Console Log and Chrome Debugger was also helpful.
1 Like
This is great. What if I want the values on the y axis to come from climate entity attributes?
For example:{{ state_attr('climate.heat_set_1_curvel', 'current_temperature') }}
It returns the correct value in the template devtool but returns an error in plotly.
type: custom:plotly-graph
hours_to_show: current_day
layout:
xaxis:
type: number
showlegend: false
autorange: reversed
yaxis:
fixedrange: true
range:
- 10
- 85
entities:
- entity: ''
x:
- 20
- -35
'y':
- {{ state_attr('climate.heat_set_1_curvel', 'current_temperature')
- 25
line:
shape: spline
Configuration errors detected:
missed comma between flow collection entries (19:73)
16 | ...
17 | ...
18 | ...
19 | ... curvel', 'current_temperature') }}
-----------------------------------------^
In your plotly code, there are missing two closing curly brackets at the end of the first y: value.
Here is a visualization for mine:
(documented on 🎨 Add instructions for compensation curve visualization by kamaradclimber · Pull Request #117 · kamaradclimber/heishamon-homeassistant · GitHub )
EDIT: someone nicely remarked my curves are reversed: water is supposed to be hotter when outside is colder
1 Like
That’s probably just a typo. It makes no difference to the error.
When I quote within the curly brackets, the error stops but the value still does not show up. When saved and come back, it shows [object object] : null.
nikop
October 7, 2023, 10:43pm
26
Finally, woohoo! Thank you @kamaradclimber for the real result to draw nice simple heat curves!
Now my code comes to nice only Plotly code:
- type: custom:plotly-graph
refresh_interval: 10
defaults:
entity:
show_value: false
line:
shape: line
width: 2
mode: lines+markers+text
texttemplate: '%{y}'
textposition: top left
layout:
xaxis:
type: number
autorange: true
entities:
- entity: ''
x:
- ala
- kylmä
- keski
- lämmin
- ylä
'y':
- >-
$ex
hass.states['input_number.hvac_asetusarvo_ulkolampotila_01_alaraja'].state
- >-
$ex
hass.states['input_number.hvac_asetusarvo_ulkolampotila_02_kylmaraja'].state
- >-
$ex
hass.states['input_number.hvac_asetusarvo_ulkolampotila_03_keskiraja'].state
- >-
$ex
hass.states['input_number.hvac_asetusarvo_ulkolampotila_04_lamminraja'].state
- >-
$ex
hass.states['input_number.hvac_asetusarvo_ulkolampotila_05_ylaraja'].state
2 Likes
storaCM
February 3, 2024, 10:14am
27
Thank you @sofa74surfer for your code and image
Actually my heat pump maker has a tool on their homepage where you can enter the slope and translation (offset) and see what the curve (in their case a straight line) will be.
Havig connected the heat pump to HA and having the possibility to set the outgoing temp thru HA I do not need the heat pump itself to adjust the out going temp, but could use my own calcuation and automations (for exampel compensation for heavy wind cooling etc).
Thanks to your code, which I adopted to my own needs I can visualize it in HA and do not need to go the their home page anymore.
Did youever get the auto update to work? I have not looked into it yet, but I get the feeling it has to be edited in the code for the add on instead of the graph code.
Next steps will be do make my own curve which will not be a straight line as when it gets colder normally there is less wind and less moisture in the air which means that you actually might overrun when using a straight line.
robomilo
November 7, 2024, 8:13pm
28
Hi,
Total newbie here and would really appreciate some help. I’ve tried the code in the thread but can’t get it to work for me. I want the graph to show the my weather compensation of my heat pump. I have the x1-4 (ambient temp) and y1-4 (flow temp) values, as ‘editable’ climate’s (e.g. climate.ecomode_flow_temp_y1). Can anyone assist please. Ideally i would like the 8 sliders values at the top and the corrsponding graph below. Unless anyone has any better ideas. Many thanks
nikop
November 12, 2024, 11:33am
30
Hi @robomilo !
Which of the codes did you try out? And can you maybe try draw a curve you are trying to achieve with excel/ drawing program?
robomilo
November 16, 2024, 9:08pm
31
Thanks for your reply, this is what i currently have and can directly change the values of the heat pump, they are climate entites. I ideally wanted a ‘curved’ graph underneath.
nikop
November 17, 2024, 3:15pm
32
@robomilo , you seem to have same kind of curve needs as I did.
If you do not need the most beautiful shape of curve, you can try to use my simple plotly code in the couple of answers back:
Finally, woohoo! Thank you @kamaradclimber for the real result to draw nice simple heat curves!
[image]
Now my code comes to nice only Plotly code:
- type: custom:plotly-graph
refresh_interval: 10
defaults:
entity:
show_value: false
line:
shape: line
width: 2
mode: lines+markers+text
texttemplate: '%{y}'
textposition: top left
layout:
xaxis:
ty…
robomilo
November 17, 2024, 8:37pm
33
Yes this is what i wanted! I’m no progammer, i tried the code but could get it to work.
nikop
November 20, 2024, 6:13am
34
@robomilo , let me try to help and break down what might be the reason for code not working. Firstly, in all these sample codes we are using “Plotly” which is HACS card. Have you installed it?
More info about Plotly in HA:
[demo]
[attributes]
[216764329-94b9cd7e-fee9-439b-9134-95b7be626592]
[image]
[image]
[215353175-97118ea7-778b-41b7-96f2-7e52c1c396d3]
[image]
Here is my first Lovelace card, similar to the history card but leveraging plotly.js to make it interactive.
You can scroll and zoom and the missing data will be automatically fetched.
Click on the Index of examples with images in the readme
The yaml is backwards compatible with the history card but adds a big amount of features, instructions …
Hi,
Great stuff but I cant get the proposed code to work as well. Here is my configuration… I have installed “ploty-graph”…
Any ideas what can be wrong? The configuration says (translated from swedish):
- type: custom:plotly-graph
refresh_interval: 10
defaults:
entity:
show_value: false
line:
shape: line
width: 2
mode: lines+markers+text
texttemplate: '%{y}'
textposition: top left
layout:
xaxis:
type: number
autorange: true
entities:
- entity: ''
x:
- -15C
- -10C
- -5C
- 0C
- 2C
'y':
- >-
$ex
hass.states['input_number.garage_temp_curve_1'].state
- >-
$ex
hass.states['input_number.garage_temp_curve_2'].state
- >-
$ex
hass.states['input_number.garage_temp_curve_3'].state
- >-
$ex
hass.states['input_number.garage_temp_curve_4'].state
- >-
$ex
hass.states['input_number.garage_temp_curve_5'].state
nikop
December 7, 2024, 7:34pm
36
Oh, could it be that you are trying to add manual card only with one element that is plotly-graph? If show, you need to remove ‘-’ in ‘- type: custom:plotly-graph’ so it becomes only ‘type: custom:plotly-graph’.
My own code example comes from multiple cards like code:
...
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
...
1 Like
Thanks! I feel a bit stupid… =)
1 Like
thecem
January 5, 2025, 10:24am
38
could be some kind of interesting:
Code
type: grid
cards:
- type: heading
heading_style: title
heading: Heat Curve
icon: mdi:chart-bell-curve-cumulative
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.panasonic_heat_pump_main_outside_temp
icon: mdi:home-thermometer-outline
tap_action:
action: more-info
- type: entity
show_state: true
show_icon: true
entity: number.panasonic_heat_pump_main_z1_heat_curve_outside_low_temp
icon: mdi:thermometer-chevron-down
tap_action:
action: more-info
- type: entity
show_state: true
show_icon: false
entity: number.panasonic_heat_pump_main_z1_heat_curve_target_high_temp
icon: mdi:thermometer-chevron-down
tap_action:
action: more-info
- type: entity
show_state: true
show_icon: true
entity: number.panasonic_heat_pump_main_z1_heat_curve_outside_high_temp
icon: mdi:thermometer-chevron-up
tap_action:
action: more-info
- type: entity
show_state: true
show_icon: false
entity: number.panasonic_heat_pump_main_z1_heat_curve_target_low_temp
icon: mdi:thermometer-chevron-up
tap_action:
action: more-info
- type: custom:plotly-graph
refresh_interval: 10
defaults:
entity:
line:
shape: spline
layout:
xaxis:
type: number
autorange: true
entities:
- entity: ""
name: >
$ex "Water Target Temp " +
hass.states["sensor.panasonic_heat_pump_main_main_target_temp"].state
+ "°C"
line:
width: 1
dash: dot
x:
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_outside_low_temp'].state
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_outside_high_temp'].state
"y":
- >-
$ex
hass.states['sensor.panasonic_heat_pump_main_main_target_temp'].state
- >-
$ex
hass.states['sensor.panasonic_heat_pump_main_main_target_temp'].state
- entity: ""
name: >
$ex "Outside Temp " +
hass.states["sensor.panasonic_heat_pump_main_outside_temp"].state +
"°C"
value: "1"
line:
width: 1
dash: dot
x:
- >-
$ex
hass.states['sensor.panasonic_heat_pump_main_outside_temp'].state
- >-
$ex
hass.states['sensor.panasonic_heat_pump_main_outside_temp'].state
"y":
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_target_high_temp'].state
- >-
$ex
parseFloat(hass.states['number.panasonic_heat_pump_main_z1_heat_curve_target_low_temp'].state)
+
parseFloat(hass.states['number.panasonic_heat_pump_main_z1_heat_request_temp'].state)
- entity: ""
name: >
$ex "Zone 1 (with request shift of " +
hass.states["number.panasonic_heat_pump_main_z1_heat_request_temp"].state
+ "°C" + ")"
x:
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_outside_low_temp'].state
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_outside_high_temp'].state
"y":
- >-
$ex
parseFloat(hass.states['number.panasonic_heat_pump_main_z1_heat_curve_target_high_temp'].state)
+
parseFloat(hass.states['number.panasonic_heat_pump_main_z1_heat_request_temp'].state)
- >-
$ex
parseFloat(hass.states['number.panasonic_heat_pump_main_z1_heat_curve_target_low_temp'].state)
+
parseFloat(hass.states['number.panasonic_heat_pump_main_z1_heat_request_temp'].state)
- entity: ""
name: Zone 1
x:
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_outside_low_temp'].state
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_outside_high_temp'].state
"y":
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_target_high_temp'].state
- >-
$ex
hass.states['number.panasonic_heat_pump_main_z1_heat_curve_target_low_temp'].state
- type: tile
entity: sensor.panasonic_heat_pump_main_outside_temp
name: Outdoor Temp
- type: tile
entity: number.panasonic_heat_pump_main_z1_heat_request_temp
name: Reqested shift
- type: tile
entity: number.panasonic_heat_pump_main_z1_heat_curve_target_high_temp
name: Water min
- type: tile
entity: number.panasonic_heat_pump_main_z1_heat_curve_target_low_temp
name: Water max
- type: tile
entity: number.panasonic_heat_pump_main_z1_heat_curve_outside_low_temp
name: Out Air min
- type: tile
entity: number.panasonic_heat_pump_main_z1_heat_curve_outside_high_temp
name: Out Air max
1 Like
bbaixo
January 20, 2025, 10:57am
39
Hello,
I want to make a graph with the attributes of this entity:
how I can do that?
my code it’s not working:
type: custom:plotly-graph
defaults:
entity:
show_value: false
line:
shape: line
width: 2
mode: lines+markers+text
texttemplate: "%{y}"
textposition: top left
layout:
xaxis:
type: number
autorange: true
entities:
- entity: ""
x: states.nr_temp_divisoes_graf.attributes.divisao
"y": states.sensor.nr_temp_divisoes_graf.attributes.temp
Thks
, you managed to make fn work! I struggled to find good references for that.
so the correct curves should go down instead of going up. But the code remains very similar.
