Plotly interactive Graph Card

I think you could use yaml templates for that.

Bar chart example in the discussions section: Stacked bar charts Ā· Discussion #35 Ā· dbuezas/lovelace-plotly-graph-card Ā· GitHub

Do you know what that might look like?

I tried variations of this, but I donā€™t think this works the same way as it does inside the actual themes. A search online is just giving me anything but all the themes that have been created.

  - entity: sensor.sensor_temperature
    connectgaps: true
    line:
      width: 3
      color: {{ var(--background-color) }}

Thanks. I knew there would be one somewhere.

1 Like

Mmm I seeā€¦ Maybe thereā€™s no way yet. If you make a feature request in the repo (in the issues section), and you come up with a nice way to specify it via yaml, Iā€™ll implement it in the next release :slight_smile:

But first, try out these variable names please :pray:
lovelace-plotly-graph-card/plotly-graph-card.ts at b92b1af50378b7c34e2de6d6dcdff0fd0de767b6 Ā· dbuezas/lovelace-plotly-graph-card Ā· GitHub

If you succeed, please consider a post in the discussion section ā€œshow&tellā€ to help others out :slight_smile:

Nope, no luck with those variables either. Iā€™m guessing they are referenced some other way or just not available.

The config it saves is kind of unusual.

        '[object Object]': null

Iā€™ll give some thought to how to reference those values and make the FR as requested.

Thanks for the input!

I see. I guess that that requires direct support in the card then.
The good thing is that we have the notation: var("--background-color") seems to be the standard in lovelace/dashboard.

Iā€™m in vacations soon so I wonā€™t be able to do it quickly, please open an issue so I donā€™t forget :slight_smile:

Hi,

Love the addon, especially the helpful ā€œShow and Tellā€-section which made it easy for me to get started with the card.

I cannot get the derivate example to work in my configuration. My JS-skills are poor at best, Iā€™ve basically just copied the text in itā€™s entirety and just changed the entity. This has worked flawlessly in my other cards so now Iā€™m stuck.

Use-case: Iā€™m using a sensor to measure the water volume in a container. The water is used for gardening and is directly correlated to the amount of water used by the plants. I currently have a sensor monitoring the water level which allows me to see the volume drop during the week and know when to refill it. Iā€™d like to use the derivate-graph to see how the rate of consumption varies based upon the weather (been crazy warm for 4 straight days now) and the plant growth (bigger = more water).

Thanks again for a great card!

1 Like

What a wonderful feedback piece to get :slight_smile:

I see the bug now on that lambda example, i just fixed it please try it again. Canā€™t test at the moment but it should be working now. Thanks for pointing that out.

Works as intended! Thanks for your quick reply, should have provided more info on how it looked before.

Really good piece of work - Iā€™m gradually changing all my graphs to this.

I do have a problem with one plot though. Is there anything wrong with this config? The fixed right y axis scaling works, but the left always autofits.

          - type: custom:plotly-graph
            entities:
              - entity: sensor.pressure_stats_mean
                name: Pressure
                show_value: true
                right_margin: 40
                yaxis: y1
                line: 
                  shape: spline
              - entity: sensor.pressure_change
                show_value: true
                right_margin: 40
                yaxis: y2
                line: 
                  shape: spline
            title: Pressure
            hours_to_show: 24
            refresh_interval: 10
            layout:
              yaxis1:
                gridcolor: whitesmoke
                zeroline: false
                range:
                  - 900
                  - 1010
                fixedrange: true
              yaxis2:
                gridcolor: whitesmoke
                zeroline: true
                range:
                  - -5
                  - 5
                fixedrange: true
              xaxis:
                rangeselector:
                  "y": 1.2
                  buttons:
                    - count: 1
                      step: hour
                    - count: 12
                      step: hour
                    - count: 1
                      step: day
                    - count: 7
                      step: day
                    - count: 28
                      step: day
            view_layout:
              grid-area: footer7

Would you put this as a bug report under issues in the repository please?
Otherwise Iā€™ll forget to take a look when I have time available

1 Like

Hi thanks for the awesome tool!

I was wondering if it is possible to have ā€˜fixed, y-axis limitsā€™ where scrolling is locked but based on a lambda value.
For example for room temperatures, I would like to make sure that the max value of all entities is included, but specify a hard coded lowerbound. Or for example for the lower bound, take the maximum, of the minimum value of the entities, and a hard coded value.
like for example

range:
  - max(entities)
  - max( min(entities), 20 )

Or if it is otherwise potentially possible to exclude certain entities from the automatic range calculation.

Hi I was looking for a way to show a particular D3 plot in home assistant and found this thread. What I want to be able to do is show a plot similar to the density plot shown here Density 2d with shading in d3.js

image

Do you think it is possible to use this card to create a graph like that?

Not yet, but soon :slight_smile:
It will be a bit involved, the idea is that you will be able to use lambdas everywhere

unfortunately not at the moment. Feel free to post a feature request in the repo (under ā€œissuesā€) so I remember to look at it when I get back to the project :slight_smile:

Hello Mateine,

i have a problem of overlapping of the legend and graph:

Is there a configuration parameter to solve this?

Thanks in advance
Frank

Yes, you can add a bigger top margin or move the legend somewhere else. Check out the readme and the discussions section for inspiration :slight_smile:

@mateine Thanks for the great card, Iā€™m using it already in quite a few places, although sometimes struggling to find the attributes and options needed to tweak things. My main request now is: Iā€™m also interested in getting the Ploty card to work on the HA built-in long term statistics. Is there already some progress on this? Maybe I missed some nuggets of info on this somewhere? Thanks.