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
Cool! Feel free to open a Q&A topic in the repo if you need help along the way
It also happens wihout scrolling… But scrolling also has affect on which bars are missing.