Oh right, I misread the data format. This may be more like it:
entities:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
filters:
- fn: |
({meta}) => ({
xs: meta.raw_today.map(({ start }) => new Date(start)),
ys: meta.raw_today.map(({ value }) => value),
})
Thank you very much, it appears to work now!
Hi,
In relation to Plotly interactive Graph Card - #526 by MaxJoseph
I think I need to format my data as a 2D array, but I am not sure how to figure a filter to achieve this.
Thanks,
Max
Thanks. Really appreaciate this. Keep on the good work and have a nice 2024.
btw: is this the correct code for the pic?
Thanks! You too!
I think the previous answer applies to your question too
Thank you for this add-on.
I’ve got a few noob questions. I’ve gone through all the documentation but can’t seem to understand things… I’m finding it a bit overwhelming.
#1 I have a basic line graph with the following YAML:
type: custom:plotly-graph
entities:
- entity: sensor.solar_wind_phi_angle
hours_to_show: 72
refresh_interval: 10
logarithmic_scale: false
defaults:
entity:
fill: tozeroy
“sensor.solar_wind_phi_angle” is just a angular (degrees) value between 0 and 360.
Is it possible to colour any parts of the line with values between 0 and 219 in red, and between 220 and 360 as blue?
Alternatively, I could use the “fill: tozeroy”, if I can just specify 220 as the value instead of zero y. Is this possible? e.g. “fill: to220y”?
#2. I don’t understand how to use any of the other types of display options. For example, the histogram in your comment a few days ago.
I read the sample code provided, and simply changed the three sensors to my own pressure/temp/humidity sensors. However, I get a “no type provided” error when I try to enter it into the card configuration, despite line 19 containing “type: histogram2dcontour”. I am unable to click the save button as it is greyed out at this point.
Could you please explain how I can use the other graph types?
#3. The top of your Github post shows a number of example plot types, such as the 3D line graph of humidity, temperature, and pressure. Do these have specific names? Is there a list of all “type” options somewhere?
#4 - I note the “hours_to_show” option (I have set 72 hours on the above example). This, of course, only loads the last 72 hours of data into the plot. Is it possible to load more data (preferably, all the data stored by Home Assistant for that sensor), but set a default display range (e.g. display the last 2 hours to begin with and allow the user to then zoom out to see earlier data)?
#5 - Is it possible to manually specify the range of the Y axis? I have a sensor that has only been running for the last 24 hours, and the value of that sensor has been hovering around 350. However, based on previous sensors, I expect it will have values between 250 and 900. Right now, the graph loads with a y-axis range of 330-370. However, these values can be considered low for this specific sensor, so it isn’t intuitive having the y-axis restricted like this. Having it manually set to e.g. 250-900 would allow me to intuitively see that the line is in the lower range (when the readings are around 350, as they are now).
Thank you in advance for your help.
Hi there @DaveTSG !
Unfortunately no. Plotly doesn’t support it as far as I know. I think apex charts does.
Only through workarounds using the same entity multiple times with different time_offset, storing them in vars and processing them via filters.
Yes, google “set y axis range in plotly”.
See Plotly javascript graphing library in JavaScript
You could add a transparent entity with a constant value of 220 and use fill: tonexty
I feel you, the price of flexibility is a steep learning curve. Try googling “how to x with plotlyjs” and navigate around in the Discussions section of this card’s repo.
For specific things, you can open a new q&a topic in the repo and get help there 
Hello everyone
Happy new year.
, I would re
I really don’t understand the logic behind filters.
If somebody could give me a hint, I would reaaly appreciate.
in a graph, I want to show the power but limited to the value of the temperature if the power is above 100.
I’ve tried the following syntax w/o success.
What should I modify ?*
Many thanks
- entity: sensor.parents_power
name: Power
yaxis: y1
fill: tozeroy
filters:
- map_y: 'state.state > 100 ? sensor.parents_temperature : 0'
line:
color: blue
width: 0.2
You need to use the resample filter on both so the arrays are aligned (i.e. each index points to the same date on both), and then the store_var filter on the secondary entity.
This way you can access both histories from within the filters of one.
I suggest you visit the discussions section of the repository and see the examples there. It requires some thought but it will hopefully click after that
Thank you. I’ll post in the repo’s discussion board.
Thanks a lot ! It works fine
This thread and the examples in it have been a huge help! Maybe I can return the favor for someone out there by sharing where I’m at with my graph of room temps and HVAC stuff.
Is there a way to limit the X-axis panning to a specific range? I’ll often end up panning or zooming to a mostly blank graph of future time.
type: custom:plotly-graph
hours_to_show: 24
refresh_interval: auto
autorange_after_scroll: true
defaults:
entity:
show_value: false
line:
width: 2
yaxis: 'y'
yaxes:
fixedrange: true
entities:
- entity: sensor.temp_sensor_1_temperature_2
name: Bedroom
line:
color: green
- entity: sensor.temp_sensor_2_temperature_2
name: MBR
line:
color: dodgerblue
- entity: sensor.temp_sensor_3_temperature_2
name: Front Office
line:
color: chocolate
- entity: sensor.temp_sensor_5_temperature_2
name: Playroom
line:
color: 8F54D3
- entity: sensor.temp_sensor_4_temperature_2
name: Living Room
line:
color: gold
- entity: climate.alarm_com_smart_thermostat
attribute: current_temperature
name: Thermostat
unit_of_measurement: °F
line:
color: lightgray
width: 1
opacity: 0.6
- entity: climate.alarm_com_smart_thermostat
attribute: target_temp_low
name: Target Low
unit_of_measurement: °F
line:
color: red
dash: dot
width: 1
opacity: 0.6
- entity: climate.alarm_com_smart_thermostat
attribute: target_temp_high
name: Target High
unit_of_measurement: °F
line:
color: blue
dash: dot
width: 1
visible: false
- entity: climate.alarm_com_smart_thermostat
attribute: hvac_action
name: Heating
filters:
- map_y: 'y === "heating" ? 150 : 0'
yaxis: y2
fill: tozeroy
fillcolor: rgba(255, 99, 71, 0.3)
line:
color: tomato
width: 0
- entity: climate.alarm_com_smart_thermostat
attribute: hvac_action
name: Cooling
filters:
- map_y: 'y === "cooling" ? 150 : 0'
yaxis: y2
fill: tozeroy
fillcolor: rgba(4, 90, 150, 0.2)
line:
color: rgba(4, 90, 150, 0.2)
width: 0
- entity: sensor.openweathermap_temperature
name: Outdoor
yaxis: y2
fill: tozeroy
fillcolor: rgba(200, 200, 200, 0.15)
line:
color: white
width: 0
layout:
margin:
t: 50
l: 15
showlegend: false
legend:
x: 0.1
'y': -0.8
yaxis:
side: right
tickfont:
color: lightgray
autorange_after_scroll: true
autorange: true
showgrid: true
yaxis2:
side: left
visible: false
overlaying: 'y'
tickmode: sync
range:
- 0
- 150
xaxis:
tickangle: 0
tickfont:
color: lightgray
tickformat: |-
%I%p
%b %d
hoverformat: '%I:%M%p'
rangeselector:
bgcolor: rgba(0,0,0,.45)
x: 0.01
'y': 0.03
buttons:
- count: 12
step: hour
- count: 18
step: hour
- count: 24
step: hour
- count: 36
step: hour
- count: 72
step: hour
annotations:
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: green'>"
+ Math.round(hass.states['sensor.temp_sensor_1_temperature_2'].state) + "</span></span>ºF<br>"
+ "</span><span style=''>Bedroom</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.06
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: dodgerblue'>"
+ Math.round(hass.states['sensor.temp_sensor_2_temperature_2'].state) + "</span></span>ºF<br>"
+ "</span><span style=''>MBR</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.27
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: chocolate'>"
+ Math.round(hass.states['sensor.temp_sensor_3_temperature_2'].state) + "</span></span>ºF<br>"
+ "</span><span style=''>Front Office</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.51
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: #8F54D3'>"
+ Math.round(hass.states['sensor.temp_sensor_5_temperature_2'].state) + "</span></span>ºF<br>"
+ "</span><span style=''>Playroom</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.75
'y': 1.3
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: gold'>"
+ Math.round(hass.states['sensor.temp_sensor_4_temperature_2'].state) + "</span></span>ºF<br>"
+ "</span><span style=''>Living Room</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.99
'y': 1.3
showarrow: false
I’ve just installed Plotly and it seems to be doing exactly what I want.
I must admit that I’m not really sure where to get the documentation for it other than looking at the example and guessing.
Anyway, I have managed to get my gas usage plot by month with the following yaml:
type: custom:plotly-graph
entities:
- entity: sensor.daily_gas_consumption
type: bar
statistic: sum
period: month
name: Monthly
texttemplate: '%{y}'
filters:
- filter: x < new Date(Date.now() - 1000*60*60*24*31)
- entity: sensor.daily_gas_consumption
type: bar
statistic: sum
period: month
name: This Month
texttemplate: '%{y}'
filters:
- filter: x > new Date(Date.now() - 1000*60*60*24*31)
refresh_interval: 30
hours_to_show: 6M
layout:
xaxis:
rangeselector:
'y': 1.2
buttons:
- count: 1
step: month
- count: 3
step: month
- count: 6
step: month
and it works well (although much of it is copied without full understanding).
However when I change the button to (say) 1 month, it would be great if I could somehow change the ‘period’ to be ‘week’.
Is there a way?
Susan
Happy to hear you find it useful!
There’s a way, see GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!
The period can be set to auto or custom ranges for each period can be defined
Hello everyone - having trouble with the color scheme of the card itself.
By default the card background is black
If I add
layout:
paper_bgcolor: transparent
plot_bgcolor: transparent
I get this
I want the card on the right to use the same color scheme (driven by theme) as the card on the left here for illustration purposes.
Can someone help ?
Thanks !
Try rgba(0, 0, 0, 0.3) instead of transparent
Thank you - much better !
How about formatting the legend so it does not hide under the buttons (1h, 1d, 7d) and also changing the styling of those, black font for instance to improve visibility ?
Thank you so much
found it
added in layout section
legend:
y: 1.5
