3D-scatter graph

[aforell57]

That 3D scatter graph in the readme is very nice! What is the yaml code of it? My actual need is to create a 2D scatter, but have not succeeded so far

[dbuezas]

I thought no one would ever ask! :)
This should also give you an idea on how to make a 2d scatter

type: custom:plotly-graph-dev
entities:
  - entity: sensor.openweathermap_pressure
    internal: true
    filters:
      - resample: 1h
    fn: $fn ({ xs, ys, vars }) => { vars.pressure = ys; vars.xs = xs; }
  - entity: sensor.openweathermap_temperature
    internal: true
    filters:
      - resample: 1h
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: sensor.openweathermap_humidity
    internal: true
    filters:
      - resample: 1h
    fn: $fn ({ ys, vars }) => vars.humidity = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.pressure
    z: $fn ({ vars }) => vars.humidity
    type: scatter3d
    mode: lines+markers
    marker:
      size: 7
    line:
      color: rgba(50, 50, 217, 0.5)
      width: 3
      opacity: 0.8
hours_to_show: 24
raw_plotly_config: true
layout:
  margin:
    t: 0
    l: 0
    r: 0
    b: 0
  height: 500
  scene:
    annotations:
      - x: $fn ({ vars }) => vars.temperature[0]
        y: $fn ({ vars }) => vars.pressure[0]
        z: $fn ({ vars }) => vars.humidity[0]
        text: start
        showarrow: tru
        arrowhead: 1
    xaxis:
      title: Temperature
    yaxis:
      title: Pressure
    zaxis:
      title: Humidity

[aforell57]

Thanks!
That was very useful.
Cheers!

[kimhey]

Thanks @dbuezas for an excellent tool. I was also looking for a way to use your implementation to make ordinary 2D scatter plots (only x-y). In your answer above I understand it as you can, but in your example code it still shows a 3D-scatter. Will you explain a bit more please?

[dbuezas]

@kimhey change type: scatter3d to type: scatter or just remove it

[dbuezas]

BTW, if you need a scatter plot, it is likely you'll also find histograms useful

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_temperature
    x: $fn ({ys,vars}) => ys
    type: histogram
title: Temperature Histogram last 10 days
hours_to_show: 240
ha_theme: true
raw_plotly_config: true
layout:
  margin:
    t: 20
    l: 50
    b: 40
  height: 285
  xaxis:
    autorange: true

[jorelvaccaro]

@dbuezas This is great, thank you for this. Quick note, I just got this working in Home Assistant with the Plotly Graph Card repository in HACS, but I had to remove the "-dev" from the end of the type: line to get it working. Thanks again!

[dbuezas]

Oh, good catch!
I have the card installed twice (one for development). I fixed the yaml above now.

[selzem]

I love scatter plots! Thank you for making them available in your cards for HA.
I show the supplied heat of my heat pump vs. the outside temperature in the performance field of the heat pump.
Questions: 1) How can I exclude the data points, when the heat pump is not running and heat load is 0 kW?
2) Is there a simple way to color the dots in relation to time and / or maybe change their size? Current point green and big and older points fading into red or transparent and getting smaller? I think I saw something in one of the many questions, but I cannot find it anymore.
3) How do I move the legend to a different position?

[dbuezas]

Hi, happy to hear you're enjoying the card!

1. to filter the zero points you can

entity: 
  - sensor.xyz
    filters:
       - filter: y > 0 # or you could do 0.5 if they are not always exactly zero

2. color the dots in relation to time

entity: 
  - sensor.xyz
    marker: 
       color: $ex 'xs.map(date => +date)'

similar with size, but you'll have to do some maths.

3. move legend:

 legend:
   orientation: h
   bgcolor: transparent
   x: 0
   y: 1
   yanchor: bottom

See defaults here
Manual here and here

Updated: fixed indentation

[selzem]

Thanks for the quick reply David! 1 and 3 are quite simple solutions. For 2 I will need a bit more time to make it work, but I will manage with you pointing me in the right direction.

[selzem]

It took me longer than I would like to admit, but I finally managed to make the code work.
Here is what I used to make the scatter plot:

type: custom:plotly-graph
entities:
  - entity: sensor.smart_hygrometer_11ef_temperature
    filters:
      - resample: 15m
    internal: true
    fn: $fn ({ xs, ys, vars }) => { vars.y_axis = ys; vars.xs = xs; }
  - entity: sensor.openweathermap_temperature
    filters:
      - resample: 15m
    internal: true
    fn: |-
      $fn ({xs, ys, vars }) => { vars.x_axis = ys;
       const sz = []
       const op = []
       const clr =[]
      for (let i = 1; i < xs.length; i++){
              sz[i] = 10*((i)/ xs.length)+1;
              op[i] = 0.9*((i)/ xs.length)+0.1;
              if(i < xs.length -1)
              {clr[i] = "darkseagreen"}
              else
              {clr[i] = "crimson"}
       }
       vars.sz = sz;
       vars.op = op;
       vars.clr = clr;
      }
  - entity: ''
    name: Temperature living room vs. outside
    x: $fn ({ vars }) => vars.x_axis
    'y': $fn ({ vars }) => vars.y_axis
    type: scatter
    mode: markers
    marker:
      size: $fn ({ vars }) => vars.sz
      opacity: $fn ({ vars }) => vars.op
      color: $fn ({ vars }) => vars.clr
      line:
        width: 0
  - entity: ''
    name: Ideal temperature
    x:
      - -10
      - 21
      - 21
      - -10
      - -10
    'y':
      - 20.5
      - 20.5
      - 19.5
      - 19.5
      - 20.5
    line:
      color: darkslateblue
hours_to_show: 24
raw_plotly_config: true
ha_theme: true
layout:
  margin:
    t: 10
    l: 70
    r: 0
    b: 70
  height: 500
  yaxis:
    title:
      text: Temperature living room °C
  xaxis:
    title:
      text: Temperature outside °C
    autorange: true
  legend:
    orientation: h
    bgcolor: transparent
    x: 0
    'y': 1
    yanchor: bottom

Since I use two colors for the markers the marker in the legend is shown as black or is there another reason and it can be fixed?

[dbuezas]

Very cool! 💪
You can format your js like this to make it easier to read:

({ xs, ys, vars }) => {
  vars.x_axis = ys;
  const sz = [];
  const op = [];
  const clr = [];
  for (let i = 1; i < xs.length; i++) {
    sz[i] = 10 * (i / xs.length) + 1;
    op[i] = 0.9 * (i / xs.length) + 0.1;
    if (i < xs.length - 1) clr[i] = "darkseagreen";
    else clr[i] = "crimson";
  }
  vars.sz = sz;
  vars.op = op;
  vars.clr = clr;
};

[selzem]

1. to filter the zero points you can

entity: 
  - sensor.xyz
    filters:
       - filter: y > 0 # or you could do 0.5 if they are not always exactly zero

This is actually not working for the scatter plot since the values from x_axis and y_axis come from different senors and this messes up the indexes, between the two arrays.
I had to program it in a separate function to have the right values for both sensors:

  - entity: sensor.xyz
    internal: true
    filters:
      - resample: 5m
    fn: $fn ({ys, vars }) => { vars.y_axis = ys;}
  - entity: sensor.abc
    internal: true
    filters:
      - resample: 5m
    fn: |-
      $fn ({ xs, ys, vars }) => {vars.x_axis = ys;
       const val_x_axis = []
       const val_y_axis = []
       j = 1
      for (let i = 1; i < ys.length; i++){
              if(vars.y_axis[i] > 0.1)
              {val_x_axis[j] = vars.x_axis[i];
              val_y_axis[j] = vars.y_axis[i];
              j++;}
       }
       vars.val_x_axis = val_x_axis;
       vars.val_y_axis = val_y_axis;
      }