Assuming you to have only y-axis values… I had some challenges with them.
Apexcharts seem to demand a date/time for x-axis (I have not found one wihtout date/time), my workaround is to fake the date/time
Plotly has another option
Plot arbitrary data · Discussion #26 · dbuezas/lovelace-plotly-graph-card (github.com)
1 Like
for the heating curve, I have 6 values and the curve should be polynomic.
| Heating Curve | |||
|---|---|---|---|
| Start | 0 °C | End | |
| Outside Temperture | 22 | 0 | -20 |
| Return Temperature | 22 | 31.2 | 35 |
My result in excel is this one:
So… this is indeed where I (already) have to draw the line with me not being the expert.
Plotly had a nice option to draw arbitrary data but this no longer works, asked the dev to provide more input. Polynomic functions seem not available with either apex or plotly, so that seems a probable ‘no’
EDIT, not giving up yet but also donot want to raise hopes
1 Like
Yep, it’s kind of weird there is no ready-made solution to graph nice little graph with own given list of labels and values 
. I really, really appreciate you helping us out @vingerha!
Small steps and might be getting there, the plotly dev was very fast with his response (thanks @mateine)
This should be enough of a basis to continue digging into plotly for formatting … and there are LOTS of formatting options 
1 Like
Thank you very much @vingerha , I can work and go further with this. I will try to calculate more values between, to improve the curve. Thats great!
Thank you so so so much @vingerha! I’m now happy camper as can use simple graph 
And for anyone looking code for solution, here it is:
type: custom:plotly-graph
hours_to_show: current_day
layout:
xaxis:
type: number
showlegend: false
yaxis:
fixedrange: true
range:
- 0
- 50
entities:
- entity: ''
x: [-20,0,20]
y: [22,31,35]
line:
shape: spline
raw_plotly_config: true
OK, I think I have good enough solution for my own case. I’m using picture elements and plotly, below the concept which I need to stylize.
But anyway, here’s my code for above:
type: picture-elements
title: ''
style: |
ha-card { height: 150px !important;}
elements:
- type: custom:plotly-graph
style:
top: 15%
left: 50%
width: 95%
height: 90%
hours_to_show: current_day
layout:
xaxis:
type: text
showlegend: false
yaxis:
fixedrange: true
range:
- -20
- 40
entities:
- entity: ''
'y':
- -14
- 5
- 17
- 25
- 26
x:
- ala
- kylmä
- keski
- lämmin
- ylä
line:
shape: spline
raw_plotly_config: true
- type: state-label
entity: input_number.hvac_asetusarvo_ulkolampotila_01_alaraja
title: null
style:
top: 23%
left: 25%
- type: state-label
entity: input_number.hvac_asetusarvo_ulkolampotila_02_kylmaraja
title: null
style:
top: 15%
left: 38%
- type: state-label
entity: input_number.hvac_asetusarvo_ulkolampotila_03_keskiraja
title: null
style:
top: 9%
left: 50%
- type: state-label
entity: input_number.hvac_asetusarvo_ulkolampotila_04_lamminraja
title: null
style:
top: 6%
left: 62%
- type: state-label
entity: input_number.hvac_asetusarvo_ulkolampotila_05_ylaraja
title: null
style:
top: 5%
left: 75%
image: https://img.freepik.com/free-photo/paper-texture_1194-6010.jpg
2 Likes
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
, you managed to make fn work! I struggled to find good references for that.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 
so the correct curves should go down instead of going up. But the code remains very similar.
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.
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
Thank you @sofa74surfer for your code and image
It helped a lot in making my own setup by adopting your code to my needs.
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.
As you can set the heat pump to follow the “curve” depending on the slope and translation you enter manually into the het pump you can get it to ajdust the outgoing temp based on the slope and translation you have chosen.
By taking into account the outside temp the heat pump follwos the “curve” chosen.
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.
