Plotly interactive Graph Card

Thank you @mateine I got it to work using this code for future users:

type: custom:plotly-graph
time_offset: 0.5d
entities:

  • entity: sensor.measured_temperature
    name: Measured Temperature
    line:
    color: orange
    width: 2.5
    filters:
    • store_var: temperature
  • entity: sensor.p_hotwater_forecast_model
    showlegend: false
    name: Forecasted Temperature
    line:
    color: red
    dash: dot
    width: 2
    unit_of_measurement: °C
    filters:
    • fn: |-
      ({ meta, vars }) => ({
      xs: [vars.temperature.xs.slice(-1)[0],…meta.scheduled_forecast.map(({ date }) => new Date(date))],
      ys: [vars.temperature.ys.slice(-1)[0],…meta.scheduled_forecast.map(({ state }) => state)],
      })
  • entity: ‘’
    name: Now
    yaxis: y9
    showlegend: false
    line:
    width: 1.5
    dash: dot
    color: black
    x: $ex [Date.now(), Date.now()]
    ‘y’:
    • 0
    • 1
  • entity: sensor.p_hotwater_forecast_model
    name: Forecasted Temperature
    line:
    width: 3
    color: red
    defaults:
    entity:
    show_value: false
    line:
    shape: spline
    layout:
    legend:
    itemwidth: 10
    hours_to_show: 48

and here’s how it looks:

image

1 Like