Plotly interactive Graph Card

mateine · November 21, 2023, 9:07am

Hey there
To read the y value at a specific x value you have 2 options:

A resample filter so you know exactly the x spacing between each index of the ys array
A for loop (or binary search) on the xs array to find the index of the closest datapoint. Then use that index in the ys array.

If you need help with the specific JavaScript code i suggest:

Use chatgpt
Look at the debug section in the readme
(And finally) open a Q&A topic in the Discussions section of the repo and I can give it a try

Good luck!

nnorbi99 · November 22, 2023, 10:43am

Thank you very much. I found a solution, but now i have another problem
I will open a Q&A topic.

Reflex · November 22, 2023, 3:46pm

Have I missed something regarding state attributes? The following seems to not generate anything at all:

type: custom:plotly-graph
entities:
  - entity: sun.sun::elevation
hours_to_show: 72
refresh_interval: 10
layout:
  showlegend: true
  height: 300

I also tried with

attribute: elevation

resulting in the same empty output as above.

mateine · November 22, 2023, 4:15pm

I think the sun integration changed. Go to the integrations page, find the sun and check which entities it exposes now.
I should update the example yamls.

Reflex · November 22, 2023, 4:28pm

Thanks for super quick reply, mateine. It says “elevation” in the attributes when I display the sensor in the Developer Tools → states:

Edit: I did what you said and you are totally right. There’s a dedicated sensor for elevation now.

mateine · November 22, 2023, 4:49pm

Was that the sun.sun entity? If it still exist it should be plotted, but I suspect HA is showing you the last entry it has from when the entity existed

Reflex · November 22, 2023, 5:07pm

Yeah it’s the sun.sun entity. I am still using it, the attributes values you see in the screen shot are valid and showing current values as of today.

mateine · November 22, 2023, 5:32pm

Interesting, then it should actually work fine. I’ll take a look. Thanks for reporting it

arifroni · November 24, 2023, 10:26am

how can i make the legends in one row, not two row?

type: custom:plotly-graph
title: Movement Energy
refresh_interval: 1
hours_to_show: current_day
layout:
  height: 250
  margin:
    l: 40
    r: 20
    t: 10
    b: 0
  showlegend: true
  legend:
    x: 0.3
    'y': -0.4
  xaxis:
    dtick: 1
    type: number
    fixedrange: true
    range:
      - 0
      - 8
  yaxis:
    dtick: 20
    fixedrange: true
    range:
      - 0
      - 150
entities:
  - entity: ''
    name: Threshold
    mode: lines
    line:
      shape: spline
      width: 2
      color: FB239F
    x:
      - 0
      - 1
      - 2
      - 3
      - 4
      - 5
      - 6
      - 7
      - 8
    'y':
      - $ex hass.states["number.mmw_ps_office_g0_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g1_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g2_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g3_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g4_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g5_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g6_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g7_move_threshold"].state
      - $ex hass.states["number.mmw_ps_office_g8_move_threshold"].state
  - entity: ''
    name: Energy
    mode: lines
    line:
      shape: spline
      width: 2
      color: blue
    x:
      - 0
      - 1
      - 2
      - 3
      - 4
      - 5
      - 6
      - 7
      - 8
    'y':
      - $ex hass.states["sensor.mmw_ps_office_g0_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g1_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g2_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g3_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g4_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g5_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g6_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g7_move_energy"].state
      - $ex hass.states["sensor.mmw_ps_office_g8_move_energy"].state
raw_plotly_config: true

mateine · November 24, 2023, 12:32pm

Legends in plotly are a bit of a mystery. Try setting the x of the legend to zero so it has more space to the right

arifroni · November 24, 2023, 12:52pm

edit: fixed by removing raw_plotly_config: true

It doesn’t work this way.

mateine · November 24, 2023, 1:40pm

Removing that parameter enabled this: https://github.com/dbuezas/lovelace-plotly-graph-card/blob/a4000f8ed4f8009ac1256f0a18438ded259bea40/src/parse-config/defaults.ts#L115

In case you need to go back to raw config but want to keep the legend

arifroni · November 24, 2023, 2:12pm

thanks. it looks much better now. i kept raw_plotly_config: true

josephny · November 30, 2023, 10:38am

Is there a setting to fill in null data with the last value?

For example, from what I can tell, if a temperature reading does not change, HA will treat it as null data and Plotly will not plot it.

I would rather have Plotly plot is as the last known valve than leave an unplotted portion of the graph. Ideally, the “inhereted” plotted values could be a different color so they can be identified as not actual data, but it would be so much more pleasing that big gaps in the plot.

Possible?

Thanks!

mateine · November 30, 2023, 11:39am

You bet!
See extend_to_present

GSD · December 1, 2023, 8:54pm

First of all I want to say that I really appreciate your work. You did an amazing job with this card, it’s fantastic. I just migrated from ApexCharts which was a big disappointment for me, and switching to Plotly was like a breath of fresh air, much more possibilities minus the bugs.
I’ve managed to setup some charts and I’m quite satisfied with the result. The only thing I haven’t figured out yet was how to enable hover capabilities for a touch device. On a computer the hover text behaves as expected, it’s displayed throughout the datapoints on mouse hover, but on a mobile device the only way to display the labels and make them hold, for a little bit at least, is by double tap.
Can the hover capability be achieved for a touch screen device as well?

I’ve also added some screenshots with some of my graphs. Hope you enjoy it.

Thank you.

mateine · December 2, 2023, 12:03pm

Thank you! Happy to hear you are enjoying the card

Regarding hover with touch devices, this is unfortunately an issue with plotly itself. You can follow this issue to get updates: Hover Box on Mobile Using Touch Input · Issue #281 · dbuezas/lovelace-plotly-graph-card · GitHub

Your theme looks really nice! I see the default color scheme doesn’t work that well in your bottom plot though, you may want to try the other available color schemes

GSD · December 2, 2023, 12:46pm

Sorry, what do you mean by this?

mateine · December 2, 2023, 1:01pm

Follow the link. You can pick different color themes for the traces, or create your own list of colors for the lines

GSD · December 2, 2023, 1:51pm

I see what you mean now. That’s all intended, even the fact that the vertical gridlines are barely visible. That’s how i visualized the whole thing, but there’s always room for improvement.

Hope that someday will have hover capabilities on touch screen devices. That would great.

Thank you.