Looking for an 'energy distribution' chart for a home similar to


I'm searching for something like this energy distribution chart that I can push my data into, so that it can render a pretty 'animated flow' of energy amongst power consumption and power generation sources. pic attached. any hints or pointers are welcome, or suggestion that I would have to write one myself?? (hints here too would be great)...

Original picture taken from here - click expand to see the pic - sacrilege it talks about HA - please don't ban me :slight_smile:



A couple of questions

  1. Where does your power data come from ?
  2. What are you running node red on ?

I looked around a lot earlier in the piece for something like this in Javascript and could not find anything - just did another quick search now and nothing either.

If that is important to you i would suggest maybe looking at spooling up a Docker instance of HA for this and feed your energy data into it through MQTT or you could look at the EmonCMS eco system as they have a number of solutions


The power data comes from my own flows, including solar, battery, grid/consumption meter, and hybrid inverter for load etcetera

I get it in terms of adding in a docker/HA or EmonCMS, but thought I'd try to stay 'pure' in NR...

Is it specifically the graphics that you are asking about. If so, I haven't used it but I believe that you can use node-red-contrib-ui-svg for such thngs. If you search the forum for svg you may find some useful posts.


I had been talking with @hotNipi some time ago to implement a ui node for this Due to a lack of free time we did never continue with it. Perhaps he still has unfinished draft stuff that allows you to get started But perhaps not...

@BartButenaers do you mean a node for fetching the data, or for generating graphics as shown by the OP?

It was supposed to be a ui node, so only visualization.
I thought that hotnipi had created a ui-template node mockup at the time being, which you could perhaps use as a starting point.
But I must have been mistaken, because I cannot find such an example flow anymore.
So forget about it. Sorry for the noise ...

Am I right in thinking that the svg node can be used to generate displays such as the OP has shown?

Yes, but you will to draw it yourself and do the animations of the wires yoursel also...

OK, it isn't me that wants it, but I had suggested to the OP that the node might be capable of doing it. So the answer is yes it can, but it is not a trivial task.

1 Like