Plotly interactive Graph Card

Share your Projects! Dashboards & Frontend
,
348

I haven’t used pictures inside this card, so I do not know the path’s format. The picture card probably converts the file’s path into something else for the browser to fetch.
I suggest you:

  1. Open the chrome devtools, go to the network tab and the find out what path plotly is trying to fetch the image from.
  2. Then repeat with the picture card.
  3. Compare both to get an idea on what to write in this card’s config so the path would match the url the picture card fetches from
  4. Post your results here, others may also want to use what you’ve learned :slight_smile:
349

I’m trying to plot the value of one sensor to another. Both sensors give an array of values of the same length. My first attempt was to do the following:

type: custom:plotly-graph
entities:
  - entity: ''
    fill: tozeroy
    name: Temperature
    x: {{states('sensor.x')}}
    y: {{states('sensor.y')}}
    line:
      shape: spline
      color: orange

But this doesn’t work as the template gets deleted when saving the card. If i plug in the values of my sensors manually it does work, but not automatically. Any Ideas?

350

Take a look at the filters section of the readme, and also search for “hass”

351

Hi Ryan, I would like to graph the inside temperature and when the a/c or heating is running. I have only one a/c system to monitor. Your solution looks really great. Could you share? Thanks, Norm

352

I have been trying to read through all of the documentation that has been set around, but for some reason I just can’t find it what I’m looking for.

type: custom:plotly-graph
layout:
  xaxis:
    type: number
    showlegend: false
  yaxis:
    fixedrange: true
    range:
      - 0
      - 50
entities:
  - entity: ''
    x:
      - -20
      - 0
      - 20
    'y':
      - 22
      - 31
      - 35
    line:
      shape: spline
raw_plotly_config: true

What I want to do is get sensor data points as y-values from three different sensor requests. The sensor reading is basically a set point temperature here, so only by updating it manually to the device, the value changes. Otherwise it outputs same flat number from the device. End goal would be to make an interactive graph, that by dragging the set datapoint on x-axis vertically, you can change the y-value and this gives a command to the device to change the value on there.

But just starting at the basics to get a single value for each of three points on y-axis and then making a spline through the 3-data points would be appreciated.

353

I didn’t understand

354

Sorry, let me try to reiterate.

For values:

x:
 - -20
 - 0
 - 20

y:
 - sensor.temperature_point_low_req   # how to insert static sensor value here (eg. 19)
 - sensor.temperature_point_mid_req   # how to insert static sensor value here (eg. 26)
 - sensor.temperature_point_high_req  # how to insert static sensor value here (eg. 58)

Then just plot the output with spline line shape.

edit:

Got it working by calling:

    'y':
      - $ex hass.states["sensor.temperature_point_low_req"].state
      - $ex hass.states["sensor.temperature_point_mid_req"].state
      - $ex hass.states["sensor.temperature_point_high_req"].state

but the templates documentation claims to avoid calling states.sensor.temperature.state if possible?

355

That’s fine $ex is not templating, it’s something specific to this card and it is javascript

1 Like
356

Does anyone know how to make the legend span the width of the graph instead of it being left justified???

Web capture_28-7-2023_121413_10.27.27.46

357

As far as I know, there’s no inbuilt way of configuring the legend to span the full width of the graph.

358

Hey smart people :wink:
I’m trying to switch an apexcharts-card over to Plotly and having difficulty. I think this problem has already been solved but as I don’t write code adapting the solution to what I am trying to do has not gone well.

My data is currently in sensor attributes and looks like this:

image
image1039×528 26.7 KB

the apexcharts-card uses the data_generator to chart the attributes, here is the apexcharts-card YAML:

type: custom:apexcharts-card
header:
  title: King County COVID Wastewater
  show: true
  colorize_states: true
chart_type: scatter
graph_span: 1.2y
span:
  end: day
  offset: '-2d'
series:
  - entity: sensor.covid_wastewater_1142
    name: shed 1142
    data_generator: |
      var filtered_data = entity.attributes.data.filter(function(record) {
        return 'pcr_conc_smoothed' in record;
      });

      var filtered_map = filtered_data.map(record => {
        return [new Date(record.date).getTime(), record.pcr_conc_smoothed/1000000];
      });

      return filtered_map;
    unit: vvp
    color: red

I think this should be fairly easy using filters but I am getting nowhere. If anyone could help me out I would appreciate it.

359

Hi Almus!
you need to set the attribute parameter in the entity (attribute: anything) to ensure attributes are fetched. Then use an fn filter, the attributes are in state?.attributes?.data
Then you need to return an object with xs (your dates) and ys (your values).

Edit: removed wrong example (see link posted by Almus)

If you need more help, then please open a Q&A discussion topic in the repo, it is easier there

1 Like
360

Thank you for the help, I tried that a few different ways and was not able to get it working. As suggested I have opened up a Q&D discussion here: Plotly chart with data collected in a command_line sensor · dbuezas/lovelace-plotly-graph-card · Discussion #304 · GitHub

361

Hi,
Tried to read all the docs and searched in the forum but no luck, so asking your help :slight_smile:
I’ve created the following plotly chart:

type: custom:plotly-graph
defaults:
  entity:
    statistic: mean
    period: auto
    show_value: true
    yaxes:
      fixedrange: true
layout:
  showlegend: true
  legend:
    font:
      size: 20
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 3
          step: day
        - count: 7
          step: day
entities:
  - entity: sensor.oregon1_temperature
    name: |
      $ex "Temp: " + ys[ys.length-1] + "°C"
    line:
      color: '#0052cc'
      width: 3
  - entity: sensor.oregon1_humidity
    name: |
      $ex "Humidity: " + ys[ys.length-1] + "%"
    line:
      color: '#c0d8ff'
      width: 2
hours_to_show: 72
refresh_interval: 10
title: Outdoor
autorange_after_scroll: true

One of my main aim was to show the latest value on the legend, instead on the chart itself.
But I got the following result:

image
image3257×773 112 KB

Couple of issues;

  • Latest value is somehow computed and I think it’s releated to statistics:mean param. How can I get the latest value on the legend and not a computed one?
  • Would it be possible to report min/max/mean values on the legend for the period displayed?

Thanks a lot for your work :slight_smile:

Giuseppe

362

You’re almost there!
Try the hass oblect: (Using the hass object)[GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!]

See this one too: (universal-functions)[GitHub - dbuezas/lovelace-plotly-graph-card: Highly customisable Lovelace card to plot interactive graphs. Brings scrolling, zooming, and much more!]

For min max you’ll have to compute it yourself using Math.min(…ys).

And to reduce the digits, try n.toFixed(2). The $ex and $fn are JavaScript, so you can always ask google or ChatGPT " how to xyz in js.

1 Like
363

Oh, I misunderstood. What you did is correct, the difference is just a rounding issue. Try rounding it yourself Math.round(ys.at(-1)*100)/100 or (ys.at(-1) + 0.005).toFixed(2)

1 Like
364

That worked like a charm! Thanks for your help :slight_smile:

365

Is there any way to display the value in each marker, I don’t know if it is possible in the Home Assistant version, in Plotly it is possible, according to the web site

https://plotly.com/python/line-and-scatter/#connected-scatterplots

Thanks.

366

Sure, set mode: markers+text inside entry

367

Thanks it’ all ok

thanks Mateine