Plotly interactive Graph Card

Share your Projects! Dashboards & Frontend
,
62

thank you very much :slight_smile:

63

Hello,

Downloaded 1.1.6, and it seems some things are broken.
The config ui shows a spinning circle forever.
The graph for sun.sun::elevation isn’t what’s expected.
any clue ?

image
image1234×568 15.5 KB

image
image1210×560 18.5 KB

65

v1.1.6 is not released yet. Does v1.1.5 work as expected for you?

66

Sorry, I just took the js from /dist. I didn’t know it was WIP.
I will try 1.1.5 and report, thx

67

The UI is fixed, but the graph don’t seem to be good. I didn’t went to the db to check the values of the elevation attribute, but the graph shouldn’t look like this.

image
image1225×489 12 KB

68

I also expected something sinusoidal looking, but it seems as if home assistant only stored a couple of data points per day.

69

I can’t check right now, but I think the problem is that the lastupdated and/or lastchange attribute is updated only for the main state change. I will confirm tonight.

70

Now we know how to set the uom, but how can the location be changed?
TBH, reading Plotly JavaScript Graphing Library | JavaScript | Plotly… confused me more than pointing in the right direction.
I’d like the units to be above or below the y-axis’ values, not amongst them:
plotly01

71

Hi,

i tried this, but it didn’t change the graph.

  - entity: sensor.own_stromeinkauf
    lambda: ys => ys.map(sensor.own_stromeinkauf + sensor.own_pv_direkt_vebraucht)

thx for help!

72

Change the margins:

layout:
  margin:
    r: 100
    l: 100

I need to enable automatic margins soon

73

you can’t access the data of other entities. You’ll need to create a new template entity in home assistant and plot that.
Google “platform: template”

74

Yep, changed the margins to 50 on both sides and it came around quite OK.
Nonetheless, putting the unit(s) at the foot of (or above) the y-axis’ values (in a row with the x-axis’ values perhaps) could save that space at the margins.
I’m a tiny little bit stingy with display space. :blush:

No idea if plotly can yield that layout.
Anyway, thank you for adapting plotly to HA! Never heard of it before and now I’m quite into it…

75

Hi, I am trying to use both x and y axis from the entity attributes and with a period going back 100 entries to map (or more). e.g. mapping x with ‘daily’ and y with ‘daily_value’…is this possible?

76

Hey @Chaps,
The safari bug is now fixed, I hope you can enjoy the card now :slight_smile:

77

Hello @mateine,
Incredible job you just did there !!
I’m really sorry for forgetting to push this issue in the git.

It now works like a charm, thanks a lot :smiley:

1 Like
78

Cool! Thanks for confirming!
If you make some fancy charts, put them as examples in the discussions section of the repo :slight_smile:

79

Hi, I tried to add values to a bar chart. I looked in the plotly documentation and there it was done by using:

text: yValue.map(String)

I tried this:

text: ys.map(String),

But that does not work, it just takes everything as string. Any idea how I can show values in a bar chart?

80

yes, that won’t work. There is no lambda option for that, the card interprets this as

text: "ys.map(String)"

so that the code as an actual text string meaning literaly “show this exact text” instead of "evaluate this function.

Try with

texttemplate: "%{y}"

more here: Bar traces with JavaScript

81

Thanks, that works!

82

What a fantastic integration! I didn’t know of Plotly but you’ve done a great job to get this in to the HA world.

I’m trying to get the modeBarButtons to disappear on my ipad (used as an always on dashboard) on the HA app but for some reason they are always visible.

EDIT: Updated with the solution and some tweaks highlighted by @mateine

type: custom:plotly-graph
entities:
  - entity: sensor.office_temp
    name: Kontor
  - entity: sensor.living_room_temp
    name: Livingroom
  - entity: sensor.children_bedroom_temp
    name: Tjejernas
  - entity: sensor.master_bedroom_temp
    name: Sovrum
layout:
  dragmode: pan
  margin:
    t: 30
    l: 45
    r: 30
    b: 50
  showlegend: true
  height: 250
defaults:
  entity:
    lambda: |-
      (ys, xs) => {
        const MINUTES = 60 // <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(Math.round(y_accum/y_count * 10) / 10)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
    show_value:
      right_margin: 15
    line:
      width: 2
      shape: spline
title: Inomhustemperatur
hours_to_show: 72
refresh_interval: 60
config:
  displayModeBar: false