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.
The only way to find out is to analyze the raw data and look at the yaml. I suggest you open an issue in the repo and post as much info as you can there (it’s easier to follow up than here)
This is interessting. I tried to set this up myself but somehow the card displays not the right values. Could you might be post the code as a code block with correct formating. The indents/formatting in your post is broken.
Thank you 
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_eau.xs.slice(-1)[0],...meta.scheduled_forecast.map(({ date }) => new Date(date))],
ys: [vars.temperature_eau.ys.slice(-1)[0],...meta.scheduled_forecast.map(({ p_HotWater_forecast_model }) => p_HotWater_forecast_model)],
})
- entity: sensor.p_hotwater_forecast_model
name: Forecasted Temperature
line:
width: 3
color: red
- entity: ''
name: Now
yaxis: y9
showlegend: false
line:
width: 1.5
dash: dot
color: black
x: $ex [Date.now(), Date.now()]
'y':
- 0
- 1
defaults:
entity:
show_value: false
line:
shape: spline
layout:
legend:
itemwidth: 10
hours_to_show: 48
very generic question - but hoping to find out before i jump in head first trying to do something that might not be possible.
i want to display the state-history of a binary sensor just like the history card - but day by day rather than for the last 24 hours. essentially like the sure petcare app does for the outside time for a cat (not neccesarily and actually preferably, not vertically like this):
is this even possible with this card?
i already have this with the apexcharts card, but this only calculates a total sum day by day.
Oh wow, that’s quite a challenge. Plotly doesn’t have a chart type for this, so the only way I can think of to “simulate” this is through a hack: using multiple stacked bar charts, where every second one has a transparent color and all the data is computed via JavaScript ($ex or $fn)
- Add an entity that fetches the data, but is marked as “internal”, computes the start and end time of each vertical bar and stores everything in a
var. - Add n traces that fetch no data but look at the stored
var. Every second trace will be transparent and represent the gaps - Configure the y axis so it can represent time of day
If you understand JavaScript and are reasonably well versed in algorithms, by all means read the readme, give it a try and post back the results! (Preferably in a Show&Tell post in the Discussions section of the repo.
If your hope was to achieve this using pure yaml, I’ll have to disappoint you.
Good luck!
I knew i would have to learn quite a bit, so a challenge was expected
Ill give it a whirl, was just hoping that maybe someone had some sort of starting point that was similar
Thanks for the ideas