Help with (relatively) simple graph with entity as multiple arrays

[zahachtah]

I think I understand that I should use a filter for this but I can't wrap my head around the more (complex) examples I have found. I want to do this:

type: custom:plotly-graph
entities:
  - entity: sensor.tibber_electricity_price
    x: attributes.today.map(item => item.startsAt)
    y: attributes.today.map(item => item.total)
    name: Today
    mode: lines+markers
  - entity: sensor.tibber_electricity_price
    x: attributes.tomorrow.map(item => item.startsAt)
    y: attributes.tomorrow.map(item => item.total)
    name: Tomorrow
    mode: lines+markers
layout:
  title: Tibber Electricity Price
  xaxis:
    title: Time
  yaxis:
    title: Electricity Price (SEK)
config:
  scrollZoom: false
  hours_to_show: 2d
  refresh_interval: 60

where {{ state_attr('sensor.tibber_electricity_price', 'today') }} looks like:

[ { "total": 0.7742, "startsAt": "2024-04-05T00:00:00.000+02:00", "level": "CHEAP" }, { "total": 0.7956, "startsAt": "2024-04-05T01:00:00.000+02:00", "level": "CHEAP" }, { "total": 0.7848, "startsAt": "2024-04-05T02:00:00.000+02:00", "level": "CHEAP" }, ...

and

{{ state_attr('sensor.tibber_electricity_price', 'tomorrow') }} similarly as:

[ { "total": 0.7077, "startsAt": "2024-04-06T00:00:00.000+02:00", "level": "CHEAP" }, { "total": 0.7327, "startsAt": "2024-04-06T01:00:00.000+02:00", "level": "CHEAP" }, { "total": 0.7359, "startsAt": "2024-04-06T02:00:00.000+02:00", "level": "CHEAP" }, ...

I'd appreciate a hint, I used plotly before in javascript but its hard to wrap ones head around its functionality embedded in home assistant, although it does seem worth trying to learn it!

[dbuezas]

Hi there!

type: custom:plotly-graph
entities:
  - entity: sensor.tibber_electricity_price
    x: $ex meta.today.map(item => item.startsAt)
    y: $ex meta.today.map(item => item.total)
    name: Today
    mode: lines+markers
  - entity: sensor.tibber_electricity_price
    x: $ex meta.tomorrow.map(item => item.startsAt)
    y: $ex.meta.tomorrow.map(item => item.total)
    name: Tomorrow
    mode: lines+markers
layout:
  title: Tibber Electricity Price
  xaxis:
    title: Time
  yaxis:
    title: Electricity Price (SEK)
config:
  scrollZoom: false

# the next two you had inside config and they belong at root level
hours_to_show: 1s # since you are using the last attribute through "meta", no historical data is needed
refresh_interval: auto 

[zahachtah]

That worked nicely! two small issues:

1. when I load home assistant shows the chart but the x-axis is wrong so I only see a line:

I have to click auto-scale button and then it looks good (I removed markers, so only line)

2. The title overlays the legend in some screen-sizes. Can one control this better?

Noob question: the variable meta is thus the entity passed to javascript as an JSON-object?

P.S. I have now read the documentation way more carefully as I realise how powerful this is! WOW! This will be fun to learn to use to its full extent (and will take some time :-) )

[dbuezas]

🎉

Oh you'll have to set layout:yaxis:range: [firstDate,lastDate]

meta are the last known attributes of an entity. Search for "universal function" in the readme for more.

[zahachtah]

I tried that

layout:
  title: Electricity Price
  xaxis:
    title: Time
    range:
      - firstDate
      - lastDate
  yaxis:
    title: Electricity Price (SEK)

but it then goes from jan 2000 to jan 2001, unless you mean I need to find the values for the firstDate and lastDate. If so, firstDate is Day(now()) at 00.00 hours and last date is Day(now())+1 at 24:00 hours.

I tried to be smart and did:

layout:
  title: Electricity Price
  xaxis:
    title: Time
    range:
      - $ex hass.states["sensor.tibber_electricity_price"].today[0].startsAt
      - $ex hass.states["sensor.tibber_electricity_price"].tomorrow[24].startsAt
  yaxis:
    title: Electricity Price (SEK)

but my hass-plotly-fu is not at this level yet.....(got errors)

[zahachtah]

Got it to work, thanks for all advice @dbuezas!

type: custom:plotly-graph
entities:
  - entity: sensor.tibber_electricity_price
    x: >-
      $ex [...meta.today.map(item => item.startsAt), meta.tomorrow[0]?.startsAt,
      meta.tomorrow[0]?.startsAt]
    'y': >-
      $ex [...meta.today.map(item => item.total), meta.today[meta.today.length -
      1]?.total, meta.tomorrow[0]?.total]
    name: Today
    mode: lines
  - entity: sensor.tibber_electricity_price
    x: $ex meta.tomorrow.map(item => item.startsAt)
    'y': $ex meta.tomorrow.map(item => item.total)
    name: Tomorrow
    mode: lines
  - entity: sensor.tibber_electricity_price
    name: Current
    showlegend: true
    mode: marker
    marker:
      size: 5
      color: crimson
    type: scatter
    x: $ex [Date.now()]
    'y': $ex [meta.current.total]
layout:
  title: ''
  xaxis:
    title: ''
    range: >-
      $ex range = [new Date(new Date().setHours(0, 0, 0, 0)),new Date(new
      Date().setDate(new Date().getDate() + 1))]
  yaxis:
    title: Electricity Price (SEK)
config:
  scrollZoom: false
hours_to_show: 1s
refresh_interval: auto

gives:

One last question: how to avoid the green line in the legend of "current"?

[dbuezas]

Well done! 💪

One last question: how to avoid the green line in the legend of "current"?

It's mode: markers (not singular "marker")