Hello all wizards!
I would like to draw a nice curve from a handful of values set by myself. The main goal is to draw nice step curve for heating/ cooling temperature set points. I can do it easy way just plotting them over image, but maybe there is some sneaky curve/ graph way doing it?
I have temperature set points like -10C,5C, 17C, 25C. All set points are in the helper variables.
Anyone using graphs in this way?
The idea of home assistant is to automate things so ‘manual’ is not really a target 
However, there are options…
A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant (github.com)Maybe also throw an eye on this one:
Input Number - Home Assistant (home-assistant.io)
This one allow you to change the value which will be registered as ‘state’ so you can also use it for history (depending on how long you keep de HA database data)
@nikop, did you succeed, drawing your heat curve and do you have an example? I’m thinking about the same, but with the data from heat pump.
@sofa74surfer, no I did not succeed. As having so many other need to be better things in the system I left my quite badly designed only numbers/ sliders page alone . 
I may (not THE expert) help… can you send me your data and expectation, example?
Thank you for helping out us @vingerha. I could use help in making simple 5 point graph which sets up corresponding helper variables a,b,c,d,e like -15,-5,5,17 and 25. How you have tackled this kind of variable setting through graphical way?
Simpler the better like
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)
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
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 
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
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