Plotly interactive Graph Card

danhiking · July 17, 2024, 4:01pm

Ah, got it. Looking at the Plotly API, I see that Scatter traces in JavaScript does not have textangle, but Layout.annotations in JavaScript does. Putting the text into the annotations rather than the data works.

Is there a programmatic/templated way to build up the annotations? I can trivially create the objects in javascript, but not sure how to pass it to layout.annotations:

layout:
  annotations:
    - how to pass js list here?

mateine · July 17, 2024, 4:46pm

Sounds like a plan!
You need “vars” and $ex or $fn. Search for those in the readme and you’ll be good to go

flequi19 · July 21, 2024, 2:43am

There is a possibility that the graph shows me what happens with the sensors only at a certain time (from 11 am to 5 pm) and from Monday to Friday

Sin título-1

type: custom:plotly-graph
entities:
  - entity: sensor.dolar_blue
    name: Dolar Blue
  - entity: sensor.dolar_oficial_2
    name: Dolar Oficial
hours_to_show: 24
refresh_interval: 10

Thanks in Advance

kutt · July 24, 2024, 12:11pm

Hello,
I got already a few times help here - so thanks again for that

Sadly, I keep running in an issue, I can’t really find a solution myself. On my setup a Tasmota IR head reads some data from my official powermeter. It works well, until there is a e.g. power loss and the official powermeter falls back into it’s standard mode.

That’s the moment I get faulty values into my utility meters.

At first, I thougt there is a simple fix by going to development tools, statistics, open the utility meter (Verbrauchszähler in german) and look for abnormal values.

As you can see: There are none anmore.

However, the custom:ploty-graph still keeps it showing

It’s really annoying if this happens in a ploty-graph, which shows the values of teh past 30 days

Do you know how I can fix that?

mateine · July 24, 2024, 1:27pm

Is the plotly graph also using statistics? Post the yaml

aaroneisele55 · July 25, 2024, 6:14am

Hello,
I currently have the following YAML:

type: custom:plotly-graph
entities:
  - entity: number.ld2410_esp32_02_bettsensor_grenzwert
    fill: tozeroy
    line:
      color: red
      dash: dot
      width: 10
  - entity: sensor.ld2410_esp32_02_bettsensor_rohwert
hours_to_show: 12
refresh_interval: 10
title: Bettsensor
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day

I now would like the line for “sensor.ld2410_esp32_02_bettsensor_rohwert” to be green if its state is below the state of “number.ld2410_esp32_02_bettsensor_grenzwert”, otherwise it should be green.

How could I achieve this?
Best regards
Aaron

mateine · July 25, 2024, 6:47am

Hi, Plotly doesn’t support multiple colors on single traces, but you can:

Align all traces with resample (so the same index refers to the same moment in time for all traces)
Store the threshold entity with store_var: thresholds
make two traces out of the other trace
Use the map_y: y>vars.thresholds.ys[I] ? y : undefined filter on the green one, and the other way around on the red one
Use legend groups to make both colours to appear as a single legend

Good luck!

kutt · July 25, 2024, 7:01am

I think you ment me

Looks like I mixed something up! I ment the “custom:mini-graph-card” not “custom:ploty-graph” (Am I in the wrong forum now?)

type: custom:mini-graph-card
entities:
  - entity: sensor.shellyhausverbrauchprotag
    color: blue
name: Tagesverbrauch Zählerkasten
hours_to_show: 720
hour24: true
aggregate_func: max
group_by: date
show:
  graph: bar
  state: true
lower_bound: 0
layout: null
height: 400

While typing I noticed something: If I change

aggregate_func: max

to:

aggregate_func: last

the graph looks like this:

hmm … even that might be right now: Where does it get the 871.xx kWh if I use “max”

aaroneisele55 · July 25, 2024, 7:41am

How would the YAML for this look like?
I have nearly no experience with thus card, and I asked chatGPT before which gave me a non-working solution…

mateine · July 25, 2024, 9:02am

Yep, wrong place to ask

gianlucaf81 · July 31, 2024, 6:32am

Thanks for this wonderful project.
I wanted to ask 2 things.

Is it possible to do it so that, like with native graphs, clicking on the graph takes you to the history section of home assistant?
Is it possible to view the long-term statistics?

thanks

mateine · July 31, 2024, 7:07am

Thanks!
Opening the entity with a click on the legend is possible but complicated. Long term statistics are available, check out the readme

holeymoley · August 1, 2024, 10:24am

Hi Guys,
Could I get a little help with an in-graph calculation please. Trying to plot the value of “entity A – entity b” to display a net consumption value. I know this can be done with a regular HA template sensor, but that would not work for my historical data, so I’m trying to implement it directly within plotly.

  - entity: sensor.givtcp_import_energy_today_kwh
    statistic: state
    show_value: true
    filters:
      - map_y: >-
          y -
          parseFloat(hass.states["sensor.givtcp_export_energy_today_kwh"].state)

So far I have the above, but but is only working correctly for ‘today’ in my plot. In the graph for, say yesterday, it is subtracting the export value of today from the import value of yesterday. presumably because my current formula is always looking at the state of ‘today’ and is not dynamic… Is there a better way to do this?

My goal is to show the value of ‘givtcp_import_energy_today_kwh’ minus ‘givtcp_export_energy_today_kwh’ dynamically, for any day present in the graph.
Both are totalisers within HA, that reset to 0 (zero) each day at midnight.

mateine · August 1, 2024, 1:47pm

try with:

  - entity: sensor.givtcp_export_energy_today_kwh
    filters:
      - resample: 1h
      - store_var: export_energy
  - entity: sensor.givtcp_import_energy_today_kwh
    statistic: state
    show_value: true
    filters:
      - resample: 1h
      - map_y: >-
          +y - +vars.export_energy.ys[i]

holeymoley · August 1, 2024, 3:02pm

Wow, thank you! that was the clue I needed.
A thing of beauty!

mateine · August 1, 2024, 4:00pm

Cool!
I think this plot somebody else created may be of interest to you: Electricity and solar panels into one single chart · dbuezas/lovelace-plotly-graph-card · Discussion #432 · GitHub
He stacks grid, battery and back to grid numbers and gets a great visualisation of how things change during the day

RbAc · August 4, 2024, 7:23am

Hi,
I’m desperate and trying to create a stacked graph with the Plotly Card. I’ve searched all over the place and found examples where it worked, but unfortunately I do not get it to work.

type: custom:plotly-graph
entities:
  - entity: sensor.eu08l_hp1_cop
    yaxis: y1
    name: COP
    mode: lines
    show_value: true
    line:
      shape: line
      color: green
      width: 1
  - entity: sensor.EU08L_Hp1_Flow_Line_Temperature
    name: Temperatur Vorlauf
    yaxis: y3
    mode: lines
    show_value: true
    line:
      shape: line
      color: red
      width: 1
  - entity: sensor.eu08l_Hp1_return_line_temperature
    name: Temperatur Rücklauf
    yaxis: y3
    mode: lines
    show_value: true
    line:
      shape: line
      color: blue
      width: 1
hours_to_show: 168
refresh_interval: 10
title: Heizung
layout:
  height: 500
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
  xaxis:
    rangeselector:
      'y': 1.15
      buttons:
        - count: 1
          step: minute
        - count: 15
          step: minute
        - count: 1
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day

It looks like this. Can anyone tell me what I’m doing wrong? How do I get a second graph in the plot?
I really appreaciate any help.
/RB

mateine · August 4, 2024, 9:34am

Hi @RbAc, don’t be desperate

the second and third traces should have yaxis: y2 instead of y3.

RbAc · August 4, 2024, 10:34am

@mateine,
many thanks. I changed to y2 - but the graph does not change.

To clarify - I want to have another graph (two graphs above each other - stacked) not a second axis on the right side.

type: custom:plotly-graph
entities:
  - entity: sensor.eu08l_hp1_cop
    yaxis: y1
    name: COP
    mode: lines
    show_value: true
    line:
      shape: line
      color: green
      width: 1
  - entity: sensor.EU08L_Hp1_Flow_Line_Temperature
    name: Temperatur Vorlauf
    yaxis: y2
    mode: lines
    show_value: true
    line:
      shape: line
      color: red
      width: 1
  - entity: sensor.eu08l_Hp1_return_line_temperature
    name: Temperatur Rücklauf
    yaxis: y2
    mode: lines
    show_value: true
    line:
      shape: line
      color: blue
      width: 1
hours_to_show: 168
refresh_interval: 10
title: Heizung
layout:
  height: 500
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
  xaxis:
    rangeselector:
      'y': 1.15
      buttons:
        - count: 1
          step: minute
        - count: 15
          step: minute

mateine · August 4, 2024, 1:04pm

Oh, you are missinig the “overlying” key. Start with this one

type: custom:plotly-graph
entities:
  - entity: sensor.eu08l_hp1_cop
    yaxis: y
  - entity: sensor.EU08L_Hp1_Flow_Line_Temperature
    yaxis: y2
  
layout:
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
  yaxis:
    title:
      text: Top Row.
  yaxis2:
    title:
      text: Second row.
  
defaults:
  yaxes:
    side: left
    overlaying: 'y'