Plotly interactive Graph Card

[mateine]

@sveni_lee

  - entity: ""
    name: SCOP
    mode: markers
    fn: |
      $fn ({ vars }) => {
        const y = [];
        const input = vars.energy_input.ys;
        const output = vars.energy_output.ys;
        let inlen = input.length;
        for (let i = 0; i < inlen; i++) {
          const scop = output[i] / input[i];
          y.push(Math.round(parseFloat(scop) * 100) / 100);
        }
        
        const x = vars.energy_input.xs        
        vars.x = x;
        vars.y = y;
        console.log("y", y);
        console.log("x", x);
      }

It’s because you are expecting vars to be interpreted as the x and y parameters of the entity.

Try with this instead:

  - entity: ""
    name: SCOP
    mode: markers
    y: |
      $fn ({ vars }) => {
        const y = [];
        const input = vars.energy_input.ys;
        const output = vars.energy_output.ys;
        let inlen = input.length;
        for (let i = 0; i < inlen; i++) {
          const scop = output[i] / input[i];
          y.push(Math.round(parseFloat(scop) * 100) / 100);
        }
        return y
      }
    x: $ex vars.energy_input.xs

You could even make y a bit more compact too:

    y: |
      $ex vars.energy_output.ys.map((o, i) =>
        Math.round(o / vars.energy_input.ys[i] * 100) / 100
      )

[mateine]

You could also do it with filters instead

  - entity: ""
    name: SCOP
    mode: markers
    filters:
      - load_var: energy_output
      - map_y: "Math.round(y/vars.energy_put.ys[i] * 100) / 100"

[sveni_lee]

works perfect… thank you!

[pavel7]

Hi, I have a total utility meter like:

I want to show daily consumption:

In plotly I have tried:

entities:
  - entity: sensor.net_load_power
    type: bar
    statistic: state
    period: day

But the output is cumulative, not a daily change:

I guess I need some clever filter :-), simple filters → delta (with combination period: day above) didn’t help.

filters:
  - delta

Please does anyone know how to set this up?

[mateine]

That’s odd that it accumulates. The delta filter should actually work, what do you see when u use it?

[pavel7]

Thanks mateine, you are right, delta seems to work fine I deleted all unnecessary stuff and I see:

type: custom:plotly-graph
hours_to_show: 7d
entities:
  - entity: sensor.pst_yearly_net_load_power
    type: bar
    statistic: state
    period: day
    marker:
      color: orange
    filters:
      - delta
layout:
  xaxis:
    nticks: 8

But I still don’t understand, why is 9/9 empty (expected cca 11 kWh). The utility meter is running since yesterday, so delta should be 11=11-0.

Don’t you know how to set the column more “thick”? I tried experimenting with layout: → bargap: 0.25 but it didn’t help.

Edit: Sorry, I found answer for bar width, can be simply set using “width”. I will try to wait for more data

Edit 2: Everything is now working as expected. The first day is missing - perhaps because the sensor was started during the day.

Thank you for superb add-on!

HA Statistic graph:

Plotly graph card:

[wonderiuy]

Is there any different solution for my problem here?

Plotly interactive Graph Card

Hello, thank you for this really powerful card. I’m enjoying it more than Apex charts and History explorer that are both slower and missing something. Great work. I’m trying to sort a little problem with my energy graph, where PV power (solar production) is missing at night, but in the graph a huge rectangle is plotted from the left to the current value, unless some datas appear, like this: [immagine] I’ve tried without success with connectgaps: false Instead with filters: - filter: …

Thank you

[mateine]

To have gaps in the plot you need to add a data point and set it to null or undefined, which happens automatically when entities go unavailable. If they don’t, the plot leaves no gaps and joins the lines.

You could use the fn filter and inject the null datapoint in between existing datapoints that are too far apart in the time axis.

You can probably get chat gpt to make it if you give it the docs

Good luck with it!

[wonderiuy]

Thank you, I will share my progress here

[andrea.magnani01 (Andrea)]

Hi guys,

I’m trying to show the total of each bar in a stacked graph.

I tried to copy this (super clever) solution:

Total of each bar in a stacked graph? · dbuezas/lovelace-plotly-graph-card ·...

Unfortunately, as you can see from the image below, in my case it seems that it doesn’t work (I can only display the exact value from map_y, not the sum of the other bars), and I can’t figure out why… The only difference I can see between my chart and the ones in the post above is that I’m using statistics: state (because I’m plotting electricity total_increasing sensors in my case).

If you could be so kind as to give me a suggestion, I’d be really grateful!

Anyway, thanks a lot in any case!

Have a great day!

My graph and my code:

type: custom:plotly-graph
hours_to_show: 7d
autorange_after_scroll: true
layout:
  barcornerradius: 2
  barmode: stack
  height: 500
  margin:
    l: 30
    r: 10
  paper_bgcolor: transparent
  plot_bgcolor: transparent
  xaxis:
    rangeselector:
      "y": 1.04
      x: 0.03
      bgcolor: rgba(130,130,130,0.4)
      buttons:
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 6
          step: month
        - count: 1
          step: year
  yaxis:
    fixedrange: true
    rangemode: tozero
  legend:
    orientation: h
    x: -0.02
    "y": -0.1
    yanchor: top
    xanchor: left
    indentation: -10
  hovermode: x unified
defaults:
  entity:
    unit_of_measurement: ""
    period:
      0s: 5minute
      24h: hour
      2d: day
      2M: month
    texttemplate: "%{y:.2f}"
    textposition: inside
    hovertemplate: "%{fullData.name}: %{y:.2f} kwh<extra></extra>"
config:
  scrollZoom: false
  modeBarButtonsToRemove:
    - select2d
    - lasso2d
    - autoScale2d
    - resetScale2d
entities:
  - entity: sensor.teatrino_1_blu_altre_fonti_energia_consumata_kwh
    name: altre fonti
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: a
    marker:
      color: rgba(96,96,96,0.5)
      line:
        width: 0.2
        color: rgba(96,96,96,1)
  - entity: >-
      sensor.shelly_1pm_teatrino_1_blu_bagno_scaldasalviette_energia_consumata_kwh
    name: scaldasalviette
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: b
    marker:
      color: rgba(255,138,183,0.5)
      line:
        width: 0.4
        color: rgba(255,138,183,1)
  - entity: sensor.teatrino_1_blu_luci_energia_consumata_kwh
    name: luci
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: c
    marker:
      color: rgba(244,189,74,0.5)
      line:
        width: 0.2
        color: rgba(244,189,74,1)
  - entity: >-
      sensor.shelly_1pm_teatrino_1_blu_lavanderia_lavatrice_energia_consumata_kwh
    name: lavatrice
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: d
    marker:
      color: rgba(1,171,99,0.5)
      line:
        width: 0.4
        color: rgba(1,171,99,1)
  - entity: >-
      sensor.shelly_em_gen_3_teatrino_1_blu_piastra_induzione_energia_consumata_kwh
    name: induzione
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: e
    marker:
      color: rgba(156,107,78,0.5)
      line:
        width: 0.2
        color: rgba(156,107,78,1)
  - entity: sensor.shelly_em_gen_3_teatrino_1_blu_forno_energia_consumata_kwh
    name: forno
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: f
    marker:
      color: rgba(164,99,242,0.5)
      line:
        width: 0.2
        color: rgba(164,99,242,1)
  - entity: sensor.shelly_pro_em_teatrino_1_blu_fan_coil_energia_consumata_kwh
    name: fan coil
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: g
    marker:
      color: rgba(255,114,92,0.5)
      line:
        width: 0.4
        color: rgba(255,114,92,1)
  - entity: sensor.shelly_1pm_teatrino_1_blu_lavanderia_boiler_energia_consumata_kwh
    name: boiler
    type: bar
    statistic: state
    filters:
      - delta
      - filter: i>0
      - force_numeric
      - store_var: h
    marker:
      color: rgba(66,105,208,0.5)
      line:
        width: 0.4
        color: rgba(66,105,208,1)
  - entity: ""
    type: bar
    name: totale
    text: $ex vars.a.ys.map((y,i) =>(y+vars.b.ys[i]+vars.c.ys[i]+vars.d.ys[i]+vars.e.ys[i]+vars.f.ys[i]+vars.g.ys[i]+vars.h.ys[i]).toFixed(0))
    showlegend: false
    marker:
      color: transparent
    filters:
      - load_var: a
      - map_y: 1

I’ve also tried the following variant (without success):

  - entity: ""
    type: bar
    name: totale
    text: $ex vars.a.ys.map((y,i) =>(y+vars.b.ys[i]+vars.c.ys[i]+vars.d.ys[i]+vars.e.ys[i]+vars.f.ys[i]+vars.g.ys[i]+vars.h.ys[i]).toFixed(0))
    showlegend: false
    marker:
      color: transparent
    filters:
      - load_var: a
      - load_var: b
      - load_var: c
      - load_var: d
      - load_var: e
      - load_var: f
      - load_var: g
      - load_var: h
      - map_y: 1

I’ve also tried the following two chatgpt variants (without success):

  - entity: ""
    type: bar
    name: totale
    text: >-
      $ex vars.a.ys.map((_,i)=>
        (
          (vars.a?.ys?.[i] ?? 0) +
          (vars.b?.ys?.[i] ?? 0) +
          (vars.c?.ys?.[i] ?? 0) +
          (vars.d?.ys?.[i] ?? 0) +
          (vars.e?.ys?.[i] ?? 0) +
          (vars.f?.ys?.[i] ?? 0) +
          (vars.g?.ys?.[i] ?? 0) +
          (vars.h?.ys?.[i] ?? 0)
        ).toFixed(0)
      )
    showlegend: false
    marker:
      color: transparent
    filters:
      - load_var: a
      - map_y: 1

or

  - entity: ""
    type: bar
    name: totale
    text: >-
      $ex vars.a.ys.map((y,i)=>
        ( y +
          (vars.b?.ys?.[i] ?? 0) +
          (vars.c?.ys?.[i] ?? 0) +
          (vars.d?.ys?.[i] ?? 0) +
          (vars.e?.ys?.[i] ?? 0) +
          (vars.f?.ys?.[i] ?? 0) +
          (vars.g?.ys?.[i] ?? 0) +
          (vars.h?.ys?.[i] ?? 0)
        ).toFixed(0)
      )
    showlegend: false
    marker:
      color: transparent
    filters:
      - load_var: a
      - map_y: 1

[Blase19]

Hello,

Is there any easy way to make sensor data filtering dependent on the active time range? I am aware of the possibility to set period: auto, but I want my raw sensor data in 5s resolution when I zoom in. I was trying to implement it using filters: - resample. Can we pass a string to this depending on the active time range? Thank you!

[mateine]

Visible time range is what you need then: Is there a way to retrieve the visible range of the current Y axis? · dbuezas/lovelace-plotly-graph-card · Discussion #504 · GitHub

[Blase19]

Thanks David for your quick reply. I saw this solution earlier, thank you! Now I want to pass a string to filters: - resample based on this visible range. I don’t really know javascript and I am relatively new to HA. Do you have any suggestions how I can do it?

[Haldi]

Greetings,

I am unhappy with the default display of a binary sensor graph for my door.

A door, by nature, is mostly closed and rarely open. So any graph would be mostly off and only opens for a fraction of the time on the chart. Therefore not being visually aesthetic.
Do any of the designers or bight minds here have a grand idea on how to solve that issue?

Simply making the lines thicker is one easy way, but that does not really look better.
Also it would be cool to display the Timestamp beneath when it opened, and also the duration for how long.

So like a chart with time on X axis and on Y axis display not a value but an icon/textbox with Time and Duration? Would that be possible?

[Hamudulu]

Im trying to get a heating curve in the plotly card. Now first a basic question, but I’m not getting it.
How to get rid off the red crossed things on the picture? Thanks very much in advance.

type: custom:plotly-graph
layout:
  title: Heizkurve
  xaxis:
    type: number
    showlegend: false
    title: Außentemperatur
    range:
      - -30
      - 20
    autorange: reversed
    showgrid: true
    ticksuffix: " °C"
    dtick: 5
    tickformat: ",.0f"
  yaxis:
    fixedrange: true
    range:
      - 10
      - 60
    title: Vorlauftemperatur
    showgrid: true
    showticklabels: false
    ticks: ""
entities:
  - entity: ""
    showlegende: false
    x:
      - -30
      - -20
      - -10
      - 0
      - 10
      - 20
    "y":
      - 54
      - 47
      - 41
      - 35
      - 28
      - 19
    mode: markers+lines
    line:
      shape: spline
      color: "#1f77b4"
      width: 3
    marker:
      size: 8
      color: "#ff7f0e"
      symbol: circle
    hoverinfo: none
  - entity: ""
    showlegend: false
    x:
      - -30
      - -20
      - -10
      - 0
      - 10
      - 20
    "y":
      - 54
      - 47
      - 41
      - 35
      - 28
      - 19
    mode: text
    text:
      - 54°C
      - 47°C
      - 41°C
      - 35°C
      - 28°C
      - 19°C
    textposition: top center
    textfont:
      color: black
      size: 18
      family: Arial
    hoverinfo: none
  - entity: sensor.outdoor_temperature
    name: Aktuelle AT
    x:
      - sensor.outdoor_temperature
      - sensor.outdoor_temperature
    "y":
      - 10
      - 60
    mode: lines
    line:
      color: red
      width: 3
      dash: dash
    hoverinfo: none
    showlegend: false
    defaults: null
raw_plotly_config: true

[Hamudulu]

Sorry, can’t find how to post the code correct…

[Chykan (Hunter)]

Put ``` above and below code. Top left button on keyboard…

[mateine]

layout:
  showlegend: false
config:
  displayModBar: false

[Hamudulu]

Ok, thanks. Modbar is gone but I cant figure out how to unshow this legend line.

type: custom:plotly-graph
layout:
  title: Heizkurve
  xaxis:
    type: number
    title: Außentemperatur
    range:
      - -30
      - 20
    autorange: reversed
    showgrid: true
    ticksuffix: " °C"
    dtick: 5
    tickformat: ",.0f"
  yaxis:
    fixedrange: true
    range:
      - 10
      - 60
    title: Vorlauftemperatur
    showgrid: true
    showticklabels: false
    ticks: ""
entities:
  - entity: ""
    x:
      - -30
      - -20
      - -10
      - 0
      - 10
      - 20
    "y":
      - 54
      - 47
      - 41
      - 35
      - 28
      - 19
    mode: markers+lines
    showlegende: false
    line:
      shape: spline
      color: orange
      width: 3
    marker:
      size: 8
      color: red
      symbol: circle
    hoverinfo: none
  - entity: ""
    showlegend: false
    x:
      - -30
      - -20
      - -10
      - 0
      - 10
      - 20
    "y":
      - 54
      - 47
      - 41
      - 35
      - 28
      - 19
    mode: text
    text:
      - 54°C
      - 47°C
      - 41°C
      - 35°C
      - 28°C
      - 19°C
    textposition: top center
    textfont:
      color: black
      size: 18
      family: Arial
    hoverinfo: none
  - entity: sensor.outdoor_temperature
    name: Aktuelle AT
    x:
      - sensor.outdoor_temperature
      - sensor.outdoor_temperature
    "y":
      - 10
      - 60
    mode: lines
    line:
      color: red
      width: 3
      dash: dash
    hoverinfo: none
    showlegend: false
    defaults: null
config:
  displayModBar: false
raw_plotly_config: true

[mateine]

showlegend: false goes in layout, not entity.
Try out the syntax validator linked in the repo

Plotly graph card yaml editor