Wow! So very powerful.
I don’t know javascript, but the example below worked well.
name: |
$ex meta.friendly_name + " " + ys[ys.length - 1]
Thank you!
Thank you !!!
You made it 
Small tip: you can also use ys.at(-1) to get the last value more easily. It is a new array api in JavaScript
1 Like
Good morning
I edited 2 graphs with plotly graph card which do not display some data visually.
Here is the first with Solar missing:
the code:
type: custom:plotly-graph
entities:
- entity: sensor.totale_pv_production_day
statistic: sum
name: |
$fn ({ ys,meta }) =>
"Solar" + "🔆" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
period: month
type: bar
width: $fn() => 1000*60*60*130
offset: $fn() => -1000*60*60*327
texttemplate: '%{y}'
filters:
- delta
marker:
color: rgb(255, 155, 48)
- entity: sensor.consommation_electrique_maison_daily
statistic: sum
name: |
$fn ({ ys,meta }) =>
"Load" + "⚡" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
period: month
type: bar
filters:
- delta
width: $fn() => 1000*60*60*130
offset: $fn() => -1000*60*60*195
texttemplate: '%{y}'
marker:
color: rgb(95, 182, 173)
- entity: sensor.shellyem_consommation_grid_positif_daily
statistic: sum
name: |
$fn ({ ys,meta }) =>
"Grid Import" + "💡" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
period: month
type: bar
texttemplate: '%{y}'
width: $fn() => 1000*60*60*130
filters:
- delta
marker:
color: rgb(84, 144, 194)
- entity: sensor.decharge_batterie_jour
statistic: sum
name: |
$fn ({ ys,meta }) =>
"Battery Discharge" + "🔋" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
period: month
type: bar
width: $fn() => 1000*60*60*130
offset: $fn() => 1000*60*60*65
texttemplate: '%{y}'
filters:
- delta
marker:
color: rgb(151, 90, 182)
- entity: sensor.charge_batterie_jour
statistic: sum
name: |
$fn ({ ys,meta }) =>
"Battery Charge" + "🔋" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
period: month
type: bar
width: $fn() => 1000*60*60*130
offset: $fn() => 1000*60*60*195
texttemplate: '%{y}'
filters:
- delta
marker:
color: yellow
hours_to_show: 6M
title: Monthly Production
refresh_interval: 600
defaults:
yaxes:
fixedrange: true
layout:
legend:
bgcolor: rgba(0,0,0,0)
itemsizing: constant
font:
size: 11
height: 410
config:
displayModeBar: false
scrollZoom: false
time_offset: 1M
Here is the 2nd with Battery discharge missing:
the code:
type: custom:plotly-graph
entities:
- entity: sensor.totale_pv_production_day
statistic: state
name: |
$fn ({ ys,meta }) =>
"Solar" + "🔆" + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: rgb(255, 155, 48)
- entity: sensor.consommation_electrique_maison_daily
statistic: state
name: |
$fn ({ ys,meta }) =>
"Load" + "⚡" + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
filters:
- filter: i>0
texttemplate: '%{y}'
marker:
color: rgb(95, 182, 173)
- entity: sensor.shellyem_consommation_grid_positif_daily
statistic: state
name: |
$fn ({ ys,meta }) =>
"Grid Import" + "💡" + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: rgb(84, 144, 194)
- entity: sensor.decharge_batterie_daily
statistic: state
name: |
$fn ({ ys,meta }) =>
"Battery Discharge" + "🖱️" + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: rgb(151, 90, 182)
- entity: sensor.charge_batterie_jour
statistic: state
name: |
$fn ({ ys,meta }) =>
"Battery Charge" + "🔋" + "(" +ys[ys.length - 1]+"kWh)"
period: day
type: bar
texttemplate: '%{y}'
filters:
- filter: i>0
marker:
color: yellow
hours_to_show: 5d
title: Daily Production
refresh_interval: 12
defaults:
yaxes:
fixedrange: true
layout:
legend:
bgcolor: rgba(0,0,0,0)
itemsizing: constant
font:
size: 11
height: 410
config:
displayModeBar: false
scrollZoom: false
time_offset: 12h
I don’t see what’s wrong, if you have an idea of your own, I’d be grateful.
THANKS
Check if you’re getting data in the standard HA statistics card. The data is most likely just not stored by home assistant. Sensors need to ve of specific sensor_class for home assistant to store different kinds of statistics (like sum)
actually when I use these entities in a normal statistic card with sum, they do not work.
However, the two entities below have the same characteristics and only the charge_batterie_jour entity works.
I never fully understood how HA decides what to stores in statistics, you may have better luck in a post about home assistant statistics in general
Hi. I’d like to do a graph for the different usages of power in our home, and I think a stacked scatter graph (using ‘scattergroup’) would be a good way to do that.
However, I realized, that negative values are also stacked (negatively) upon the other (posivitve) values. See graph #1.
Is there a way with to have only positive values above the x axis and negative values stacked below it?
I’d like to have something like graph #2:
#2 was created with two filtered traces for each, battery and grid, each of which either contains only the positive or the negative values, and hiding the legend for the negative values. But this has the drawback, that toggling the legend element “Battery” only hides the positiv part of the trace.)
I have the folloing graph showing Solar production and consumption.
However it doesn’t display the current 10mn values I think, since it takes time to refresh. Is there a way I can get the recent values in the current 10mn to show up in the graph before the end of the 10mn interval ?
Code below:
type: custom:plotly-graph
entities:
- entity: sensor.tb_house_consumption_kw
name: Grid
fill: tozeroy
line:
color: '#77aaff'
shape: spline
show_value: false
extend_to_present: false
on_legend_click: {}
on_click: {}
on_dblclick: {}
filters:
- resample: 10m
- entity: sensor.tb_solaredge_ac_power
name: Solar
fill: tozeroy
line:
shape: spline
color: '#ff8800'
show_value: false
extend_to_present: false
on_legend_click: {}
on_click: {}
on_dblclick: {}
filters:
- resample: 10m
- entity: sensor.tb_house_solar_only_consumption_kw
name: Self
fill: tozeroy
line:
color: '#00eeee'
shape: spline
show_value: false
extend_to_present: false
on_legend_click: {}
on_click: {}
on_dblclick: {}
filters:
- resample: 10m
hours_to_show: current_day
refresh_interval: 1
config:
scrollZoom: false
displayModeBar: false
staticPlot: true
The approach sounds good Google for “plotlyjs legendgroup”. With this you’ll get a single legend for all grouped traces and all will be shown/hidden at the same time.
1 Like
Another question related to my solar graph. I had no power for several hours today between 7am and 12:30pm roughly. So I would have expected the graph to show a dip at zero during that time, but it seems plotly joins the last known value, with the first new one, even several hours apart. Is there a way to prevent this, and show the fact that there was no value during that time, and keep the graph at zero ?
It is the same yaml as the one I posted just above.
This is how I would have liked it to look:
Hello guys, I am willing to use the forecast feature of the addon. I have a machine learning sensor predicting a given temperature using the EMHASS Integration. However, the sensor contain the data within an attribute ‘scheduled_forecast’ (see the screenshot) and I couldn’t find a way to make it compatible with the Offset feature provided by Plotly.
Home assistant should be storing the missing data as “unavailable”, which this card converts to “null” and results in a gap in the plot. Since you are not getting this, I suggest you take a look at the debugging section of the readme and extract the data to the browsers console to see what could be going on.
If the data is just missing, you may be able to detect a wide gap and fill it with zeroes using filters (see readme again). You’ll need to write a couple of lines of JavaScript.
Feel free to open a Q&A discussion in the repo if you have more questions about this and I’ll guide you there (it’s easy to follow up there)
Hi!
I think this example of how to use this kind of data-attributed is what you need:
Thank you @mateine I got it to work using this code for future users:
type: custom:plotly-graph
time_offset: 0.5d
entities:
- entity: sensor.measured_temperature
name: Measured Temperature
line:
color: orange
width: 2.5
filters:
- store_var: temperature
- entity: sensor.p_hotwater_forecast_model
showlegend: false
name: Forecasted Temperature
line:
color: red
dash: dot
width: 2
unit_of_measurement: °C
filters:
- fn: |-
({ meta, vars }) => ({
xs: [vars.temperature.xs.slice(-1)[0],…meta.scheduled_forecast.map(({ date }) => new Date(date))],
ys: [vars.temperature.ys.slice(-1)[0],…meta.scheduled_forecast.map(({ state }) => state)],
})- entity: ‘’
name: Now
yaxis: y9
showlegend: false
line:
width: 1.5
dash: dot
color: black
x: $ex [Date.now(), Date.now()]
‘y’:
- 0
- 1
- entity: sensor.p_hotwater_forecast_model
name: Forecasted Temperature
line:
width: 3
color: red
defaults:
entity:
show_value: false
line:
shape: spline
layout:
legend:
itemwidth: 10
hours_to_show: 48
and here’s how it looks:
1 Like
I’m trying to create a an hourly energy bar graph utilizing the Plotly graphs statistics feature from an hourly cumulative energy value created with utility meter as follows:
type: custom:plotly-graph
entities:
- entity: sensor.ilp_energy_spent_hourly
name: ILP Energy hourly Cum
unit_of_measurement: Wh
filters:
- multiply: 1000
- entity: sensor.ilp_energy_spent_hourly
type: bar
statistic: state
period: hour
name: ILP Energy hourly
unit_of_measurement: Wh
filters:
- multiply: 1000
- fn: "({xs, ys, meta, states, statistics, hass}) => {\n const adjustTimestamp = date => {\n const d = new Date(date);\n d.setHours(d.getHours() + 1); // Adjust timestamp by +1 hour\n return d;\n }\n const r = { xs: [], ys: [] };\n for (let i = 0; i < xs.length; i++) {\n r.xs.push(adjustTimestamp(xs[i]));\n r.ys.push(ys[i]);\n }\n return\_r;\n}"
hours_to_show: 24
defaults:
entity:
show_value: true
yaxis: y1
refresh_interval: 10
title: ILP Hourly Power
The problem is that seemingly randomly the bar graphs has gaps as follows.
Any advises on how to fix this?
1 Like
Yes, use the visible parameter:
- entity: xyz
visible: true # default
visible: false # completely hides trace and its legend (name at the top)
visible: legendonly # hidden by default, but can be shown by clicking on its name
1 Like
It happens when you scroll, right?
This seems to be a regression in home assistant, I think it stopped respecting the boundaries requested, and this card then thinks it already got the data it asked for.
You can follow this issue: Gaps in data when scrolling · Issue #315 · dbuezas/lovelace-plotly-graph-card · GitHub
The issue is that the data is not really missing, since it’s showing in the browser in chrome on Mac.
What’s actually strange, is that I have the exact same graph in two different dashboards. One which was showing the values correctly, and one which was showing the flat lines in the middle. Same graph, same app, at the same time (Just different Dashboards). So it seems to be an issue with the rendering of the graph really, not really with the values coming out.