A graph widget for HADashboard

For me, it works with +1 but not with 0. Very strange indeed. I guess the conversion by the Date function takes the time offset in the string into account and plotly does not.

Hi Tomas,

I recently updated my Python and Homeassistant and now the Graph isnt working anymore :frowning:
Console failure messages are:

application.js:3517 Access to XMLHttpRequest at 'http://192.168.0.33:8123/api/history/period/2020-11-25T20:20:14?authSig=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNmQ2MDFmNWZkMDE0ODk0YTUxNmEzYWVlZTBhNDdmNiIsInBhdGgiOiIvYXBpL2hpc3RvcnkvcGVyaW9kLzIwMjAtMTEtMjVUMjA6MjA6MTQiLCJpYXQiOjE2MDY0MTg0MTUsImV4cCI6MTYwNjQxODQzNX0.KV29cvf1kioJyBQcx-LREyGbQAsp5Hh4zsUzEOvkgc8&filter_entity_id=sensor.current_temperature_wohnzimmer' from origin 'http://192.168.0.33:5050' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
ws.onmessage @ application.js:3517
application.js:3517 GET http://192.168.0.33:8123/api/history/period/2020-11-25T20:20:14?authSig=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNmQ2MDFmNWZkMDE0ODk0YTUxNmEzYWVlZTBhNDdmNiIsInBhdGgiOiIvYXBpL2hpc3RvcnkvcGVyaW9kLzIwMjAtMTEtMjVUMjA6MjA6MTQiLCJpYXQiOjE2MDY0MTg0MTUsImV4cCI6MTYwNjQxODQzNX0.KV29cvf1kioJyBQcx-LREyGbQAsp5Hh4zsUzEOvkgc8&filter_entity_id=sensor.current_temperature_wohnzimmer net::ERR_FAILED
ws.onmessage @ application.js:3517
application.js:3517 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://192.168.0.33:8123/api/history/period/2020-11-25T20:20:14?authSig=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNmQ2MDFmNWZkMDE0ODk0YTUxNmEzYWVlZTBhNDdmNiIsInBhdGgiOiIvYXBpL2hpc3RvcnkvcGVyaW9kLzIwMjAtMTEtMjVUMjA6MjA6MTQiLCJpYXQiOjE2MDY0MTg0MTUsImV4cCI6MTYwNjQxODQzNX0.KV29cvf1kioJyBQcx-LREyGbQAsp5Hh4zsUzEOvkgc8&filter_entity_id=sensor.current_temperature_wohnzimmer'.
    at WebSocket.ws.onmessage (http://192.168.0.33:5050/compiled_javascript/application.js:3517:10)

If i try to reach the API-Link manually it shows entries of the database, although i am getting COR-Erros.

I am quite sure, i set up the configuration.yaml correct, but just to be sure my config files:

configuration.yaml:

http:
#  base_url: 192.168.0.33:8123
  cors_allowed_origins:
    - http://192.168.0.33:5050
    - http://192.168.0.33:8123

appdaemon.yaml:

logs:
  error_log:
    filename: /home/homeassistant/.homeassistant/conf/errors.log
    log_generations: 1
  main_log:
    filename: /home/homeassistant/.homeassistant/conf/appdaemon.log
    log_generations: 1
appdaemon:
  logfile: STDOUT
  errorfile: STDERR
  disable_apps: 1
  latitude: 51.6747074
  longitude: 8.347194
  elevation: 81
  time_zone: Europe/Berlin
  plugins:
    HASS:
     type: hass
     ha_url: http://192.168.0.33:8123
     cert_verify: False
     token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI3YzI5M2VlODU2MDU0ZWIwOTgzOWEzYTJkOGVkYjZkZSIsImlhdCI6MTYwNjM0NDg3NCwiZXhwIjoxOTIxNzA0ODc0fQ.6skxIifldPjqQTkVQRb1La9NELxBkCwzlpEs2sTShm0
hadashboard:
  dashboard_dir: /home/homeassistant/.homeassistant/conf/dashboards
  dash_compile_on_start: 1
  dash_force_compile: 1
http:
  url: http://192.168.0.33:5050

admin:
api:

I had to make new Acces Tokens and to be sure I did this twice now, but without success.

Do you have an idea?

Thanks in advance,
Chris

Hi Christian,

This should be a CORS issue. This is the only thing I need to avoid the CORS error:

http:
  cors_allowed_origins:
    - http://192.168.1.45:5050      # My Appdaemon url

If I remove the Appdaemon url from cors_allowed_origins, I get the CORS error. Looks like you have your config correct, so I am not sure what is causing the CORS issue.

please check if you didnt also update AD from AD 3 to AD 4.
because you use appdaemon.yaml for AD 3, and if you updated python i doubt if you use AD 3.

if you use AD 4 then your AD isnt running with this appdaemon.yaml
so please check if AD is running in your logs, and find out what version you use.
if you are using AD 4 then please correct the appdaemon.yaml according to the configuration in the docs.
https://appdaemon.readthedocs.io/en/latest/index.html

edit: sorry i got confused because you left some settings from AD 3 in the AD 4 configuration.
i did look to fast.
still look in your logs if AD is running correct.
you got admin setup, so simply going to the url: http://192.168.0.33:5050 will also tell you if AD is running correct.

Hi Rene,
Hi Tomas,

Appdaemon is running in Version 4.0.5. Logs looking fine:

2020-11-27 15:22:32.612816 INFO AppDaemon: New client Ext Heating connected
2020-11-27 15:22:30.841076 INFO AppDaemon: function [get_dashboard] finished in 62 ms
2020-11-27 15:22:30.778822 INFO AppDaemon: Loading custom skin 'default'
2020-11-27 15:22:28.396720 INFO AppDaemon: Client disconnection from Admin Client
2020-11-27 15:22:13.839567 INFO AppDaemon: Processing restart for HASS
2020-11-27 15:22:13.780528 INFO HASS: All startup conditions met
2020-11-27 15:22:13.778791 INFO HASS: Startup condition met: hass state=RUNNING
2020-11-27 15:22:12.455243 INFO HASS: Evaluating startup conditions
2020-11-27 15:22:11.628605 INFO HASS: Connected to Home Assistant 0.118.3
2020-11-27 15:22:09.293271 INFO AppDaemon: New client Admin Client connected

So Appdaemon seems to be ok, all my other Dashboards are working like before. Only the Graph-Widget is not working. As there is no difference in configuration campared to the old HA Version I am a little confused :frowning:

did you clear the cache and restart the dashboard after you did reinstall??
(more then once, because sometimes it doesnt go as it should)

and also restarted your device (more then once) because cors issues can be difficult.

and to make sure renew your token, because HA doesnt allow AD( or actually this widget) to look at the HA website.

and i just remembered, did you also change the token in the variables.yaml from your skin??

Hi Rene,

thanks for your ideas.

I cleared the cache, restarted the device and renewed all tokens (also in vaiables.yaml.).
I did everything several times now. Also I tried different machines with different browsers.

The result is still the same: the graph doesnt show up :frowning:

I am still getting:

application.js:3517 Access to XMLHttpRequest at 'http://192.168.0.30:8123/api/history/period/2020-11-30T21:28:41?authSig=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI0NTJhNjFmZmM0ZjU0NDY3OWZlOTM1ZjE2NWVmYjdmYSIsInBhdGgiOiIvYXBpL2hpc3RvcnkvcGVyaW9kLzIwMjAtMTEtMzBUMjE6Mjg6NDEiLCJpYXQiOjE2MDY4NTQ1MjEsImV4cCI6MTYwNjg1NDU0MX0.kQtbDVT_D61zOEXdQW0OrTEKgXhIWu5Oiv189IrmBnU&filter_entity_id=sensor.current_temperature_schlafzimmer' from origin 'http://192.168.0.30:5050' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
ws.onmessage @ application.js:3517
application.js:3517 GET http://192.168.0.30:8123/api/history/period/2020-11-30T21:28:41?authSig=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI0NTJhNjFmZmM0ZjU0NDY3OWZlOTM1ZjE2NWVmYjdmYSIsInBhdGgiOiIvYXBpL2hpc3RvcnkvcGVyaW9kLzIwMjAtMTEtMzBUMjE6Mjg6NDEiLCJpYXQiOjE2MDY4NTQ1MjEsImV4cCI6MTYwNjg1NDU0MX0.kQtbDVT_D61zOEXdQW0OrTEKgXhIWu5Oiv189IrmBnU&filter_entity_id=sensor.current_temperature_schlafzimmer net::ERR_FAILED
ws.onmessage @ application.js:3517
application.js:3517 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://192.168.0.30:8123/api/history/period/2020-11-30T21:28:41?authSig=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI0NTJhNjFmZmM0ZjU0NDY3OWZlOTM1ZjE2NWVmYjdmYSIsInBhdGgiOiIvYXBpL2hpc3RvcnkvcGVyaW9kLzIwMjAtMTEtMzBUMjE6Mjg6NDEiLCJpYXQiOjE2MDY4NTQ1MjEsImV4cCI6MTYwNjg1NDU0MX0.kQtbDVT_D61zOEXdQW0OrTEKgXhIWu5Oiv189IrmBnU&filter_entity_id=sensor.current_temperature_schlafzimmer'.
    at WebSocket.ws.onmessage (http://192.168.0.30:5050/compiled_javascript/application.js:3517:10)

Although there are COR Errors, I can still access my database when I copy the access link with the token manually in my browser. So the access is working, but still I have the COR failures and graph isnt showing up. It doesnt matter what cors are allowed in my configurations.yaml.

I thought maybe it has something to do with the “base_url” in configurations.yaml, because it is deprecated now, but was used in my old HA config. But switching to internal_url or external_url or both, didnt help:

homeassistant:
  internal_url: http://192.168.0.30:8123
  external_url: http://192.168.0.30:8123

I also tried all of the following versions:

http:
  cors_allowed_origins:
    - http://192.168.0.30:5050
    - http://192.168.0.30:8123
    - http://localhost:8123
    - http://192.168.0.30:5050/api/
    - http://192.168.0.30:8123/api/
    - http://localhost:8123/api/
    - http://192.168.0.30:5050/api
    - http://192.168.0.30:8123/api
    - http://localhost:8123/api

As you may have noticed I also switched my IP adress from 33 to 30 in the end with external configuration with my router and switching all config entries to this IP with no luck.

Any new ideas appreciated.

Best regards,
Chris

first you need to understand the problem.

a cors error doesnt say anything about if a site can be reached.

cors errors show up when a website from 1 webserver (dashboard) tries to access webinformation from another server (HA)
the browser doesnt allow that, unless the other server gives information that its allowed.
so in this case i guess there is some problem with HA not allowing cors.

so in this case its about HA configuration and the cors_allowed_origins there not working.
all that should be there is the url that you have set in http for dashboard ( http://192.168.0.30:5050)

i cant think of any reason why it shouldnt work, accept that the cors settings in configuration.yaml dont work anymore.

HA blocked http://192.168.0.30:5050 because cors wasnt set for that url.
and you have it set.

noticed this in front of the COR messages:

jquery-3.1.1.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

XMLHttpRequest is used in basehagraph.js:

				if (msg['success'] == true){
					var path = msg['result']['path']
					var url = self.http_scheme  + "://" + BASE_URL + path + filter
					var xhr = new XMLHttpRequest() 
					Logger(self,  url)
					xhr.open("GET", url, false)
					xhr.send()
					var res = JSON.parse(xhr.response)
					Logger(self, res)
					callback(self, res, index)

Is this the problem?

Regards,
Chris

This is still just a warning and has been around for 6 years. The correct way to make a request is to use a callback and I have implemented that in a new version of the widget, but it is still only a warning and not the cause of the CORS error.

Looks like others had similar issues with CORS specifically for the /api/history endpoint: History not shown: No 'Access-Control-Allow-Origin' header is present on history API call · Issue #29382 · home-assistant/core · GitHub

and here: CORS preflight request not supported on the /api/history endpoint · Issue #39727 · home-assistant/core · GitHub

Yeah baby!

In your links I found the answer.

Its explained here:

I needed to go here: homeassistant/components/history/init.py

and add cors_allowed = True

so it looks like:

    url = "/api/history/period"
    name = "api:history:view-period"
    extra_urls = ["/api/history/period/{datetime}"]
    cors_allowed = True

    def __init__(self, filters, use_include_order):
        """Initialize the history period view."""

The file to change can be found here:
/srv/homeassistant/lib/python3.8/site-packages/homeassistant/components/history/__init__.py

I edited it and restarted the device and the graph showed up.

Thanks for your help.
Christian

2 Likes