Plotly interactive Graph Card

mateine · January 30, 2023, 1:57pm

Yes you can!
You need something like this:

hours_to_show: $fn () => (Date.now() - new Date().setUTCHours(0,0,0,0))/1000/60/60

jolas · January 30, 2023, 2:15pm

Tried it but error:
…Error: at [entities.0.on_legend_click]: Since [hours_to_show] is a $fn, it has to be defined before [entities.0.on_legend_click]…
(actually a block of similar error entries)

Dynamix72 · January 30, 2023, 2:51pm

With version 3.0 my to graphs aren’t seperated anymore. How can i fixed that?
Can’t find any documentation on that.

climate

type: custom:plotly-graph
entities:
  - entity: sensor.buienradar_temperature
    name: Buiten
    legendgroup: 1
    showlegend: true
    yaxis: y1
  - entity: sensor.buienradar_humidity
    name: Buiten
    legendgroup: 1
    showlegend: false
    yaxis: y2
  - entity: sensor.lumi_lumi_weather_temperature
    name: Werkkamer
    legendgroup: 2
    showlegend: true
    yaxis: y1
  - entity: sensor.lumi_lumi_weather_humidity
    legendgroup: 2
    showlegend: false
    yaxis: y2
  - entity: sensor.lumi_lumi_weather_temperature_2
    name: Garage
    legendgroup: 3
    showlegend: true
    yaxis: y1
  - entity: sensor.lumi_lumi_weather_humidity_2
    legendgroup: 3
    showlegend: false
    yaxis: y2
  - entity: sensor.room_temp_thermostat_opentherm_gateway
    name: Woonkamer
    legendgroup: 4
    showlegend: true
    yaxis: y1
layout:
  dragmode: pan
  margin:
    t: 30
    l: 45
    r: 30
    b: 50
  showlegend: true
  height: 650
  legend:
    bgcolor: rgba(0,0,0,0)
    orientation: h
    itemsizing: constant
    font:
      size: 10
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
  yaxis:
    title:
      text: Temperature
  yaxis2:
    title:
      text: Humidity
  yaxes:
    fixedrange: true
title: Climate
hours_to_show: 24
refresh_interval: 10
color_scheme:
  - '#1f77b4'
  - '#aec7e8'
  - '#ff7f0e'
  - '#ffbb78'
  - '#2ca02c'
  - '#98df8a'
  - '#d62728'

mateine · January 30, 2023, 3:00pm

Add this:

defaults:
  yaxes:
    side: left
    overlaying: 'y'
    visible: true

Sorry for breaking it, I reimplemented a lot of the code and it felt wrong to keep the redundant configurations.

Dynamix72 · January 30, 2023, 3:45pm

No problem, the fix works!
You made a great new version with a lot of new options!

Thanks for your quick reply

mateine · January 30, 2023, 3:55pm

Thanks!
I added a section at the bottom of the readme now with this and other tricks to cover the deprecated options:

EdwardTFN · January 30, 2023, 4:55pm

Have you ever found a solution for this? I’m trying to do the same for future electricity prices.

I believe I’m almost there, however something is not working well with my date & time format.

These are the attributes I’m using:

today: 
- total: 0.3207
  startsAt: '2023-01-30T00:00:00.000+01:00'
  level: VERY_CHEAP
- total: 0.2178
  startsAt: '2023-01-30T01:00:00.000+01:00'
  level: VERY_CHEAP
- total: 0.2065
  startsAt: '2023-01-30T02:00:00.000+01:00'
  level: VERY_CHEAP
- total: 0.1655
  startsAt: '2023-01-30T03:00:00.000+01:00'
  level: VERY_CHEAP
- total: 0.2637
  startsAt: '2023-01-30T04:00:00.000+01:00'
  level: VERY_CHEAP
- total: 0.5122
  startsAt: '2023-01-30T05:00:00.000+01:00'
  level: VERY_CHEAP
- total: 0.5319
  startsAt: '2023-01-30T06:00:00.000+01:00'
  level: VERY_CHEAP
- total: 0.5581
  startsAt: '2023-01-30T07:00:00.000+01:00'
  level: CHEAP
- total: 0.569
  startsAt: '2023-01-30T08:00:00.000+01:00'
  level: CHEAP
- total: 0.5633
  startsAt: '2023-01-30T09:00:00.000+01:00'
  level: CHEAP
- total: 0.5578
  startsAt: '2023-01-30T10:00:00.000+01:00'
  level: CHEAP
- total: 0.5379
  startsAt: '2023-01-30T11:00:00.000+01:00'
  level: CHEAP
- total: 0.5439
  startsAt: '2023-01-30T12:00:00.000+01:00'
  level: CHEAP
- total: 0.5327
  startsAt: '2023-01-30T13:00:00.000+01:00'
  level: CHEAP
- total: 0.527
  startsAt: '2023-01-30T14:00:00.000+01:00'
  level: CHEAP
- total: 0.5291
  startsAt: '2023-01-30T15:00:00.000+01:00'
  level: CHEAP
- total: 0.5342
  startsAt: '2023-01-30T16:00:00.000+01:00'
  level: CHEAP
- total: 0.5501
  startsAt: '2023-01-30T17:00:00.000+01:00'
  level: NORMAL
- total: 0.5526
  startsAt: '2023-01-30T18:00:00.000+01:00'
  level: NORMAL
- total: 0.5234
  startsAt: '2023-01-30T19:00:00.000+01:00'
  level: NORMAL
- total: 0.5133
  startsAt: '2023-01-30T20:00:00.000+01:00'
  level: NORMAL
- total: 0.5017
  startsAt: '2023-01-30T21:00:00.000+01:00'
  level: NORMAL
- total: 0.435
  startsAt: '2023-01-30T22:00:00.000+01:00'
  level: CHEAP
- total: 0.2773
  startsAt: '2023-01-30T23:00:00.000+01:00'
  level: VERY_CHEAP

tomorrow: 
- total: 0.4939
  startsAt: '2023-01-31T00:00:00.000+01:00'
  level: NORMAL
- total: 0.4917
  startsAt: '2023-01-31T01:00:00.000+01:00'
  level: NORMAL
- total: 0.497
  startsAt: '2023-01-31T02:00:00.000+01:00'
  level: NORMAL
- total: 0.5072
  startsAt: '2023-01-31T03:00:00.000+01:00'
  level: NORMAL
- total: 0.5485
  startsAt: '2023-01-31T04:00:00.000+01:00'
  level: NORMAL
- total: 0.5643
  startsAt: '2023-01-31T05:00:00.000+01:00'
  level: NORMAL
- total: 0.7005
  startsAt: '2023-01-31T06:00:00.000+01:00'
  level: EXPENSIVE
- total: 1.3572
  startsAt: '2023-01-31T07:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.7557
  startsAt: '2023-01-31T08:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.7209
  startsAt: '2023-01-31T09:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.669
  startsAt: '2023-01-31T10:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.5598
  startsAt: '2023-01-31T11:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.5121
  startsAt: '2023-01-31T12:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.4956
  startsAt: '2023-01-31T13:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.4886
  startsAt: '2023-01-31T14:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.4903
  startsAt: '2023-01-31T15:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.4949
  startsAt: '2023-01-31T16:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.5442
  startsAt: '2023-01-31T17:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.5316
  startsAt: '2023-01-31T18:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.4783
  startsAt: '2023-01-31T19:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.4044
  startsAt: '2023-01-31T20:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.321
  startsAt: '2023-01-31T21:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.2908
  startsAt: '2023-01-31T22:00:00.000+01:00'
  level: VERY_EXPENSIVE
- total: 1.1058
  startsAt: '2023-01-31T23:00:00.000+01:00'
  level: VERY_EXPENSIVE

And this is how I’m using it into the plot:

entities:
  - entity: sensor.electricity_price
    line:
      width: 3
      color: orange
  - entity: sensor.electricity_price
    name: Future price
    line:
      width: 3
      dash: dot
      color: green
    filters:
      - fn: |
          ({xs,ys,states}) => {
            var today = states.map(state => state?.attributes?.today);
            var tomorrow = states.map(state => state?.attributes?.tomorrow);
            var all_prices = today.concat(tomorrow);
            return {xs: Array.from(all_prices.keys("startsAt")), ys: Array.from(all_prices.keys("total"))};
          }
  - entity: null
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    filters:
      - fn: |
          ({xs,ys}) => {
            return {xs:[Date.now(),Date.now()], ys:[0,1]}
          }

And this is what I got:

*The future prices line is starting around the year 1960.

jolas · January 30, 2023, 5:22pm

Sorry, found my mistake…

mateine · January 30, 2023, 6:00pm

The solution to the weather forecast question: Weather forecast plot (`meta` and nested attributes) · Discussion #213 · dbuezas/lovelace-plotly-graph-card · GitHub

EdwardTFN · January 30, 2023, 6:26pm

It worked fine, thanks!!!

Tee · January 31, 2023, 9:38am

Hi Edward, can you share the yaml for this

mateine · January 31, 2023, 11:06am

With a post in Show&Tell, not here please!

EdwardTFN · January 31, 2023, 6:20pm

There is (including versions for Tibber and NordPool):

jazzmonger · January 31, 2023, 7:16pm

I just hit the upgrade button and get this on all my MACOS browsers. Safari and Brave
my ipad IOS is fine. Home assistant on iOS is also fine.

mateine · January 31, 2023, 7:36pm

the other browsers are likely showing the cached version. The errors you see are the braking changes stated in the release version notes. But don’t panik, the error messages tell you how to fix them!

mateine · January 31, 2023, 9:17pm

I just noticed the repo has pretty much one closed issue per star. If this wasn’t open source, the cost per star would be absolutely outrageous!

dutchguy · January 31, 2023, 10:16pm

A quick question I could not find (maybe I cannot search well): how can I set the color of a bar? For a line color (and fill color) I know how to do it, but I cannot find the way to set the (fill) color of a bar?

EdwardTFN · January 31, 2023, 10:31pm

I’m not sure if this is the best way, but the marker worked fine for me to set the color:

entities:
  - entity: sensor.total_energy_utility_meter
    name: Energy consumption
    type: bar
    marker:
      color: rgba(165,165,0,0.6)

dutchguy · January 31, 2023, 10:48pm

I am also not sure if it is the best way, but the most important thing is that it works

DarthSebulba04 · February 1, 2023, 1:24am

Hey, trying to figure out the new $fn for using theme colors and I’m missing something.

entities:
  - entity: sensor.motion_sensor_1_temperature
    connectgaps: true
    line:
      width: 3
      color: $fn ({css_vars}) => css_vars.primary_color

It isn’t throwing any visible errors (like when using the wrong variable), but it also isn’t setting the color of the line. I’ve cleared the cache and hard refresh, so I’m pretty sure the updated code is active.

primary-color in the theme is: primary-color: "#aa3151", but the line is the default blue.

Thoughts on what I’m missing?

Thanks!