Plotly interactive Graph Card

[mateine]

In the github repository. That’s where all the documentation resides:

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

[Marc965]

Hi all.

Have a sensor here provided as is from my solar charger. It resets in the night a begin to increase through the day.

I try to generate a graph but no success:
here is my code:

type: custom:plotly-graph
entities:
  - entity: sensor.total_yield_today
    type: bar
    statistic: state
    period: hour
hours_to_show: current_day
refresh_interval: 10
time_offset: 1h

My graph is blank.

[mateine]

Hi there!
Not all statistics are available for all sensor classes. Try mean and sum. You can always check in the standard home assistant statistics card to be sure the data is actually there before debugging your plotly card yaml

[Marc965]

Hi. Thank you for your answer.
You are right - this entity was not marked for statistics.

[markcocker]

I’m trying to recreate the following in plotly

I’ve got this far:

How can I create a verticle line for the sunrise and sunset annotation on the x axis?
And how can I add the same entity with yesterdays values (ie. a time delta of -24h)?

type: custom:plotly-graph
entities:
  - entity: sensor.myenergi_the_willows_power_generation
    name: Solar
    line:
      color: yellow
      shape: spline
    show_value: true
hours_to_show: current_day
refresh_interval: 10
title: Solar generation today
defaults:
  rangemode: tozero
  entity:
    showlegend: false
    fill: tozeroy
    fillcolor: light
    line:
      width: 1
    filters:
      - resample: 5m
layout:
  height: 200
  yaxis:
    fixedrange: true
    title: Watts
    range:
      - 0
      - 4000
  annotations:
    - text: Sunrise ☉
      x: >-
        $fn ({hass}) => new
        Date(hass.states['input_datetime.sun_today_dawn'].state).getTime()
      textangle: -90
      yanchor: bottom
      showarrow: false
    - text: Sunset ☾
      x: >-
        $fn ({hass}) => new
        Date(hass.states['input_datetime.sun_today_dusk'].state).getTime()
      textangle: -90
      yanchor: bottom
      showarrow: false

[mateine]

I see two options:

• Using line annotations: Layout.shapes in JavaScript

• Or a “fake” entity like in the now line

[markcocker]

I have several plotly cards with very similar config. Is there a technique to define hours_to_show, defaults, layout and other YAML config in one place and have the plotly card merge it in?

Similar to the concept of config_templates into GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant

[mateine]

There isn’t but it is a great idea!
The only way I can think of at the moment is to do ot with $ex. There may be a way to fetch that global config from the hass object

[mateine]

Feel free to make a feature request issue in the repository and I’ll pick it up when I make a new release

[markcocker]

Thank you for considering this - Card template configuration · Issue #414 · dbuezas/lovelace-plotly-graph-card · GitHub

[tvds (Tim)]

@mateine

You can indeed do that:

• Add a trace with the recent history, but set it as internal and store it with a store_var filter
• Add a trace with the 5 minutes statistics also set as internal. Using a a filter filter remove all data whose x is greater or equal than the first x val of the first trace. Then append both xs and ys using the fn filter and store it back to a var
• Repeat with the hourly statistic but don’t set it to internal

Hi, once again thx for the support . In the meantime I tried some things to get it running but unfortunately I still didn’t succeed in setting this up correctly. Is there any example I can refer to?
It would be absolutely amazing to see the 5min details for long term statistics during the recording period (last 10 days) in a 24h view layout. For older days ( > 11 days ago) then you just see the 1h long term statistics data which is recorded for an infinite time.
I fully understand you don’t support setting up the config of functions, so certainly no worries. It’s just a question

[mateine]

I created this example for you now: Combined statistics and short term history · dbuezas/lovelace-plotly-graph-card · Discussion #415 · GitHub

[edoras (Jiri Mares)]

I want plot graph of energy consumption.
When I create easy graph:

type: custom:plotly-graph
entities:
  - entity: sensor.victron1_consumptionpowerl1
refresh_interval: 10
hours_to_show: 12h

it works perfectly, but the graph is unsmoothed. I want smooth the graph. I tried to add parammeters “statistics” and “periods”:

type: custom:plotly-graph
entities:
  - entity: sensor.victron1_consumptionpowerl1
    statistics: mean
    period: 5minute
refresh_interval: 10
hours_to_show: 12h

but when I add those parameters, graph dissapear - there is no graph. I don’t understand why, because I supposed, “statistics” and “peirod” parameters should calculate 5min average of values. Or am I wrong? How to calculate average values to smooth the graph?

I found post for calculate average, but it uses “lambda”, which is deprecated and I didn’t find any example, how to do it by “filter”.

[mateine]

Try with the sliding_window_moving_average filter.
The documentation is in the GitHub repo

[HA123456789 (Jip)]

Is it possible to not show the entity names?

[mateine]

Google “how to hide legend ploylyjs”

[Mar1us]

Thank you for the nice card.
I´m really new to this card and read some of the posts here and already found some answers but i still have some.

• Is there a solution of the overlapping values? Or get the values on the legend?
• If i add the fill value the graph starts by 0 on the yaxis if i remove this the value is more “flexible”

Code

type: custom:plotly-graph
entities:
  - entity: sensor.balkon_wetter_temperature
    name: Balkon
    statistic: max
    period: auto
    line:
      color: '#3e95cd'
      width: 1.5
    fill: tozeroy
  - entity: sensor.balkon_strasse_wetter_temperature
    name: Balkon Straße
    statistic: max
    period: auto
    line:
      color: rgb(96, 125, 139)
      width: 1.5
    fill: tozeroy
color_scheme: dutch_field
hours_to_show: 24
autorange_after_scroll: true
title: Außen Temperatur
logarithmic_scale: false
layout:
  margin:
    r: 60
  hovermode: x unified
defaults:
  entity:
    show_value: true
    line:
      shape: spline

[mateine]

For value in legend see here: Precision in the name (value) · dbuezas/lovelace-plotly-graph-card · Discussion #361 · GitHub

[arganto]

Is there a way to set the min y range but having max y range auto?

Something like:

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_wind_bearing
layout:
  yaxis:
    range:
      - 4
      - **auto**
    fixedrange: true

[rdpeake]

hey,

I have what i hope are 2 quick questions.

1. Is it possible to have a plot card in a sidebar view which is tall? i’m currently trying to set the height in layout, but the card doesn’t expand beyond 450px

2. Is it possible to have yaxis, and yxas1 share the same 0 point but otherwise be independantly scaled/sized?