3D graph for sensor per day

[bjkluft]

Hi,
First of all this add-on looks very promising! The amount of options is huge, giving us a lot to play with. However I do have troubles starting with a graph I would love to create. The idea is as the image below. I have the amount of energy generated with my solar panels and i would like to be able to plot them per day over time. So the X-axis should be the days, the Y-axis the years and the Z-axis should be the amount of energy. The data is stored in a MariaDB (SQL) with one value per hour, so two columns: date (YYMMDD hh:mm:ss) and the recorded amount of energy.
Is it possible to create such a graph?

With many thanks,
Jeroen

[dbuezas]

Yes it should be possible.
See this: #298
And this: https://plotly.com/javascript/3d-surface-plots/

Good luck!

[bjkluft]

First of all, thank you for the reply.
My js knowledge is close to nothing and I'm not able to create the correct input. I know this is a large stretch, but maybe somebody can help me out. What I have is a data set of values and dates (every 5minutes a value is stored), what I want to achieve is an 3D overview of the max value per hour per day over the year. So the X-axis would be 24 hours, the Y-axis would be 365 days and the Z-axis the actual value (amount of energy from my solar panels).
I would be very grateful to whoever can get me started.

[dbuezas]

Maybe this gets you started

type: custom:plotly-graph
entities:
  - entity: sensor.electricity_usage
    period: hour
    statistic: max
    fn: |
      $fn ({ xs, ys, vars }) => {
        const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
        const days = Array.from({ length: 365 }, (_, i) => i + 1);
        const maxValues = Array.from({ length: 366 }, () => Array(24).fill(null));
        
        for (let i = 0; i < xs.length; i++) {
          const date = new Date(xs[i]);
          const hour = date.getHours();
          const dayOfYear = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 86400000)-1;
          const currentValue = +ys[i];
          
          if (maxValues[dayOfYear][hour] === null || currentValue > maxValues[dayOfYear][hour]) {
            maxValues[dayOfYear][hour] = currentValue;
          }
        }
        vars.x = hours; 
        vars.y = days;
        vars.z = maxValues;
      }
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
    type: surface
raw_plotly_config: true
hours_to_show: 1y
title: Solar Energy Output Over the Year
layout:
  height: 600
  margin:
    t: 50
    l: 50
    r: 50
    b: 50
  scene:
    xaxis:
      title: Hour of Day
    yaxis:
      title: Day of Year
    zaxis:
      title: Max Energy Output (kWh)

let me suggest you to do some iterations with chatGPT, it should be able to explain you what all the gibberish means :)

[dbuezas]

Oh, actually, the 5minute statistic is not stored forever. I think the minimum is hour.

[dbuezas]

Interesting idea by the way. I just put it to use with the mean heating energy per hour and It shows very nicely how in summer it only needs to heat water at 2 specific times of the day.

Kapture.2024-03-21.at.20.24.46.mp4

[bjkluft]

Thank you for the reply and code.
I did some digging and understand the code and what happens where.
However I don't get any output. In the attachment I have added the data of last month (as downloaded from the HA history). Do I have to " tell" the sensor somewhere to use the data of last year?

history.csv

[dbuezas]

Use the standard native card to make sure the data you need is in the HA database. The history and long term statistics are two different dbs

[bjkluft]

Oke, that makes sort of sense...
When I use the Plotly card for a default 2D graph it shows the data for only one week. How do I get the full (historical) data set? I have a mariaDB that stores all data.

[dbuezas]

See my previous answer:)

[bjkluft]

Thank you for the help!
It took a restart to be able to show the data, currently it is about one month back. But this is exactly what I wanted.

[dbuezas]

Very cool, remember that the 5minute period only stores a limited amount of data.

To remove the bar on the right, see https://plotly.com/javascript/reference/surface/#surface-showscale

[bjkluft]

How can I set my default view, regarding panning, tilting etc.?

[dbuezas]

Google "how to xyz in ploylyjs"

[dbuezas]

Kept open so it's easier to find

[commentsonly]

@dbuezas "Maybe this gets you started"

Sure these examples do work with the current version? I tried a couple of the examples recently and failed by 100% when trying to turn a lambda into a filter. So I felt dead lucky to see an example without lamba, but the result makes not much of a differnce at all. It does print the titlebar, that's it.

[dbuezas]

See here https://github.com/dbuezas/lovelace-plotly-graph-card?tab=readme-ov-file#lambda

[michas79de]

Very great, thanks for your work, @dbuezas !
But can you help me, maybe?
I'm using this on two different Home Assistant installations (the panels on the roof of my father's house, and my single balcony panel) for showing the solar power output. While one works fine the other one has only a blank card without any data besides the header.
Do you have any hints for me to change or to check?
You mentioned the use of a standard native card above. I'm not sure about it. I tried copying the code in a plotly card and also in a tile card and an entity card - with no difference / no success.

the working one and the other one:

The code is copied from above and except the entity ID (which is copy-pasted and double checked) exactly the same for both:

type: custom:plotly-graph
entities:
  - entity: sensor.shelly_plug_pv_power
    period: hour
    statistic: max
    fn: |
      $fn ({ xs, ys, vars }) => {
        const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
        const days = Array.from({ length: 365 }, (_, i) => i + 1);
        const maxValues = Array.from({ length: 366 }, () => Array(24).fill(null));
        
        for (let i = 0; i < xs.length; i++) {
          const date = new Date(xs[i]);
          const hour = date.getHours();
          const dayOfYear = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 86400000)-1;
          const currentValue = +ys[i];
          
          if (maxValues[dayOfYear][hour] === null || currentValue > maxValues[dayOfYear][hour]) {
            maxValues[dayOfYear][hour] = currentValue;
          }
        }
        vars.x = hours; 
        vars.y = days;
        vars.z = maxValues;
      }
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    z: $fn ({ vars }) => vars.z
    type: surface
raw_plotly_config: true
hours_to_show: 1y
title: Solar Energy Output Over the Year
layout:
  height: 600
  margin:
    t: 50
    l: 50
    r: 50
    b: 50
  scene:
    xaxis:
      title: Hour of Day
    yaxis:
      title: Day of Year
    zaxis:
      title: Max Energy Output (kWh)

BTW: There's no such thing like putting large images into spoilers here, isn't it?!

[dbuezas]

Try debugging step by step in chrome. See the debugging section in the readme

[michas79de]

I'm not sure, how to do this in detail. Got some help from ChatGPT with examples, which helped me to understand this debugging a bit better.
I tried with console.log and debugger, but just while trying it worked. And with "while" I mean the preview just while editing the yaml. IDK why. Removed console.log and debugger again. And it's working.
But sometimes after switching the Home Assistant tabs to a tab with this card, it's black at first. I have to refresh (F5) and then it appears. Strange.
I think i'll watch this for some time...

[commentsonly]

Got an idea, since when reading this it's very identical to what I run into with something completely differnt.
I got a hor+vert.stack combination containing 35 custom button cards where some of these do contain slider cards as custom fields.

And the issue I got with these is that by chance 50:50 the card content remains blank.
If using "old school" HA dashboard capabilities.
The strange fix for this is to move my card from either a "Masonry" or " horizontal layout card" onto that crap new "Sections" card.
After doing so and a single refresh of that page all works fine.

So I gave it a try with the code from @michas79de and well ..... it works as expteced.
Fails by 100% if in one of the old style views and simply works in the sections style.

And I bet google can't do much about that since they didn't invent the lovelace view styles.

And for reference .... the problem does exist here since perhaps 3-4 months ... looks to me as if being driven to migrate to the unbeloved new Sections views. :-)

Perhaps @dbuezas could check that? Till now I still thought it might be my fancy custom button card problem but now I found a second way to validate my own issue.

[dbuezas]

Oh, the webgl context may be crashing. Could you check the chrome console?

[commentsonly]

I'm not sure about how to use that but I played with the console for a while if I find a combination being
a) and error b) a name which tells me it got to do with ploty and c) contains WebGL..

There's an error (better said multiple ones) from plotly-graph-card.js
Details are.
plotly-graph-card.js?hacstag=413812496335:1673 Uncaught TypeError: Failed to execute 'uniformMatrix4fv' on 'WebGLRenderingContext': The provided value cannot be converted to a sequence.
at d.uniforms (plotly-graph-card.js?hacstag=413812496335:1673:4026)
at I.j (plotly-graph-card.js?hacstag=413812496335:2175:5989)
at P.draw (plotly-graph-card.js?hacstag=413812496335:2175:8407)
at Re (plotly-graph-card.js?hacstag=413812496335:1316:7957)
at ze (plotly-graph-card.js?hacstag=413812496335:1316:8845)

and another
plotly-graph-card.js?hacstag=413812496335:1673 Uncaught (in promise) TypeError: Failed to execute 'uniformMatrix4fv' on 'WebGLRenderingContext': The provided value cannot be converted to a sequence.
at d.uniforms (plotly-graph-card.js?hacstag=413812496335:1673:4026)
at I.j (plotly-graph-card.js?hacstag=413812496335:2175:5989)
at P.draw (plotly-graph-card.js?hacstag=413812496335:2175:8407)
at Re (plotly-graph-card.js?hacstag=413812496335:1316:7957)
at M.W.redraw (plotly-graph-card.js?hacstag=413812496335:1316:8952)
at wl.plot (plotly-graph-card.js?hacstag=413812496335:2181:49154)
at hu.plot (plotly-graph-card.js?hacstag=413812496335:2181:62572)
at vs.drawData (plotly-graph-card.js?hacstag=413812496335:7:185788)
at Pt.syncOrAsync (plotly-graph-card.js?hacstag=413812496335:6:17417)
at Zet (plotly-graph-card.js?hacstag=413812496335:7:287903)

and a bunch of warnings saying:

plotly-graph-card.js?hacstag=413812496335:2181 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See:
followed by endless lines.

Unsure if it was this what you asked for ... if not ... free free to enlighten my brain writing a step-by-step guide about how to use the console to get the relevant information.

[dbuezas]

Yeah no, I have no clue what this is :/

[commentsonly]

same for me .... I asked google and found a couple of similar issues all to do with 'uniformMatrix4fv'