Z-Wave graph (without the python)


Okay, this is beyond what I know of dagre-d3 at the moment. I will have to look at it tomorrow.

Does it only happen when you use your external address?

If you’re comfortable doing so, would you mind messaging me the value of the data object assigned at line 103?

  1. Put a break point on a line shortly after “var data=this.listNodes(this.hass);
  2. In the console, type in JSON.stringify(data)
  3. Copy the resulting string and send it to me in a message


The first js console error I get on my external url. Internal I get this

Uncaught TypeError: Cannot set property 'x' of undefined
    at HTMLElement.ready (zwavegraph2:128)
    at HTMLElement._enableProperties (properties-changed.js:315)
    at HTMLElement.connectedCallback (properties-mixin.js:203)
    at HTMLElement.connectedCallback (element-mixin.js:538)
    at Object.then (ha-panel-custom.js:75)


You said it worked in Safari right? When you got that message just now about “Cannot set property ‘x’ of undefined” is that in safari? or your normal browser?


Yea Safari is my backup or test. Chrome is what I mainly use. I just pinged you on HA Discord

And now for some reason, Safari is throwing the same error. All I did was remove those 2 lines and then reload both browsers. Safari came up once but looks like it didn’t load all the way. But I at least got something before.


Okay, sorry to do this, but I have to head off (work in the morning).

Since the latest version doesn’t work for you, I would suggest trying the original post, or the one in #5 on this thread. If you can send me the results of the JSON.stringify then I can plug that into my system and see what’s going on.

Failing that, I might change libraries again :slight_smile:


No worries. We can try it again tomorrow as I’m gonna log off too. I tried the original post too and it doesn’t load either.


This code worked perfectly fine for me in Chrome on Windows 10.
No restart of HA just swapped in the code and refreshed.

EDIT: Screenshot below


Thanks for letting me know @firstof9


I haven’t started with zwave yet but this look great. Any thought of making it a Hassio add-on?


Hi @tom_l I don’t use hassio myself so would have to set it up. I don’t think this would need to be packaged as an add-on though. I will try to take a look at next weekend see what I can do.


Works just fine in Hass.io for me. You can access the \config directory in Hass.io, then create the \panels directory and store the zwavegraph2.html file there.


Nice, this is working perfectly.

Just a small network now, as the main z-wave network I manage (at my parents house) now goes via a Vera (so that it stays online when rebooting/updating HA, also so I can put the controller in a central location in the house).

Screenshot from current z-wave testing network:


Okay, I see I need to make a minimum width :slight_smile:


This is cool, thanks! Two suggestions: maybe revisit the green square/round legend icons. To me it looked like additional nodes or something, it took a few minutes before I realized it was a figure legend. And maybe also highlight the connecting nodes themselves, additional to the already highlighted arcs?


This is really cool. About half way through the 2nd rewrite I started thinking I should have written it this way, but I’m waaay better at Python than I am at JavaScript, so I kept on.

If you end up putting this in a GitHub repository (or the like) I’ll link to it from my GitHub page with a recommendation as it’s easier to configure, and the display layout is just a matter of tweaking until you get it the way you like.

My network is below, a couple comments.

  • You might try putting the battery powered devices on the right as it unclutters the layout a little.
  • The failed node (Sideyard Sensor) isn’t showing failed per your legend.
  • The black on green of the second layer is hard to read on my screen.
  • I find the straight connection lines easier to follow and really like the mouseover highlighting they do, not sure if the library you are using supports anything like that.

Mine (old school):

The new hotness:

Nice job!


Thanks very much for the feedback @omenwild I was really hoping you wouldn’t mind me taking your code and running a different way with it :slight_smile:

Thanks for the suggestions, I will look at them this weekend. I really do need to setup a github repo at some point


So far I only have a few devices to determine the sort of range I can expect in my house. This has been an invaluable tool. Thank you.

One question, I have renamed my nodes in the front end and restarted but I am still getting the default names showing up in the graph and the device card. Am I doing something incorrectly?


That’s how it works, it’s using the “manufacturer name” + “product name” to populate the graph not the “node name”.

Likely an easy tweak to the code to use the node name instead. @NigelL would be the best to chime in on that tho.


Right-o, that’s why I asked. It looks like @OmenWild has done that in his example of “the new hotness”.


For the public record: I made no edits at all, just dropped it in place and loaded it. I’m on an older install still (0.75.1) if that makes a difference. Upgrading is on my short list, but my free time has been eaten by a new 3D printer lately. So much fun stuff to do, so little free time.