Beautiful data visualisation in Home Assistant

Data visualisation may not be important for automating your home but it can greatly help you understand your sensor data . While I must agree with ‪@greatscottlab‬ that Home Assistant is lacking internal data visualisation tools, HACS on the other hand has lot more available options.
Today we will look at 5 HACS data visualisation components to make your data speak for itself.
Mini Graph Card
⏵github.com/kalkih/mini-graph-...
Apex Charts
⏵github.com/RomRider/apexchart...
Plotly Graph Card
⏵github.com/dbuezas/lovelace-p...
Sankey Chart
⏵github.com/MindFreeze/ha-sank...
Horseshoe Card
⏵github.com/AmoebeLabs/flex-ho...
00:00 - Intro
00:30 - Data visualisation in Home Assistant
01:34 - Mini Graph Card
04:57 - Apex Charts
07:45 - Plotly Graph Card
10:40 - Sankey Chart
13:24 - Horseshoe Card
16:11 - Final thoughts
Don't forget to give me a thumb up if you liked this video, subscribe if you still haven't and I'll see you next time!
Have fun!
BeardedTinker
____________________________________________________________
🧡 If you would like to support me, consider becoming KZbin Channel member! 🙏
kzbin.info...
____________________________________________________________
📣Follow me on other platforms📣
✅Twitter: @BeardedTinker
✅Discord: / discord
____________________________________________________________
(*) if any, should indicate links that are affiliated and/or tracked links. They don't cost you anything extra but provide small income to get this channel going, and finance future projects I make. Or are used by companies to see who is visiting website as result of seeing this video.
#HomeAssistant #datavisualization

[@AmoebeLabs]

A nice overview of available visualizations and very nice to see you included my card in your video 😀

[@BeardedTinker]

Thank you for the comment and of course - thanks for the Horseshoe Card :) It really was a nice discovery!

[@Bruno_AFK]

I'm glad that someone from Croatia is into HA and automation systems. Good job :)

[@BeardedTinker]

Thank you very much Bruno! 😃

[@AllenRobberson]

I love how you find stuff that I would never think of. Love your videos so much.

[@BeardedTinker]

Thank you very much Allen! :) It's always fun to find some hidden gems.

[@makeitworktech]

I just recorded a video where I mentioned Apex Charts Card! This is a great subject to cover! Great video, BT!

[@BeardedTinker]

I'll check it out when it goes live! Thank you Aaron :)

[@clairerovic]

Like always, really enjoyed this. So glad you showed horseshoe as it does look clean especially when you want to add secondary data.

[@BeardedTinker]

Thank you very much Claire! And you are right - they are really nice!

[@chrisrosenkreuz23]

thank you for not using a bell chime when suggesting subscription on screen. I love you for this (as well as your top notch content, ofc)

[@BeardedTinker]

:) Chirs, yeah, no bell - but maybe I should try and for fun once add train horn or something :)

[@Tntdruid]

So many cool add-ons 😄 Thanks for the quick guide for them 👍

[@BeardedTinker]

Glad you like it! So many interesting components!

[@kerbalette156]

Thankyou for showcasing all of these. I had no idea there was that many graphs

[@BeardedTinker]

Thank you for the comment! And BTW - as Irek reminded me - there are 2 more internal ones, I failed to mention in the video but could be see on my background - gauge card and sensors.

[@ireklebiodzik4489]

Thanks for showing some new components which are so powerful. By the way, you forget about two native components of HA :) Sensor and gauge. Looking forward for next videos.

[@BeardedTinker]

So true!!! And those same gauges were heavily featured in video too, yet I failed to mention them :) Thanks for the comment Irek!!!

[@Einstine1984]

Those are some awesome additions to my system. Thank you!

[@BeardedTinker]

Glad you like them Ariel! Thank you!!!

[@SlackerLabs]

Awesome! I might need to make some of these.

[@BeardedTinker]

Thank you! And, how is the ZHA working along :) Loved the video!

[@MrDenisJoshua]

So nice this video, I like presentations of HA cards. Thanks a lot

[@BeardedTinker]

Glad you like it!

[@iainhay2823]

I’m very fond of the mini graph card, extremely useful. My smart home system really suffers with the lack of attention I spend on the front end, I really must solve that! Very helpful video, time for me to knuckle down and sort it I think 👍

[@BeardedTinker]

Same here! Need to rethink my UI completely, unclutter it and make it easier and prettier. Thank you Iain for the comment!!!

[@davidlangley833]

I love the Apex Charts card, can be hugely complex, but trial and error gives awsome results, as well as historical data it can also display off-set day's, this is great for future weather data.

[@BeardedTinker]

Need to play a bit more with it. Actually I need to overhaul all of my UI :)

[@patperry1]

Beautiful data visualization!

[@BeardedTinker]

Thank YOU very much, much appreciated!!

[@Claudiu.]

Thank you for this inspiration and all the others you showed so far. I'm going to try out the horseshoe card with the gauge and data inside it. Currently occupying 2 columns to show energy data, when they should in theory easily fit inside a single one. Cheers and keep up the good work!

[@BeardedTinker]

Thank you very much Claudiu! I will probably redo my climate card with it too... But need to dig a bit deeper and see other options that it has. And also, completely redo my energy tab that I have for a long time. Too many data and graphs there :)

[@Claudiu.]

Oh yes - tinkering and trying things out will sure result in 'test' dashboards that you say will be temporary .. but end up being there forever :) Hope to clean them up one day too

[@BeardedTinker]

@@Claudiu. temporary :) Ohh can't even remember what it means any more :)

[@ianwilliams7740]

very useful stuff. thank you for your work

[@BeardedTinker]

Glad you liked it Ian! Thank you!!!

[@johnnynobels]

Great and inspiring video. As a beginner, till now I didnt yet looked into graphs. This gives a real good start. Would appreciatie to know more about how long sensor data are storend, eventually how to prolong that storage.

[@BeardedTinker]

That is part of long-term statistics. If sensors match specific category, they should save data for longer period of time. I don't have video on that (I think) but check here documentation: developers.home-assistant.io/docs/core/entity/sensor/#long-term-statistics

[@SmartHomeJunkie]

Thanks again Andrej! Always great to use these. I also used Grafana for a while, but because you cannot easily show the graphs of Grafana on your dashboard I'm not using it anymore.

[@BeardedTinker]

My pleasure Ed! I still have Grafana but also not using it that much anymore for anything HA related. I do stil have some dashboards but for Storj nodes I host.

[@JosefZvolanek]

Super! Thank you very much!

[@BeardedTinker]

Thank you for the comment Josef!

[@PaisitW]

Good one!

[@BeardedTinker]

Thank you! Cheers!

[@TheFlybyman]

Thanks!

[@BeardedTinker]

Thank you very very much 😀

[@EsotericArctos]

I think it is good having these visualisations in HACS and not cluttering up the main Home Assistant core. A lot of people doing Home Automation don't want a lot of graphs, and a lot don't even have a dashboard. Better to keep the core HA less cluttered and have them focus on the important stuff, and have the community do the visualisations like this. It just works so well this way and allows someone to focus on the graphing, rather than it being bundled in with a lot of other things

[@BeardedTinker]

HA & HACS - that's constant pros/cons game of people heating HACS or loving it. Some would like everything end up in HA as internal, but I like that you can add/remove whatever you want or need.

[@EsotericArctos]

@@BeardedTinker I agree with you. I think a modular system is not only neater, better use of resources. HomeSeer (commercial software) also works on the module system where you download the modules you need and install them, rather than everything being cluttered into the core.

[@romanykemp9042]

Good job on this video. Wished I had watched this last week when I started playing around with creating lovelace dashboards. This issue where the gui editor may or may not find a custom card - ran into that last week and wasted time on why. Why do you need to refresh your browser after a card download - just simple things that you.took.the.time.to.explain!

[@BeardedTinker]

Browsers are strange things. They can keep cached pages and libraries even when they shouldn't. IMHO this is currently the biggest issue with UI.

[@ochjoo77]

Awesome stuff, going to try all of them! So far only use the mini graph and find it looks a bit too simple.

[@BeardedTinker]

Have fun with them! I'm still playing with some options.

[@ictstelucjam3604]

Thanks for this video and explanation. I have a few graph cards, but this is shining a different light of them all. Maybe you know it offcourse, but if don´t I want to tell you. I saw in the video that you move all the code lines to the right, line for line. But you are formilliar with the SHIFT + TAB function? If you do, forget i wrote this 🙂

[@BeardedTinker]

Yeah, didn't plan this one to be another HACS video, but I think it was fun at the end. A lot of options and variations. About Shift+TAB - creature of habit. Since I had to remove - on first line, I just continued with delete instead of it :) Old habits die hard...

[@blakebowden955]

Love the video - thank you! Is there a way to send an image (snippet?) Of one of the graphs to your phone, or any other media? Idea being instead of having to log into HA, you can have graphs with data delivered to your phone at 'x' time? Thanks!

[@BeardedTinker]

Not that I know of. Sending text is no issue, but creating image out of graph - that would require screen capture, cropping and I haven't seen any component so far that can do that. Maybe I've just overlooked, but...

[@guylast9516]

Nice work with these. I noticed you have climate cards setup. Are you able to create a video for it or share the yaml? I am new to HA but recently added the Rm4 Pro and RM mini's to control the Air cons. Got the scripts done but just having a hard time bringing it together in one card on lovelace.

[@BeardedTinker]

Not really sure about this one - I'm using out of box functionality of tado (and integration). It's just climate card in my case to control AC.

[@naronaroyan323]

How do we get a gauge bar to show battery levels and have a thin car that is hight: 10px max

[@timtaler8439]

I really liked this one, thanks a lot. I don't have the time to try out each entry in HACS, so I'm happy if someone shows me what is in there. I've seen in one of your videos a card showing the amount of kWh and at the same time the amount of money it costs. What kind of card was that? Thanks.

[@BeardedTinker]

Glad to hear it Tim! As for the card you are looking for - not sure. I don't have any graphs for that, instead I use entities card to show power consumption and cost of that. And also, in Energy tab, I have that data present there too - but that's HA internal integration - www.home-assistant.io/dashboards/energy/

[@timtaler8439]

@@BeardedTinker Thanks again. It could be that it is the card called 'Energy sources table'. I'll give that a try.

[@ivlis32]

Great video. Plots are not the strongest side of home assistant, this is unfortunate. And even if you can add custom cards, you cannot change how the plots are looking in the pop up windows and in history, which is not great. Again unfortunately plots are not in priority of ha devs.

[@BeardedTinker]

You are 100% right on that one. I know that UI designers are working on new internal graphs (and also weather card and climate control too) - but current plots are definitely very Spartan :)

[@TonEnsink]

Thank you for these great ideas for graphs. Nicely explained ... however ... in the final graph you show us that "De Maan" (The moon) has a pressure between 950 and 1050%. Perhaps the entity has to show 0-100 % for full moon , etc. ... unless you really want to show us the pressure of the moon.

[@BeardedTinker]

;) But you probably missed where I wrote that it should be hPa . Yeah, didn't rename the example for it, but i think thumbnail has fixed name and measurement unit :)

[@TonEnsink]

@@BeardedTinker No worries.

[@mp71589]

How did you made those mini gauges on upper left corner at video point of 32 seconds?

[@BeardedTinker]

These are Gauge card from HA. I think that they are internal ones - not HACS cards. I just stacked them by using horizontal-stack card, so they are smaller than they normally are.

[@warter75]

I like your video but some detailed example from your setup would be petty useful. I mostly use mini graph card but apex is also very nice.

[@BeardedTinker]

Had to cut it short unfortunately as people don't like long videos.

[@TheFlybyman]

On all your video everything looks so easy. But I not have mini-graph-card when I want to add this. So nothing works for me :(

[@BeardedTinker]

Do you have HACS installed - hacs.xyz/ ? Mini graph card is frontend custom component that can be installed via HACS - not standard par of HA.

[@TheFlybyman]

@@BeardedTinker ooohhh frontend ! :) Thanks!

[@finanz-entspannt]

hey, could you share your code of the mini graph card with night and day situation?

[@BeardedTinker]

Sure, here it goes: color_thresholds: - color: '#039BE5' value: 0 - color: '#0da035' value: 600 - color: '#e0b400' value: 1200 - color: '#e45e65' value: 2400 color_thresholds_transition: hard entities: - sensor.shelly_em_channel_1_power - color: rgba(0,0,255,1) entity: binary_sensor.dark_outside show_line: false y_axis: secondary group: false hour24: true hours_to_show: 24 line_width: 4 points_per_hour: 4 show: extrema: true fill: fade icon: true labels: false name: true state: true state_map: - label: Day value: 'off' - label: Night value: 'on' style: | ha-card { border: solid 2px var(--primary-color); } type: custom:mini-graph-card

[@ciliosrainha]

If I want to know how long the sensor stays on ON and OFF, how do I do it?

[@BeardedTinker]

There are few ways - I do it like this: github.com/BeardedTinker/Home-Assistant_Config/blob/master/entities/sensors/utilities/living_room_lights_on_today.yaml