Graph widget for influxdb

I just started to publish some of my widgets. The first one is a graph widget that plots graphs of entities and uses influxdb as data source. This means that you need to have influxdb installed and configured in Home Assistant. See details here: https://www.home-assistant.io/components/influxdb/ The reason I am not reading the history from Home Assistant is that I wanted to be able to write more complex SQL queries, and using influxdb as data source is also much faster.


(Click on the image for higher resolution)

Features:

  • Add any number of traces to a graph
  • Zoom and scroll
  • hide/show individual traces
  • Automatically updates when new values are written to influx/when the entity is updated in Home Assistant
  • Can span over any number of columns
  • The height can be set for each widget
  • Supply your own SQL query to filter and group data

You can find the widget here: https://github.com/tjntomas/HADashboard-widgets

6 Likes

very very nice!!

just a few comments.

  1. you state that i should have influxdb installed and configured in HA. would be helpfull if you would tell some more about that. in HA components i find infulxdb sensor and history. and history save all states to a db (which would make my DB extremely big in notime.
  2. you have the db settings (these:
graph_influxdb_path: http://<URL_TO_YOUR_INFLUXDB_SERVER>:8086 # Example: 192.168.1.20:8086  or http://www.mydomain.com:8086
graph_influxdb_path_local: "http://<_LOCAL_URL_TO_YOUR_INFLUXDB_SERVER>:8086"

in the skin. to make the widgets more general it would be better to have those settings in the widget. that way the widget would work with every skin.

  1. i think that it would be wise to put these
Copy influxdb-latest.js and plotly-latest.min.js /from the custom_css folder) to your custom_css folder

into a subfolder with your widget name. that would keep things more clear.

otherwise an awsome job!

Thanks Rene!

You can define which sensors and other entites are logged to the influxdb. I only log the entities I use for graphs so the db does not grow so big. There are also strategies for downsampling the time series in influxdb itself to reduce space of the db.

Yes, I considered moving the dependencies to a subfolder but in my setup, I use these dependencies also in other widgets, but for the purpose of publishing the widget, I will move it to a subfolder to make it more general as per your suggestion.

I had the influx_paths in the widget before, but moved it to the skins since I got tired of having to copy it to each widget definition, but you are right, it belongs in the widget parameters. I was looking for a way to put it in appdaemon.yaml but couldnā€™t find I way to access it from the widget. It would be nice to be able to access the ha config from widgets. That way you could read the setup straight from the configuration.

The first version of the widget actually read the data from the home assistant db, but the db grew to big for my taste and was to slow for long time series. I will consider adding an option to use home assistant for the data source since I already wrote the code.

for others it could be helpfull.
i dont use the DB from HA at all.

its hard to read anything from the HA config, because there is no fixed place for that and if it isnt in a sensor somewhere you cant read it out.

appdaemon.yaml is also not really the place for such settings.
you can suggest it as a setting in a skin and then still set it in the widget.

in that case i would present it as an empty string in the skin.
people then have a choice where they fill that info.

i found the blog and the component that is needed for influx db, but in your description it could be helpfull for others when you add links to the pages that are needed to install and configure influx.

in the near future i will try it out for sure.

I updated the github page with details on configuring influxdb with an example of my config.

Having the option to put the influx_paths in the widget and in the skin is a good idea.

I also have the history component turned off in my config.

1 Like

I donā€™t know what I am doing wrong but I can seem to get the widget to show up in the dashboard. I can see the data in InfluxDB but the graph does show it is just blank and there is no error. Maybe this is a issue with appdaemon 3 has anyone tested this in this version?

Itā€™s built for Appdaemon 3. What messages do you get in the javascript console if you press F12 while using a browser?

You can replace the basegraph.js file with a new one I uploaded and then add

log: 1

to your widget definition and it will output some diagnostics in the javascript console.

Thanks tjntomas for the quick response i did the log and it look like it is getting blocked because i am using SSL on the HADashboard URL but the the link InfluxDB is not SSL looks like I either need to not use SSL or wait for a fix for the Hass.io addon to support SSL.

So after fixed the SSL issue now I am getting a unauthorized error

application.js:2826 GET http://192.168.169.136:8086/query?db=home_assistant&data=urlencode&pretty=false&q=SELECT%20value%20FROM%20"%"%20WHERE%20entity_id%20=%20ā€™processor_useā€™%20AND%20time%20>%20now()%20-1h 401 (Unauthorized)
InfluxDB_Data @ application.js:2826
draw @ application.js:2899
OnStateAvailable @ application.js:2596
success @ dashboard.js:219
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
A @ jquery-3.1.1.min.js:4
(anonymous) @ jquery-3.1.1.min.js:4
load (async)
send @ jquery-3.1.1.min.js:4
ajax @ jquery-3.1.1.min.js:4
WidgetBase.get_state @ dashboard.js:179
WidgetBase @ dashboard.js:355
basegraph @ application.js:2585
(anonymous) @ system_init.js:81
j @ jquery-3.1.1.min.js:2
k @ jquery-3.1.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.1.1.min.js:2
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
fire @ jquery-3.1.1.min.js:2
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
ready @ jquery-3.1.1.min.js:2
R @ jquery-3.1.1.min.js:3
application.js:2830 Uncaught TypeError: Cannot read property ā€˜0ā€™ of undefined
at InfluxDB_Data (application.js:2830)
at draw (application.js:2899)
at Object.OnStateAvailable [as initial] (application.js:2596)
at Object.success (dashboard.js:219)
at i (jquery-3.1.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
at A (jquery-3.1.1.min.js:4)
at XMLHttpRequest. (jquery-3.1.1.min.js:4)
InfluxDB_Data @ application.js:2830
draw @ application.js:2899
OnStateAvailable @ application.js:2596
success @ dashboard.js:219
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
A @ jquery-3.1.1.min.js:4
(anonymous) @ jquery-3.1.1.min.js:4
load (async)
send @ jquery-3.1.1.min.js:4
ajax @ jquery-3.1.1.min.js:4
WidgetBase.get_state @ dashboard.js:179
WidgetBase @ dashboard.js:355
basegraph @ application.js:2585
(anonymous) @ system_init.js:81
j @ jquery-3.1.1.min.js:2
k @ jquery-3.1.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.1.1.min.js:2
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
fire @ jquery-3.1.1.min.js:2
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
ready @ jquery-3.1.1.min.js:2
R @ jquery-3.1.1.min.js:3
application.js:2590 New value for sensor.processor_use: 1
application.js:2826 GET http://192.168.169.136:8086/query?db=home_assistant&data=urlencode&pretty=false&q=SELECT%20value%20FROM%20"%"%20WHERE%20entity_id%20=%20ā€™processor_useā€™%20AND%20time%20>%20now()%20-1h 401 (Unauthorized)
InfluxDB_Data @ application.js:2826
draw @ application.js:2899
OnStateUpdate @ application.js:2591
WidgetBase.on_ha_data @ dashboard.js:242
(anonymous) @ dashboard.js:57
webSocket.onmessage @ dashboard.js:53
(anonymous) @ reconnecting-websocket.min.js:1
h.onmessage @ reconnecting-websocket.min.js:1
application.js:2830 Uncaught TypeError: Cannot read property ā€˜0ā€™ of undefined
at InfluxDB_Data (application.js:2830)
at draw (application.js:2899)
at Object.OnStateUpdate [as update] (application.js:2591)
at basegraph.WidgetBase.on_ha_data (dashboard.js:242)
at dashboard.js:57
at Array.forEach ()
at a.webSocket.onmessage (dashboard.js:53)
at HTMLDivElement. (reconnecting-websocket.min.js:1)
at WebSocket.h.onmessage (reconnecting-websocket.min.js:1)

Whatt happens if you paste http://192.168.169.136:8086/query?db=home_assistant&data=urlencode&pretty=false&q=SELECT%20value%20FROM%20"%"%20WHERE%20entity_id%20=%20ā€™processor_useā€™%20AND%20time%20>%20now()%20-1h in your browser?

It asks for a username and a password which is a account in InfluxDB

Aha! Ok, I havenā€™t enabled authentication on my server since I am not exposing it, but then I need to add basic authentication to the http request and it should work. Just to test, try adding

&u=YOUR_USER_NAME&p=YOUR_PASSWORD 

to the url and see if authenticates. Then I will know how to implement it.

Yes that fixed the authorization issue now I get this error once it gets in

{ā€œerrorā€:ā€œmissing required parameter ā€œqā€ā€}

Ok, just try
http://192.168.169.136:8086/query?u=USERNAME&p=PASSWORD&db=home_assistant&data=urlencode&pretty=false&q=SELECT%20value%20FROM%20"%"%20WHERE%20entity_id%20=%20ā€™processor_useā€™%20AND%20time%20>%20now()%20-1h

If that fails, Iā€™ll have a look at the documentation.

The login now works but still getting this on the screen. I got this error even when I donā€™t use the username password parameters and logged in on the prompt. So this might be a separate issue.

{ā€œerrorā€:ā€œmissing required parameter ā€œqā€ā€}

Ok, pretty sure its an url encode issue. Iā€™ll try to encode it differently.

Last try before I have to look at the docs:

http://192.168.169.136:8086/query?u=USERNAME&p=PASSWORD&db=home_assistant&data=urlencode&pretty=false&q=select * from ā€œĀ°Cā€

This will only work if you have any temperature sensor in the db. You can try

select * from "%"

also or any other unit of measurement

So I changed it to Ā°F I get the following.

{ā€œerrorā€:ā€œerror parsing query: found ā€œ, expected identifier at line 1, char 15ā€}

When I use % I get the old error

{ā€œerrorā€:ā€œmissing required parameter ā€œqā€ā€}

Google seems to be aware of the problem, so Iā€™ll just have to check the docs!

Thank you tintomas so much for your help and your very prompt responses.