Plotly interactive Graph Card

mateine · January 10, 2023, 7:56pm

Thanks!
Yes, that bothers me too. The underlying plotting library is missing a couple of basic mobile support features, which are tracked here: Mobile interactions wishlist · Issue #1858 · plotly/plotly.js · GitHub

I missed pinch to zoom too much so I implemented (a basic version of) it in the card myself.
It may be possible for me to simulate a mouse hover event from a touch tap myself too, feel free to leave a feature request in the repo, I will take it when I feel like tinkering with touch events again :).

lucasimons · January 11, 2023, 10:53am

@mateine there is a way to have disabled some entities by default like in the pic, first 4 entity active and the other disactive

mateine · January 11, 2023, 11:19am

Yes, add this to the entities you want to be hidden by default:

visible: 'legendonly'

slipx06 · January 11, 2023, 11:27am

Is there a way to show the current series value in the header where the legend is or adjust layout to avoid the overlapping issue?

mateine · January 12, 2023, 11:13am

I don’t think so, no. There’s an upcoming feature that will allow arbitrary functions everywhere, when I finish it this will be possible.

jazzmonger · January 18, 2023, 6:37pm

is there a way to specify the bacground color of the X axis controls?
no matter what theme I use, its unuseable:

BTW, I use this graphing system extensively and LOVE it. HUGE step up from the buggy Apex charts

mateine · January 18, 2023, 8:00pm

Thank you for the kind words
There are extra parameters for that see here: Layout.xaxis in JavaScript
If you add a feature request to set them automatically, I’ll pick it sooner or later

miljbee · January 20, 2023, 3:59pm

Hello,

I am playing with filters, seems great thx
I plot energy consumption from a total_increasing sensor over certain periods.
the difficulty is to start the graph from zero at the begining of the period, I mean subtracting from all y the first y value.
with the previous version of plotly, I was doing :

  - entity: sensor.total_increasing_sensor
    statistic: sum
    period: hour
    lambda: |-
      (ys, xs) => {
        start = ys[0]
        y = ys.map(y => {
          return y-start
        } )
        return { x: xs, y:y}
      }

With the new filters, I made this:

  - entity: sensor.total_increasing_sensor
    statistic: sum
    period: hour
    filters:
      - force_numeric
      - fn: |-
          ({xs, ys, meta, states, statistics, hass}) => {
            return { ys: ys.map(y => y - ys[0]) } }

It does save a few lines, but I have the feeling that it could be simpler.
Have I missed something ?
Perhaps adding a new filter ‘start_y_zero’ or ‘shift_y_zero’ or ‘- add: -ys[0]’.

What do you think ?

mateine · January 20, 2023, 9:31pm

yeah, I like that! Can you open a feature request issue so I pick it up when I’m through with the requests in the queue?

jazzmonger · January 26, 2023, 2:35pm

I’m having trouble scaling one of my plots.

The red line is a binary sensor-on/off. I want it scaled so I can see at what point it turns on when the temp triggers it. It shows this

If I slide my finger I can line it up the way I want it, but I’d like it to show this way by default.

type: custom:plotly-graph
defaults:
  entity:
    texttemplate: <b> %{y}</b> %{customdata.unit_of_measurement}
    show_value: true
hours_to_show: 4
entities:
  - entity: binary_sensor.house_stoke_fire_flag
    yaxis: y3
    show_value: true
    right_margin: 40
    filters:
      - multiply: 0.1
    line:
      color: red
      dash: dashdot
  - entity: sensor.esph_house_stove_pipe_temp
    name: Pipe Temp Lambda Smoothing applied
    yaxis: y1
    show_value:
      right_margin: 40
    line:
      color: blue
      shape: spline
      width: 1
      smoothing: 1
    lambda: |-
      (ys, xs) => {
        const MINUTES = 10 // <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
  - entity: sensor.esph_house_stove_pipe_temp
    unit_of_measurement: Pipe Temp
    yaxis: y1
    show_value: true
    right_margin: 40
    line:
      color: aqua
      shape: spline
      width: 1
      smoothing: 0
refresh_interval: 10
default_trace:
  line:
    width: 1
layout:
  height: 500
  yaxis:
    zeroline: false
    fixedrange: true
    range:
      - 150
      - 250
  yaxis2:
    gridcolor: whitesmoke
    fixedrange: false
    zeroline: false
    range:
      - 150
      - 250
  yaxis3:
    gridcolor: whitesmoke
    zeroline: true
    fixedrange: false
  grid:
    ygap: 1
    rows: 1
    columns: 1
    pattern: coupled
    roworder: top to bottom
  xaxis:
    rangeselector:
      bgcolor: '#474747'
      'y': 1.2
      buttons:
        - count: 30
          step: minute
        - count: 1
          step: hour
        - count: 2
          step: hour
        - count: 3
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 2
          step: day
        - count: 7
          step: day

I really love this graphing pkg! It’s slick.

mateine · January 26, 2023, 2:53pm

So you want that the on off sensor draws a horizontal line at height of the temperature sensor when the sensor toggles?

mateine · January 26, 2023, 2:54pm

By the way, you should switch to filters, way easier than the deprecated lambdas. Smoothing is just one line

mateine · January 26, 2023, 2:56pm

BTW, if you want that intersection I mentioned above, then I don’t think you can at the moment. You’ll have to wait a couple of days for the new release with universal functions. Then you can combine data from multiple entities.
Until then, the only option I see is make a template entity that is 0 if the binary sensor is off, and TEMPERATURE if the binary sensor is on.

jazzmonger · January 26, 2023, 3:20pm

Interesting, I hadn’t thought of a template sensor. Ill give that a try

mateine · January 27, 2023, 9:51pm

v3.0.0 Beta version available

Feedback welcome in the discussion

mateine · January 27, 2023, 10:00pm

By the way, all plots are interactive

nilux · January 29, 2023, 7:58pm

Wow! This will open the door to so much more understanding. Awesome!

mateine · January 29, 2023, 10:23pm

v3.0.0 is out! Looking forward to see what awesome plots the community comes up with!

arganto · January 30, 2023, 7:26am

Thanks so much. I will try to test a lot of thinks as soon as I can.

jolas · January 30, 2023, 11:43am

Thank you!
I wanted to ask if there is option to display only current day (starting from 12:00a.m) in x-axis?