Plotly interactive Graph Card

mateine · August 31, 2023, 8:40pm

Try statistic: state. I suggest you sear around in the whole forum dor “energy statistics” or similar. Your issue is not specific to this card so you may find more info in a more generic post

glundin · September 1, 2023, 1:11pm

glundin:

I have tried to include device_class as per your suggestion but it still does not read the value.
However when entering the entity it shows a tate in this case 9793.6.

image1037×333 40.3 KB

below is the code showing device_class
#  sensor.sunsynk_total_pv_energy
      sunsynk_total_pv_energy:    
        friendly_name: Sunsynk Total PV Energy
        value_template: "{{ states('sensor.master_master_total_pv_energy') | float + states('sensor.sunsynk1_slave_total_pv_energy') | float }}"  
        unit_of_measurement: "kWh"
        device_class: energy_storage

Thanks for your input, that did not help. I have posted on other groups, lets hope someone can help me.

mateine · September 1, 2023, 8:36pm

Good luck!
By the way I think you need statistic: state (not sum).

James.a.simpson · September 11, 2023, 9:09am

Thanks for creating such a fantastic card. Is someone with a bigger brain than me able to point me in the right direction please? I’m trying to plot two entities against each other (1st entity x-axis, 2nd entity y-axis), so not using time on the x-axis. I think I’m along the right lines but haven’t managed to get the config quite right. I have been playing around with vars and filters etc but can’t get it to work. I’m probably being stupid and missing something obvious…

                      - type: custom:plotly-graph
                        title: Weather Compensation Curve
                        entities:
                          - entity: input_number.heat_pump_dummy_temperature_sensor_for_weather_compensation_predictions
                            period: 5minute
                            internal: true
                            fn: >-
                              $fn ({ xs, ys, vars }) => { vars.dummy_temp = ys; vars.xs = xs; }
                            resample: 5m
                          - entity: sensor.heat_pump_weather_compensation_simulation
                            period: 5minute
                            internal: true
                            fn: $fn ({ xs, ys, vars }) => { vars.sim_flow = ys; vars.xs = xs; }
                            resample: 5m
                         
                          - entity: ''
                            x: $fn ({ vars }) => vars.dummy_temp
                            y: $fn ({ vars }) => vars.sim_flow
                           
                            type: histogram2dcontour
                            mode: lines+markers
                            line:
                              color: green

Any suggestions grateful received…

josephny · September 12, 2023, 1:11pm

Can anyone help with getting this to work.

This works fine:

type: custom:plotly-graph
entities:

entity: sensor.farm_uni_converted
entity: sensor.hoophouse_shelly_uni_tasmota_1_analog_a0

This does not work:

type: custom:plotly-graph
entities:

entity: sensor.farm_uni_converted
statistic: mean
period: hour
entity: sensor.hoophouse_shelly_uni_tasmota_1_analog_a0
statistic: mean
period: hour

I tried with various values for STATISTIC and PERIOD – none work.

Configuration YAML:

platform: template
sensors:
farm_uni_converted:
friendly_name: “FARM UNI CONVERTED”
unit_of_measurement: “F”
value_template: “{{ states(‘sensor.hoophouse_shelly_uni_tasmota_1_analog_a0’) |float(0) / 70.1 }}”

Thank you.

mateine · September 13, 2023, 8:59am

You are almost there! There are 2 errors:

resample goes inside of filters:

filters:
  - resample: 5m

and storing the variable should go after the filters. Alternatively, you could use a filter to store the variable instead. The result is:

- type: custom:plotly-graph
  title: Weather Compensation Curve
  entities:
    - entity: input_number.heat_pump_dummy_temperature_sensor_for_weather_compensation_predictions
      period: 5minute
      internal: true
      filters:
          - resample: 5m
          - store_var: dummy_temp
    - entity: sensor.heat_pump_weather_compensation_simulation
      period: 5minute
      internal: true
      filters:
          - resample: 5m
          - store_var: sim_flow
      
    - entity: ''
      x: $fn ({ vars }) => vars.dummy_temp.xs
      y: $fn ({ vars }) => vars.sim_flow.ys```

mateine · September 13, 2023, 9:01am

Not all sensors get their statistics stored. That depends on the sensor class, see here: Sensor Entity | Home Assistant Developer Docs

AleXSR700 · September 13, 2023, 5:04pm

I’m sorry if I asked this before, but I am trying to find a new chart card and was wondering if plotly allows showing of the state in the header (ideally in addition to the name).
From memory this was not possible in the past without adding a floating legend or something like that.

mateine · September 13, 2023, 7:24pm

Yes, thanks to a recent feature. See here: GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!

AleXSR700 · September 13, 2023, 8:46pm

Oh, that looks cool.

I started playing with it and I am quite good at being bad in not mixing Jinja and JS, but I got it to work quite nicely.

    fn: $ex vars.title = meta.friendly_name + " [" + ys[ys.length - 1] + " " + meta.unit_of_measurement + "]";
title: $ex vars.title

So show friendly name + value + unit.

Is it possible to colorize the font according to the line color? So in multi-input charts each entity can be visually assigned to the chart lines?

mateine · September 13, 2023, 9:30pm

Good job!
I don’t think so, but you can add the value to each entity 'n name ne instead

AleXSR700 · September 14, 2023, 6:30am

I will play around with this as soon as I get back from work. Just had a quick morning session .

I was not yet successful in combining functions with auto-entites. I would have thought that fn goes into the include: - name section and then the call goes into card options. But so far no luck.
hours_to_show is behaving surprisingly.
I am using config-template-card to provide templates, and when I remove the template and enter e.g. ‘1.35’ the card works, but with templates it no longer acceptcs the value.
Simple example:

    hours_to_show: |-
      ${
        { '1.35' }
      }

Error: at [entities.0.on_legend_click]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.on_legend_dblclick]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.on_click]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.line.color]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)
Error: at [entities.0.unit_of_measurement]: 1.35 is not a valid duration. Use numbers, durations (e.g 1d) or dynamic time (e.g current_day)

(the rest of the errors is not being displayed)
So the value is returned to the card but the card cannot use the value. Could this be a type problem (string, json etc.)?

I see no impact of the color formatting. Tried with ha_theme enabled and disabled.
The above error message did show on a red background, so the command seems to be correct. And it is my theme (dark) but not my theme (the colors are defined in my custom theme).

image2005×508 48.7 KB

My theme

should be black and everything transparent, so no borders etc.

mateine · September 14, 2023, 6:55am

That’s a string, remove the quotes { 1.35 } or add a unit { 1.35h }.
What are you using templates for? The card will work better if you use $fn

AleXSR700 · September 14, 2023, 7:10am

Honestly, I am a bit more comfortable with the templates right now because I have been using them with other cards. So I already have my templates for my graph cards.
I would have to start from scratch if I changed it now.

I am always getting Jinja and Java muddled up in Home Assistant

The above example with hours_to_show also shows that here I am stuck. Because when using templates, the value read from a helper will be a string.

It works e.g. for defining the yaxis. So why does hours_to_show only accept numerical values? (adding the “h” will not accept decimals…or maybe it is the same string issue).

josephny · September 14, 2023, 10:46am

Thank you.

I have started down the path of state_class and legacy sensor template.

I didn’t realize there was so much to this (but I should have).

From what I read, there is no “measurement” state_class available in the legacy sensor template format. I think that means I need to convert to a separate template.yaml.

AleXSR700 · September 14, 2023, 4:04pm

Fixed the issue by converting the result to Number().

IS there a way of allowing zoom and scroll but have the minimum y-axis value be 0? I would like to have 0 on y-axis as the lowest value visible.

mateine · September 14, 2023, 4:18pm

Plotly doesn’t offer that, but it can be achieved through $fn. See here Zoom limits · dbuezas/lovelace-plotly-graph-card · Discussion #233 · GitHub

mateine · September 14, 2023, 4:25pm

The issue with mixing it with templating is that it may cause issues under certain circumstances (like flickering), but if it works for you then go for it!

Hours_to_show takes numbers, but if you pass strings it expects a unit. Why? I could invent an reason, but in truth… It’s just because

Anyway happy to hear you solved it!

AleXSR700 · September 14, 2023, 4:41pm

Maybe I am doing something wrong, but if I use the function you posted (or autorange_after_scroll), I can no longer use the zoom function.

mateine · September 14, 2023, 4:56pm

Use the code in the post I linked, not autorange after scroll. If it still doesn’t work, try removing the templates, they may reset constantly reset the card