Plotly interactive Graph Card

feldsperling · January 1, 2025, 9:08pm

Hi,

thx for your quick answer, still this is a problem for me . I need the needed steps and somehow to check how to get there . As said i am a nyb - and my programming skills ends in bash scripting , so it wojuld help a lot .

So i have template-card and i have a Variable like -0 or -1 …

the ploty chart is surrounded by template card to update the variable on demand

I retrieve 365d statistics in the yaml code

In $ex i somehow check if currentdate(Month)-variable = seriesdate(Montth) and if not i discard the series ?

Or maybe better create a Variable instead of a Counter which has YYYYMM and use this for compare to the series ?

will this work ? is this the correct way ? any samples where i could learn from ?

I do not want spending hours on createing a Variable / helper, if the result will not work , so i would like first to try it out with fixxed numbers / variables …

Everything is new to me so all takes some time and needs to be checked first .

Thank you, Dietmar

edit - update

This to show the Month used by a counter button - very stubid and simple
( just to show, needed > h to just get his done - so please be patient … - bloody |int for a counter ( yes state is always string … ) )

     - type: custom:mushroom-template-card
        primary: >-
          {% set f = now().month|int %} 
		  {% set offset_val = states('counter.monthly_offset_value') %}
		  {% set mon = ["Jänner","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"] %}
		  {% set b =  offset_val|int %} 
		  {% set c = mon[f-1-b] %} 
		  {{ c }}
        secondary: ""

jgassens · January 2, 2025, 6:31pm

I am trying to figure out if it is possible to have multiple labels for the y-axes. I am trying to recreate the attached graph but i can only get two axes to show up at once.

mateine · January 2, 2025, 8:17pm

See the js code of this: https://codepen.io/plotly/pen/OVqZEO

klaj · January 6, 2025, 3:24pm

Do you have an example for more than 2 axis, combined with data from Home assistant? That would be great!

klaj · January 6, 2025, 3:26pm

Is it possible to have multiple different charts, and control them with one set of input data (e.g. buttons to set the timespan to 1day / 1 month / …)? Im would also interested in setting the begin and end time from outside. the chart, again using these data in multiple charts.

mateine · January 7, 2025, 12:31pm

You can do that with a helper entity used in multiple cards, but it won’t be perfect

baz123 · January 8, 2025, 11:09am

Is it possible to disable all the controls pan,zoom, autoscale etc?

mateine · January 8, 2025, 12:12pm

Hi there!

You can use

config:
  staticPlot: true

Or disable buttons individually. See here: Configuration options in JavaScript

lord_icon · January 8, 2025, 3:49pm

hello,

Unfortunately I can’t get any further with solar forecast data + Ploty.

In the meantime, I have already used static values:

template:
  - sensor:
      - name: Solarprognose Werte Heute
        state: >
          {{ 0 }}  
        attributes:
          timestamps: >
            ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
          values: >
            [0, 0.223, 1.421, 3.266, 4.659, 5.296, 3.991, 0]

Plotys Code:

type: custom:plotly-graph
entities:
  - sensor.solarprognose_werte_heute
layout:
  title: Solarprognose (kW)
  xaxis:
    title: Uhrzeit
    type: category
  yaxis:
    title: Leistung (kW)
    type: linear
    range: [0, 6] 
traces:
  - type: scatter
    mode: lines+markers
    name: Solarprognose
    x: "{{ state_attr('sensor.solarprognose_werte_heute', 'timestamps') }}"
    y: "{{ state_attr('sensor.solarprognose_werte_heute', 'values') }}"

Results in a suitable Y +X axis. But no value
grafik

minmal Plotys: Y axis wrong

type: custom:plotly-graph
entities:
  - entity: sensor.solarprognose_werte_heute

Target:
This is solar yield data. (Forecasts.)
They come from a JSON interface.

I don’t want them in the DB under any circumstances, because the forecast is queried every 15 minutes and is constantly changing.

That’s what it’s supposed to be.

Do you have a template for me with 2-3 numbers that somehow shows a hill-curve?

paulboer · January 16, 2025, 11:44pm

Hi, I have finally managed to create a scatter plot to plot temperature vs humidity for some sensors around the house, but I have some problems:

The series names are taking up a lot of space on the right - they can actually be in the top right inside the plot area, as there will never be data there - temp and humidity have an inverse relationship How can I do this?
The plot is showing lines, I actually wanted markers?
I want older values to have higher transparency, is this doable?

Here is the code:

type: custom:plotly-graph
entities:
  - entity: sensor.temp_and_humidity_temperature
    internal: true
    filters:
      - resample: 15m
    fn: $fn ({ xs, ys, vars }) => { vars.temp = ys; vars.xs = xs; }
  - entity: sensor.temp_and_humidity_humidity
    internal: true
    filters:
      - resample: 15m
    fn: $fn ({ ys, vars }) => vars.humidity = ys
  - entity: ""
    x: $fn ({ vars }) => vars.temp
    "y": $fn ({ vars }) => vars.humidity
    name: Attic
    marker:
      color: orange
      size: 10
      opacity: 1
  - entity: sensor.paul_bedroom_temp_and_humidity_temperature
    internal: true
    filters:
      - resample: 15m
    fn: $fn ({ xs, ys, vars }) => { vars.temp = ys; vars.xs = xs; }
  - entity: sensor.paul_bedroom_temp_and_humidity_humidity
    internal: true
    filters:
      - resample: 15m
    fn: $fn ({ ys, vars }) => vars.humidity = ys
  - entity: ""
    x: $fn ({ vars }) => vars.temp
    "y": $fn ({ vars }) => vars.humidity
    marker:
      color: blue
      size: 10
      opacity: 1
    name: Paul
title: Temperature vs Humidity
hours_to_show: 48
show_legend: true
raw_plotly_config: true
layout:
  margin:
    l: 30
    r: 10
    t: 10
    b: 30
scene:
  xaxis:
    title: Temperature
  yaxis:
    title: Humidity

mateine · January 17, 2025, 8:19am

When you use raw_plotly_config most the defaults of this card are removed, including the legend position and orientation.

Either remove that or add:

layout:
    legend:
      orientation: h
      bgcolor: transparent
      x: 0
      y: 1
      yanchor: bottom

flyoffacliff · January 21, 2025, 1:23am

I take daily medication and want to use a graph such as Plotly to track this better. When I take the pills, I scan an NFC tag, which updates a datetime helper with the current time.

I want each change of this entity (meaning pills were taken) to add a new column/bar on the X axis, with the Y axis showing the hours elapsed since the last time the pills were taken. The goal being to consistently take the pills every 24 hours and keep each bar the same height.

Here is a mock chart with dummy data from Excel:

Any help with getting the right YAML together for this?

bbaixo · January 21, 2025, 4:43pm

Hello,

I want to make a graph with the attributes of this entity:

how I can do that?

my code it’s not working:

type: custom:plotly-graph
defaults:
  entity:
    show_value: false
    line:
      shape: line
      width: 2
    mode: lines+markers+text
    texttemplate: "%{y}"
    textposition: top left
layout:
  xaxis:
    type: number
    autorange: true
entities:
  - entity: ""
    x: states.nr_temp_divisoes_graf.attributes.divisao
    "y": states.sensor.nr_temp_divisoes_graf.attributes.temp

Thks

mateine · January 24, 2025, 8:38am

When date and value are in the attributes you can plot it like this. Remember to search the discussion section or the image index in the repo. There is tons of examples there

bbaixo · January 24, 2025, 6:21pm

Thanks for you hint, but I can’t made the graph

my code:

type: custom:plotly-graph
entities:
  - entity: ""
    filters:
      - fn: |-
          ({hass}) => ({
            xs: hass.states['sensor.nr_temp_divisoes_graf'].attributes.data.map(({ divisao }) => value),
            ys: hass.states['sensor.nr_temp_divisoes_graf'].attributes.data.map(({ temp }) => value)
          })

I don’t know where is my mistake.

thanks

mateine · January 25, 2025, 12:07pm

Try tis instead. Also check the debugging section in the readme

type: custom:plotly-graph
entities:
  - entity: ""
    filters:
      - fn: |-
          ({hass}) => ({
            xs: hass.states['sensor.nr_temp_divisoes_graf'].attributes.divisao,
            ys: hass.states['sensor.nr_temp_divisoes_graf'].attributes.temp
          })

bbaixo · January 25, 2025, 2:48pm

hi @mateine

thanks for your insights, but unfortunately still don’t work:

and I don’t have error in debug:

I past the last week search for a solution, without sucess

thanks

mateine · January 25, 2025, 6:26pm

See the debug section in the readme. You’ll be able to see what’s in the attributes directly

cactuspatchkid · January 25, 2025, 9:21pm

Hello from another satisfied customer
I am wanting to build something that is more of a gauge than a graph, so I’m not sure if plotly is the right vehicle, but it seems so flexible that it might be.
I am envisioning a bar that displays ~~energy~~ power use and updates its length depending on the current readings. That would be simple enough with a bar graph card of some kind. The more complicated part is I’d like it to have zero in the center, showing export to the left and consumption to the right. There would be an adjacent overlapping bar indicating how much of the ~~energy~~ power is solar. I have the sensors and can do the math, but generating the graphics is escaping me.
Any ideas?
Thanks in advance!

mateine · January 26, 2025, 9:13am

See this one: stacked bar-chart like senec-chart · dbuezas/lovelace-plotly-graph-card · Discussion #491 · GitHub

It’s vertical instead of horizontal, but you can change that, see Horizontal bar charts in JavaScript