Plotly interactive Graph Card

So @mateine I’ve tried the stackgroup and did that:

type: custom:plotly-graph
entities:
  - entity: sensor.office_desk_power_power
    name: Desk power
    stackgroup: one
  - entity: sensor.office_main_rig_power_power
    name: Main-rig power
    stackgroup: one
hours_to_show: 24
refresh_interval: 5

And result is that graphs cover each other:

Below is something to show what the actual values are (those are pretty close to each other 140 - 150 Watts

Oh, right, the data points are not aligned in the x axis
Tray adding statistic: mean to each entity.
Here’s the older way of doing it: Stacked bar charts · Discussion #35 · dbuezas/lovelace-plotly-graph-card · GitHub

did help somehow - however the mean is calculated by default over a period of 1 hour.
But I think I get the gist of what you’re saying - the problem is with reported data being reported at completely arbitrary time, however the plotly needs points to perfectly align on the axis to reconcile stacking. That makes sense. I will try to figure out how to get the statistics down to a second. (yep I know I’m nuts :D)

Haha, very good!
You can set period: “5minutes” (or even “auto”), check the readme!
To get a sorter period you’ll have to use a lambda lile in the discussion link I sent you

You can find a possible solution / workaround for question #95here.

1 Like

Hi! I have a chart where i have my own electricity price that i pay, and one that is a spotprice to compare with. I want to add a line (crossover line) so i can see when the price have been above that line. Can someone help me?

type: custom:plotly-graph
title: Jämförelse med spot och fast pris
entities:
  - entity: sensor.nordpool_kwh_fi_eur_3_10_024
    name: SpotPris
    unit_of_measurement: EUR/kWh
    fill: tozeroy
    fillcolor: rgba(4, 10, 510, 2.2)
    line:
      color: white
  - entity: sensor.fast_strom_pris
    name: Fast Pris 0.2990
    unit_of_measurement: EUR/kWh
    fill: tozeroy
    fillcolor: rgba(215, 80, 10, 0.1)
    line:
      color: red
  - entity: sensor.fortum_fast_strom_pris
    name: Fortum 0.3516
    unit_of_measurement: EUR/kWh
    fill: tozeroy
    fillcolor: rgba(215, 80, 10, 0.1)
    line:
      color: green
layout:
  dragmode: pan
  margin:
    t: 30
    l: 45
    r: 40
    b: 50
  xaxis:
    tickmode: linear
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: day
        - count: 3
          step: day
        - count: 7
          step: day
        - count: 14
          step: day
        - count: 30
          step: day
        - count: 90
          step: day
hours_to_show: 336
defaults:
  entity:
    lambda: |-
      (ys, xs)=>({
        y:ys.filter(y=>!Number.isNaN(parseFloat(y))),
        x:xs.filter((x,i)=>i%1==0 && !Number.isNaN(parseFloat(ys[i]))),
      })

Add a helper value and plot it too?
Otherwise you can add a shape, but it will be at a fixed y coordinate (see here: How to add background colors (gradient or areas) or colorize specific grid lines? · Discussion #45 · dbuezas/lovelace-plotly-graph-card · GitHub)

hi, as this is not an issue but a request, I’ll put it here, so more people can see it/learn from your answer.
I want to plot absolute humidity based on my Relative humidity and temp LTS values.

I’ve found this formula (as well as the usual psychrometric diagrams, unusable for computer use):

Absolute Humidity (grams/m3) = (6.112 × e^[(17.67 × T)/(T+243.5)] × rh × 2.1674)/(273.15+T).
(from How to convert relative humidity to absolute humidity | carnotcycle)

I know it would be most efficient to have the Abs Hum to be calculated using a template sensor in HA at data point storage time and then the LTS of them being used for plotting.
But if I do that, then I have to wait a long time till I build up enough history to be useful.

If it’s part of a lambda as well (initially), then I could use the stored LTS values to calculate it on-the-fly, at run-time, also for my historic values. It might be (too) slow, but I think if I keep the number of data points per graph low, it might be feasible. In the meantime, I’ll build up my history using the template sensor(s).

Unfortunately, I don’t know enough about the lambda syntax to convert the formula into working code. For lambdas, I used normally the good old copy-paste-adjust adagio… Poor me. But it works!

Thanks.

PS, this is the current result. The colours for Temp and humidity are not matching 100%, but that will be a small fix. The Abs. Humidity will be a 3rd graph, below the current 2:


Yes, it’s rather cold in the house, but I’m away for 2 weeks, since 9th (evening), so very little natural and no artificial heating, in a 1970’s house…

This is cool, I’ll give it a try

1 Like

@netweaver can you drop the question in the Discussions section of the repo?
It’s easier to find it later there. So I’ll answer it there.

Sneak peek:

done. looking good!

Thanks!
For any future user, here’s the discussion on absolute humidity plotting: How to write a lambda to calculate the Abs. Humidity from the LTS temp and Rel. humidity values? · Discussion #140 · dbuezas/lovelace-plotly-graph-card · GitHub

1 Like

Is it possible to show exactly the current day? So not the last 24 hours, but the current day from 0:00 - 23:59?

Not at the moment, but it will in a month or so

1 Like

Although if you need it now, you could achieve that by filtering with a lambda. The issue is that zooming out and scrolling will react a bit weird.

I would use the graph for one day only, so zooming and scrolling do not need to be enabled anyhow.

This is cool!

I’ve just discovered and trying to learn it more.

Is there a way to adjust the graph width so that the more data is there the more readable it can be?


image

Click the pencil on the side of the tab
image

Then change the view type to sidebar or panel

Ahhh, THANKS!

This card is great!

But i have one problem, on my mobile devices i can’t select a value if i tap (and get the tooltip with value/timestamp)
On the pc everything works as expected.