Plotly interactive Graph Card

[stomko]

Ok changed it tk this, but it still does not show. + When I scroll through the graph, bars chage their thickness.

type: custom:plotly-graph
entities:
  - entity: sensor.daily_self_consumed_energy
    name: |
      $fn ({ ys,meta }) =>
        "Self" + "(" +ys[ys.length ]+"kWh)"
    type: bar
    period: day
    texttemplate: '%{y}'
    filter: i>0
    marker:
      color: green
  - entity: sensor.daily_energy
    name: |
      $fn ({ ys,meta }) =>
        "From Grid" + "(" +ys[ys.length - 1]+"kWh)"
    type: bar
    statistic: state
    period: day
    texttemplate: '%{y}'
    filter: i>0
    marker:
      color: red
hours_to_show: 5d
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 7
          step: day
        - count: 14
          step: day
        - count: 30
          step: day
  yaxis:
    fixedrange: true

[mateine]

filters:
  - filter: i>0

See this section GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!

[agak79]

There is a gap in the 19th and also the value the 20th is different in the HA-card. The 18th doesn’t appear in plotly

Changing to 1 day graphs and period to hour, it can be see the bars are similar but the valors are completely illogical in plotly whereas in HA native card the have a logical value each hour

Changing to 1 month does’t change the native statistics card, as there is only dates since the 17th, but the values seem again to be logical, whereas in plotly the bars seems to be proportionally correct but the values aren’t.

[stomko]

Thank you. So I changed my template sensor to:

state_class: total_increasing
unit_of_measurement: kWh
device_class: energy
friendly_name: Daily Self Consumed Energy

But it still shows “undefined” for the value in the name, and there is no graph displayed. I also tried to remove “statistic” as you recommended, but that did not change anything. Is there anything else that I am not getting?

[mateine]

it will take some time for the sensor statistics to be collected and stored. Give it a couple of days

[Haldi]

Hello,
i would like to open a subview. Thought i’d do that by double clicking.

on_dblclick: |-
  $fn ({ hass }) => () => {
    hass.callService('light', 'turn_on', {
      entity_id: 'light.portique_lumiere'
    })
  }

But the doubelclick does not support navigation actions or does it? the default tap_action is not supported either right?

  tap_action:
    action: navigate
    navigation_path: /lovelace/living_room

i found this thread where someone found a workaround.

How to call a tap_action navigate action from a script?

Ahh, I finally figured it out. What I wanted to do was call a script and change the dashboard page with a single button push. action: custom is what I’m calling it, but anything that’s not a real action ( more-info , toggle , call-service , none , navigate , url , assist) will work. Figured this out with help from this issue comment Using the amazing Button Card you can do this: Call a script or 2 and then navigate to a new page (or scroll the window position back up to the top (commented ou…

but i cannot get the

window.history.pushState(null,"","/lovelace-main/0");       
window.dispatchEvent(new CustomEvent("location-changed"));

to work.

Any ideas on this topic?

[stomko]

Thanks. It took some time but statistics started to work after.

I am trying to display daily consumption. This is what it looks like:

Is there a way how can I move “total” line graph to the back, so that bars are in the front?

And this is the code:

type: custom:plotly-graph
entities:

  - entity: sensor.hourly_energy
    name: |
      $fn ({ ys,meta }) =>
        "Grid" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
    type: bar
    filters:
      - filter: i>0
    statistic: state
    period: hour
    texttemplate: '%{y}'
    marker:
      color: red
  - entity: sensor.hourly_self_consumed_energy
    name: |
      $fn ({ ys,meta }) =>
        "Self" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
    type: bar
    filters:
      - filter: i>0
    statistic: state
    period: hour
    texttemplate: '%{y}'
    marker:
      color: rgb(0, 204, 0)
  - entity: sensor.hourly_electricity_exported_to_grid_huawei
    name: |
      $fn ({ ys,meta }) =>
        "Export" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
    type: bar
    filters:
      - filter: i>0
    statistic: state
    period: hour
    texttemplate: '%{y}'
    marker:
      color: rgb(230, 230, 0)
  - entity: sensor.hourly_house_total_consumed_energy
    name: |
      $fn ({ ys,meta }) =>
        "Total" + "(" +ys[ys.length - 1].toFixed(2)+"kWh)"
    type: line
    line:
      shape: spline
      color: rgb(255, 214, 204)
    fill: tozeroy
    statistic: state
    period: hour
    texttemplate: '%{y}'
    marker:
      color: rgb(255, 214, 204)
hours_to_show: current_day
layout:
  barmode: stack
  xaxis:
    rangeselector:
      'y': 1.2
  yaxis:
    fixedrange: true

One another question. For similar with my water usage, I have values in cubic meters. I display that on the bar, so I get values like “0.323”. How can I multiply it by 1000 to get “323” value instead? I am using texttemplate: '%{y}'

[wwtomlinson (Warren Tomlinson)]

I have a simple plot but have been unable to disable the two-finger scroll. I’m on a MacBook and every time I scroll down on my dashboard, my plot zooms out when I scroll with two fingers with the mouse over the plot. I’ve set drag mode and scrollZoom both to false, but the behavior does not change. Any suggestions? I would like to not fully disable zooming (by fixing the axes).
Thanks

[mateine]

Is there a way how can I move “total” line graph to the back

Try changing the order of the entities array

How can I multiply it by 1000

try:

entity: sensor.xyz
texttemplate: '%{y:.1f}'
unit_of_measurement: L
filters:
  - multiply: 1000

[mateine]

disable the two-finger scroll

try:

config:
  scrollZoom: false

[stomko]

Filter worked, thanks.
But the other question regarding graphs - moving entites did not change anything. Line with fill is always in the foreground.

[OzStone (Dan)]

Make sure you’re wrapping the javascript inside of a $fn function that is used to add custom behavior.

Does that help?

on_dblclick: |-
  $fn ({ hass }) => () => {
     window.history.pushState(null,"","/lovelace/living_room")       
     window.dispatchEvent(new CustomEvent("location-changed"))
   }

This is a very cool card that I only just discovered from your reference to my my tap_action navigate post. I installed plotly and got it working using the code above.

[mateine]

Ok, I found out why changing the order of the traces/entities doesn’t affect what occludes what. It is because all your entities have the same unit_of_measurement and therefore the same yaxis. In this case it looks like Plotly decides what to do itself.

The trick is to set yaxis yourself:

  - entity: sensor.sensor_background
    yaxis: y
    type: bar
  - entity: climate.sensor_foreground
    yaxis: y2 # <---- here, this forces a new axis and it will be rendered on top.

You can then hide the y2 axis and force it to stay in sync with y

layout:
  yaxis2:
    visible: false
    matches: y

[Haldi]

@OzStone

Does that help?

absolutely! Thanks
Javascript isn’t my forte…

[stomko]

This totally worked! thanks.

[wwtomlinson (Warren Tomlinson)]

Thank you for your help. I placed “scrollZoom: false” under a config: section as suggested, but this did not fix my problem. Let me describe the behavior more specifically (in case this helps):

• If my mouse is not over the plot area (above or below the card) and I put my two fingers on the trackpad and scroll (up, down or back and fourth) the behavior is as expected (no zooming). I can scroll past the Plotly card up and down with no problems as long as I don’t take my two fingers off the trackpad and as long as they are initially placed on the trackpad when my mouse is NOT over the plot.

• If the mouse is IN the plot area (so the mouse curser is a “plus”) and then I put my two fingers on the trackpad to scroll up or down, the plot will zoom in or out. The display also scrolls up or down even to the point where the mouse will no longer be over the plot. As long as I keep my two fingers on the trackpad, the plot will also zoom while I’m scrolling, even if my mouse has moved completely off of the graph.

Not sure if there’s any way to fix this, but here is my code:
type: custom:plotly-graph
disable_pinch_to_zoom: true
layout:
config:
scrollZoom: false
margin:
r: 75
dragmode: false
legend:
orientation: h
xanchor: center
x: 0.5
entities:

• entity: sensor.deye_sunsynk_sol_ark_pv_power
  name: Solar
  fill: tozeroy
  line:
  color: gold
  filters:
  • sliding_window_moving_average:
    window_size: 10
    extended: false
• entity: sensor.deye_sunsynk_sol_ark_load_power
  name: Load
  fill: tozeroy
  line:
  color: blue
  filters:
  • sliding_window_moving_average:
    window_size: 10
    extended: false
• entity: sensor.deye_sunsynk_sol_ark_grid_power
  name: Grid
  fill: tozeroy
  line:
  color: red
  filters:
  • sliding_window_moving_average:
    window_size: 10
    extended: false
• entity: sensor.deye_sunsynk_sol_ark_battery_state_of_charge
  name: Battery SOC
  line:
  color: black
  hours_to_show: 24
  refresh_interval: 10
  title: Energy Overview

[mateine]

Please fix the code block formatting and I’ll take a look.

[wwtomlinson (Warren Tomlinson)]

type: custom:plotly-graph
disable_pinch_to_zoom: true
layout:
  config:
    scrollZoom: false
  margin:
    r: 75
  dragmode: false
  legend:
    orientation: h
    xanchor: center
    x: 0.5
entities:
  - entity: sensor.deye_sunsynk_sol_ark_pv_power
    name: Solar
    fill: tozeroy
    line:
      color: gold
    filters:
      - sliding_window_moving_average:
          window_size: 10
          extended: false
  - entity: sensor.deye_sunsynk_sol_ark_load_power
    name: Load
    fill: tozeroy
    line:
      color: blue
    filters:
      - sliding_window_moving_average:
          window_size: 10
          extended: false
  - entity: sensor.deye_sunsynk_sol_ark_grid_power
    name: Grid
    fill: tozeroy
    line:
      color: red
    filters:
      - sliding_window_moving_average:
          window_size: 10
          extended: false
  - entity: sensor.deye_sunsynk_sol_ark_battery_state_of_charge
    name: Battery SOC
    line:
      color: black
hours_to_show: 24
refresh_interval: 10
title: Energy Overview

[mateine]

Ahá, the config doesn’t go inside layout. it goes on the root level

[Jan4 (Jan Nielsen)]

I am using an expression to calculate a range for a y-axis, because I need to exclude a trace. I use getFromConfig(entities) to get the traces, then find min and max for the desired traces.

Can I somehow detect which traces are shown? (Enabled or disabled in the legend)