See the “now line” in the repo
You’ll have to do that yourself. You can find the math and js functions here: Show the current day from midnight to midnight · dbuezas/lovelace-plotly-graph-card · Discussion #220 · GitHub
I want to output a number of temperature- and humidity-sensors grouped by their respective room and connect the graph so that scrolling the graph from one room the others will follows.
What am I doing wrong when the result looks like this:
type: custom:plotly-graph
entities:
- entity: sensor.particle10_bme680_temperature
yaxis: 'y'
- entity: sensor.particle10_bme680_humidity
yaxis: y2
- entity: sensor.particle5_outside_bme680_temperature
yaxis: y3
- entity: sensor.particle5_outside_bme680_humidity
yaxis: y4
layout:
dragmode: pan
margin:
t: 30
l: 45
r: 40
b: 50
height: 500
grid:
rows: 2
columns: 1
yaxis:
overlaying: false
side: left
title:
text: Temperature
yaxis2:
overlaying: 'y'
side: right
title:
text: Humidity
yaxis3:
overlaying: false
side: left
title:
text: Temperature
yaxis4:
overlaying: y3
side: right
title:
text: Humidity
defaults:
yaxes:
side: left
overlaying: 'y'
visible: true
showgrid: false
xaxes:
showgrid: false
hours_to_show: 3h
color_scheme: 1
If I change grid rows from 2 to 3 it looks better but I’m not totally keen about the empty slot in the middle:
grid:
rows: 3
columns: 1
2 rows instead of 3?
Yes, I want them on 2 graphs instead of 3 and still be able to have temperature and humidity in the same graph (by using overlaying I guess).
Hi,
I am really interested in using this card to produce a density histogram like that shown in your examples. I am struggling to find example code though and specifying plotly graph type ‘density_heatmap’ does not seem to work. I am probably missing something basic!
I have a variable electricity tariff and I would like to plot daily cost against use in the form of a histogram. As time goes on I expect most days to follow a straight line but some will be above and some below.
The following is code I have to do a 2d scatter, but I would like the heatmap/density map effect.
type: custom:plotly-graph
entities:
- entity: >-
sensor.octopus_energy_electricity_22l3941221_2000011182918_previous_accumulative_cost
internal: true
filters:
- resample: 1d
fn: $fn ({ xs, ys, vars }) => { vars.cost = ys; vars.xs = xs; }
- entity: >-
sensor.octopus_energy_electricity_22l3941221_2000011182918_previous_accumulative_consumption
internal: true
filters:
- resample: 1d
fn: $fn ({ ys, vars }) => vars.usage = ys
- entity: ''
x: $fn ({ vars }) => vars.cost
'y': $fn ({ vars }) => vars.usage
mode: density_heatmap
marker:
size: 7
line:
color: rgba(50, 50, 217, 0.5)
width: 3
opacity: 0.8
hours_to_show: 3600
raw_plotly_config: true
layout:
margin: null
scene:
xaxis:
title: cost
yaxis:
title: usage
Then write rows: 2 instead of 3
If it was that easy I wouldn’t have posted the question. There are yaxis1-4 in the code and with overlays that mess up the rows.
Then I don’t know, I suggest you search forums for plotly itself
Here’s how I solved it:
layout:
xaxis:
type: date
tickmode: linear
dtick: M2
tick0: '1999-01-13'
tickformat: '%b %y'
You can format the axis labels:
layout:
xaxis:
type: date
tickmode: linear
dtick: M1
tick0: '1999-01-13'
tickformat: '<b>%b</b><br>%Y'
griddash: solid
gridcolor: rgb(25,25,25)
Lycka till 
2 Likes
This might sound like a weird question perhaps, but is there a way of having the x-axis show values of importance, ie only where there is a “hit”. Let’s say I have this chart where I visualize when a certain door has been opened. I am not interested in seeing time stamps other than when the door was opened.
I think there may be, google for plotly axis ticks
Hello,
I love this Plotly Graph. Thanks for sharing.
Now to my problem. I try to build a graph with tipper electric prices now and future. No problem there I found it in Github.
But now I want to add the wind forecast for the windpark and try to figure out or guess the future prices more than one day forecast 
How do I need to change the yaml to see one day past prices, future prices tibber and then 3 days future wind.
type: custom:plotly-graph
time_offset: 96h
refresh_interval: 300
hours_to_show: 144
layout:
showlegend: true
height: 300
legend:
x: 0
'y': 1
bgcolor: rgba(0,0,0,0)
orientation: h
itemsizing: constant
font:
size: 12
yaxis:
rangemode: tozero
tickformat: .1f
yaxis2:
rangemode: tozero
tickformat: .0f
range:
- 20
- 100
fixrange: true
yaxis9:
visible: false
fixedrange: true
round: 2
entities:
- entity: sensor.electricity_price_zuhause
fill: tozeroy
fillcolor: rgba(62, 138, 0,.1)
unit_of_measurement: Eur/kWh
line:
color: rgba(255, 165, 0, 1)
width: 2
filters:
- store_var: electricity_price
- exponential_moving_average:
alpha: 1
show_value: true
texttemplate: ' %{y:.2f} Eur/kWh'
- entity: sensor.tibber_prices
name: Future price
fill: tozeroy
fillcolor: rgba(255, 165, 0,.1)
line:
color: rgba(255, 165, 0, 1)
width: 1
dash: dot
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.electricity_price.xs.slice(-1)[0],...meta.today.map(({ startsAt }) => new Date(startsAt))],
ys: [vars.electricity_price.ys.slice(-1)[0],...meta.today.map(({ total }) => total)],
xs: [vars.electricity_price.xs.slice(-1)[0],...meta.tomorrow.map(({ startsAt }) => new Date(startsAt))],
ys: [vars.electricity_price.ys.slice(-1)[0],...meta.tomorrow.map(({ total }) => total)],
})
- exponential_moving_average:
alpha: 1
- entity: ''
name: Now
yaxis: y9
showlegend: false
line:
width: 2
dash: dot
color: blue
x: $fn () => [Date.now(), Date.now()]
'y': $fn () => [0,1]
- entity: sensor.wind_nordsee_forecast_wind_speed_2
name: Windgeschwindigkeit
yaxis: y2
fillcolor: rgba(31, 119, 180,.6)
line:
color: rgba(31, 119, 180, 1)
legendgroup: 1
filters:
- store_var: wind
fill: tozeroy
- entity: weather.nordsee
yaxis: y2
legendgroup: 1
showlegend: false
fill: tozeroy
fillcolor: rgba(31, 119, 180,.2)
line:
color: rgba(31, 119, 180, 1)
width: 2
shape: spline
unit_of_measurement: km/h
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.wind.xs.slice(-1)[0],...meta.forecast.map(({ datetime }) => new Date(datetime))],
ys: [vars.wind.ys.slice(-1)[0],...meta.forecast.map(({ wind_speed }) => wind_speed)],
})
- exponential_moving_average:
alpha: 1
config:
scrollZoom: true
displayModeBar: false
staticPlot: false
Now it s more random and not working for the prices for today from tibber (not shown in the graph, why?)
You want so see 4 days in total so:
hours_to_show: 4d
And you want want to see 3 days into the future, so:
time_offset: 3d
Ok, thanks that helps a bit
Now how to change this:
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.wind.xs.slice(-1)[0],...meta.forecast.map(({ datetime }) => new Date(datetime))],
ys: [vars.wind.ys.slice(-1)[0],...meta.forecast.map(({ wind_speed }) => wind_speed)],
})
To only get 3d in future and not all of the future informations.
Thanks a lot.
Oh I see. You can add another filter
filters:
- ......
- filter: "x < Date.now() + 1000 * 60 * 60 * 24 * 3"Cool. Thanks
Now its almost perfekt
One thing more. Is it possible to change the color of the text (Price) and change the place of the speed information on the right?
Also there is a gab between the start of the windspeed and the now? But possible that I made an error with my current wind data? Found the error…no longer an issue.
To change the anchor of the text try textposition Scatter traces in JavaScript
For the color, I don’t know, search in the link above. Maybe markercolor.
Alternatively, increase the time_offset a bit so there’s more space for the text, or put the price inside a text annotation Text and annotations in JavaScript
Hi there! I’m trying to move over from Apex Charts to Plotly. I’m trying to reconstruct some electricity price charts I had going to see the price of today’s and tomorrow’s electricity per hour (based on the Nordpool integration: GitHub - custom-components/nordpool: This component allows you to pull in the energy prices into Home-Assistant.). However, I’m having some trouble.
The attribute ‘Raw today’ has the correct price for each hour between 00:00 and 24:00. From reading the docs, I believe I should be using filters and the -fn option to extract the x- and y-axis values from the ‘Raw today’ attribute. However, this is where I must confess I am not savvy enough to figure out the function myself. Any help would be appreciated! Thanks in advance
The earlier code to extract the values used in Apex Charts was:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
type: column
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
Indeed, and you can reuse most of the function too, but I’ll try to simplify it a bit.
** Update: this is wrong. Answer below**
entities:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
attribute: raw_today
filters:
- map_x: ys.map(({ start }) => new Date(start))
- map_y: ys.map(({ value }) => value)
I’m on my phone so I can’t test it, let me know if it doesn’t work