Plotly interactive Graph Card

I missed few releases. Today HACS notified the update, I did it, but then I had some problems:

it says that it couldn’t find the card, but it was there (and I rebooted):

I tried to re-download, I manually selected v 0.70 and it started working again :wink:
Now I have to check the news… and I must try the attribute plotting! :slight_smile:

Oh, that’s odd! Is anybody else having this problem?

Check out also this one:

@Markuska00 made a very cool example there. I’m thinking about an easier way to expose these styles

Sneek peek:

  • 25 color palettes
  • default yaxes
  • easy config to show last value of trace in the plot

Coming soon! v1.1.2

HI, thanks for the amazing work! I just discovered this project and I am now working on replacing my mini graph cards with it, as it is more useful for me.

What I wanted to ask if it may be possible for you to add an option to change the line color based on value. The example of what I have now:



Happy to hear you find it useful!
Painting a single trace with multiple colors is unfortunately not possible with the underlying plotting library, I don’t think it will ever be possible

I just installed your card (nice work by the way) and everything is working fine on MacOS 12.1 with Chrome including range selection.
But on Safari when trying to change the range to a wider selection, the only part of the graph showed is from the original range although data for this timeframe is present in the Home Assistant database (for instance, when starting with a 24h view and trying to show a 7 days view, only the original 24h view is showed).

The inspector output this error message:
“Unhandled Promise Rejection: Error: Error computing range substraction. Please report an issue in the repo of this card”

The same bug is also present on Safari for iOS.

Sorry to bother you with this issue !

Hey Chaps, thanks!

Could you put this in the github issues instead?
Please add the contents of the console between “----ERROR TO REPORT-----” and the “error computing range subtraction” message and I’ll give it a look on the weekend.

The card is now in the HACS default repository, so no need to copy and paste the url to install it, just a search in hacs :slight_smile:

Great new card. I started to convert some of the apexcharts cards I had to this new setup.
Couple of questions:

  • in apexcharts, it’s possible to group values by duration and return the average. So for instance I may have a sensor updating every 30 seconds, by just take the average for each 2 minutes interval. How would you do this using lambda functions ?
  • Is there a way to state the fill opacity ?

Fill opacity can be done… with fillcolor. Last element is the opacity.

 type: custom:plotly-graph
   - entity: sensor.lumi_lumi_weather_1cc7e307_temperature
     fill: tozeroy
     fillcolor: rgba(168, 216, 234, 0.5)

Regarding averaging, yes it is possible through lambdas, you can return the x coordinate value array like this: Custom x coordinates of traces

Let me know if you are not used to JavaScript and I’ll post the code when I have some time at the computer.

About fill opacity, Dynamix72 nailed it

Thanks @mateine . If you could provide that sample lambda function, I definitely would be glad :slight_smile:

@littlbee here’s the lambda

1 Like

Great card!

Do you think, you will ever implement (or is this perhaps already possible) e.g.

x: Days, y: hours

How is it possible to round the average value to 1-2 decimal places ?

Thanks :slight_smile:
Nice idea! This is not possible at the moment, but I could allow to return an array for the Z axis in the lambdas.
Would you mind requesting this here? This way I won’t forget to take a look at this when I get some free time.

1 Like

Very good and useful card. :smiley:

I have some questions:
First, can I replace the left text with my custom text? (steps)

Also: Is it possible to make the time-interval “today” (like from 00:00 until now),
Also2: In he current setup the buttons on top can go above the title, how can I prevent that?

1 Like

Isn’t this the uom? See here

Saw this as well. One more: Would be great to have a non overlapping name of the defined graph (e.g. if you have more than one per card), but one card-title as in HA standard (h1.card-header) additionally.

1 Like

[quote=“arganto, post:38, topic:347746”]
[/quote]yes, worked :slight_smile:

Mind sharing how you did this card? Thank you