Hey netweaver,
Thanks for the feedback 
Long term statistics are not yet supported. I’ll need to switch from from using the REST api to websockets for that.
For examples I recommend you visit the discussion section, but you can always google “plotly js how to xyz”. A lot of configurations can be directly transferred to yaml. Alternatively, you can also open a “new discussion” and ask there.
Have a nice day!
Thanks for a really great card.
I have it working on my PC and Android.
However I have an old ipad Air (1st gen) running IOS 12.5.4 where I’m getting error “Custom element doesn’t exist: plotly-graph”. I do not get any errors in the log. The issue is the same on Chrome v 87.0.4280.77, Safari as well as in Home Assistant app v 2022.3 (all testet on the old ipad)
I have found this issue which seems to be related and seems to be resolved based on the comments
Is that an easy fix which could be fixed in Plotly as well?
I’m using my old ipads as dashboards on my house so would really appreciate a fix.
Hi AEM!
I assume that the WebView in old ipads has an older browser engine version, but I don’t know which.
To find out which one exactly, you’ll need to add an iframe card and have it open this page: https://www.whatsmyua.info/
Then send me the UA (user agent) in the input box.
Preferably make a bug report with that in the GitHub repository (linken in the first post)
Hi meteine.
Thanks for your reply.
I have created a new issue, and added the UA info.
Let me know if you need anything else.
Cool card
Is it possible to zoom on the companion app? Tried the usual two-finger-zoom but it just moves the axis.
Yes, but not with two fingers. You need to tap to show the zoom buttons, tap the zoom button and the drag the area you want zoomed.
See the gifs in the repo
Thank you. I did not realize that I had to tap a specific part in the top if the chart to see the menu. Working now
But is there any way of maintaining the y-axis while scrolling? I just want to move in one direction (usually horizontally). Not both at the same time. Possible?
Yes, there is a way to fix an axis. Do visit the readme in the repository and the discussions section, there are a lot of examples for you to get inspired!
You can also google for “plotlyjs how to do xyz”
Thank you, I did look at the readme but I was so used to other syntaxes that I overlooked one of the two parts I needed.
For anyone interested:
defaults:
yaxes:
fixedrange: true # disables vertical zoom & scroll
rangemode: tozero # set y-axis minimum to zero. you can also use nonnegative instead
Quick question on tick marks.
Should this code not result in tick marks every “1”. So if the scale is days, it should be 1 day. If it is hours, it should be 1 h.
layout:
xaxis:
tickmode: linear
dtick: 1
For me it removes all ticks.
My goal was to have closer tick marks without defining exact values (like “1 hour”) because of course this would change when zooming.
I also tried adding ‘tick0: 0’ in case that was a mandatory entry, but everytime I do that my browser window freezes. Not sure if this is my server or a plotly bug (I tried with Firefox and Chrome).
From the examples (that’s where i found the dtick) it should be the main unit.
So if hours, then hours etc.
But I did not see the later example and dates, as you say, seem to be a special case.
Edit:
Tried it but I still get an empty axis.
layout:
xaxis:
tickmode: linear
tick0: 1980-09-25T00:00:00.000Z
dtick: 60 * 60 * 1000
P.S.: Would you mind testing paper and plot bgcolor with 100% transparency? Does not seem to work. The card is never fully transparent.
dtick: 60 * 60 * 1000
is probably interpreted as text.
Try the number instead after making the multiplication instead:
dtick: 3600000
Regarding the 100% transparency, this works fine for me. If I change the color of the home assistant container element, I see the plot being fully transparent. Maybe you have some custom theme that is interfering?
layout:
paper_bgcolor: rgba(0, 0, 0, 0)
plot_bgcolor: rgba(0, 0, 0, 0)
That fixed it, thank you!
Default dark theme. So nothing special.
And it makes no difference which color I select (and at 100% transparency it should not matter anyway).
The code for the apex chart above the plotly is
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none;
}```hello
i just found your great card and i prompty chaned all my usage of the history card to this one
but i found some problems:
the history card only grouped graphs if they have the same unit, yours groups everything.
i don’t like that. how can i force the other behavior ?
also: this looks weird. is there some calculation wrong about the height of the text?
Just create multiple cards
Google plotly Javascript legend to see how to customize how and where the legend is displayed
thanks
got it working/better layouted
but since i am a newbie at that, i find it not very intuitively
Yes, it isn’t the most intuitive plot card, but hopefully fun and useful for tinkerers
If you want to see advanced configurations people has come up with, visit the GitHub repository and look in the discussions section.
Has this bug been fixed somehow by now? I’ve also tried to plot the sun entity’s elevation attribute like this but got the same problem, absolutely no graph showing
@mateine, two questions:
