A graph widget for HADashboard

tjntomas · March 20, 2019, 8:13pm

You can also add the line

console.log(today.toLocaleDateString(), today.toLocaleDateString("sv-SE"))

before that line to get the two different date formats logged to the console.

daekka · March 20, 2019, 9:05pm

It works.

Thank you very much!

It is an awesome widget!!!

tjntomas · March 20, 2019, 9:07pm

Great!
I’ll update the file on github.

sanderjonkers · March 25, 2019, 7:19am

After installing this widget, I had the same issue as @daekka, and got a 401 error. However, I had to fix it by putting https://xxx.duckdns.org:5050 in cors_allowed_origins.

So, now the graph widget is loaded in my dashboard, however, the graph is empty. graph_widget_empty
I think I’ve got everything correct in my *.dash and variables.yaml files, so I don’t understand why the graph doesn’t show any data…

tjntomas · March 25, 2019, 7:44pm

Du you have the history component configured in configuration.yaml?

sanderjonkers · March 25, 2019, 8:36pm

Yes I have. Within HA I can see the history data of all entities.

tjntomas · March 25, 2019, 9:05pm

Can you post the widget definition?

sanderjonkers · March 26, 2019, 6:34am

This is what I currently have set in my *.dash file:

graph:
widget_type: hagraph
entities:
  - sensor.temp_sensor_livingroom_temperature  # The entity_id to be plotted.
units: "°C"   # The unit_of_measurement for your sensors/entities
titles:
  - Living room temperature # Title of the trace.
time: 1d   # Time interval to plot. you can combine w, d, h and m as 2w1d3h20m (This would be 2 weeks, 1 day, 3 hours and 20 minutes)
title: Temperatures  # Widget title
value_in_legend: 1
fill: "tozeroy" # options are  "none" | "tozeroy" | "tozerox" | "tonexty" | "tonextx" | "toself" 
colorIndex: 0   # A number between 0 and 11. 12 colors for the traces are predefined and the colorIndex defines 
# which is used for the first trace. If more than 12 traces/entities are specified, the colors are rotated.

tjntomas · March 26, 2019, 8:19am

Ok, looks fine. I have uploaded a new basegraph.js file to github with some additional logging. If you download it and add

  log: 1

to your widget definition, it will log both the request sent to HA and the result so we can see whats wrong.

sanderjonkers · March 26, 2019, 11:20am

Ok, did that. I assume you want to see what my browser console says?

Object { message: "Invalid datetime" }

tjntomas · March 26, 2019, 11:35am

Ok, what is your locale, i.e. how do you write a date? 2019-01-01 or 01/01/2019 etc?

sanderjonkers · March 26, 2019, 11:57am

https://xxx.duckdns.org/api/history/period/2019-03-23T11:53:32 AM?authSig=xxx

I see that there’s space between 11:53:32 and AM. Could that be the issue?

tjntomas · March 26, 2019, 12:31pm

Yes, the AM and space should’t be there at all. I’ll have a look later but it’s definetely just a locale issue and should be easy to fix.

sanderjonkers · March 26, 2019, 1:44pm

I made a small change in basehagraph.js, just to test:
return today.toLocaleDateString(“sv-SE”) + “T” + today.toLocaleTimeString(“sv-SE”)

Now the browser console says:
https://xxx.duckdns.org/api/history/period/2019-03-23T13:37:02?authSig=xxx

But it also says:
[]
length: 0
__proto__: Array []
New value for sensor.cpu_temperature: 52.6 [application.js:2955:4]

tjntomas · March 26, 2019, 2:05pm

Slight improvement then. Can you post the part at the end of the url? There should be

&filter_entity_id=

at the end of the url and I like to see that part. The authSig part is also not very secret since it expires after 20 seconds. Please also try to paste the url in a browser and see what you get.

tjntomas · March 26, 2019, 2:06pm

Thanks, I forgot to add the locale for the time string.

sanderjonkers · March 26, 2019, 2:14pm

https://xxx.duckdns.org/api/history/period/2019-03-23T14:12:34?authSig=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiI1ZjkwMDQ2NzU4Yzc0Zjc4YTI0NDJiZGYzYmRiNDNmNSIsInBhdGgiOiIvYXBpL2hpc3RvcnkvcGVyaW9kLzIwMTktMDMtMjNUMTQ6MTI6MzQiLCJpYXQiOjE1NTM2MDk1NTMsImV4cCI6MTU1MzYwOTU3M30.KNCzpRlxtxttAUTERR9GZp1fbfe7OlEWQ41jMvAeA0Q&filter_entity_id=sensor.cpu_temperature

I’m at work now, so if I paste the url in a browser, I get a 401 error.

tjntomas · March 26, 2019, 2:15pm

Just a thought: Deakka’s url has a port specified, :8123, in it and your url do not include any port, i.e.

https://xxx.duckdns.org:8123/api/history/period/18/3/2019T17:45:54?

sanderjonkers · March 26, 2019, 2:36pm

I tried adding the port 8123, but nothing changes…

kombihacke · November 11, 2020, 1:33pm

Hello Tomas,

thanks for your widget!

Unfortunately for me its not working.
The Dashboard site ist just blank, without any graph. The Java-Console gives the following Infos:

Fehler beim Verarbeiten des Wertes für '-webkit-text-size-adjust'.  Deklaration ignoriert. extheating_application.css:4:29
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:37:22
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:125:22
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:136:22
Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. extheating_application.css:199:21
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert. all.css:10:27
Unbekannte Eigenschaft '-moz-osx-font-smoothing'.  Deklaration ignoriert. materialdesignicons.min.css:1:682
'none', URL oder Filterfunktion erwartet, aber 'FlipH' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. materialdesignicons.min.css:1:199277
'none', URL oder Filterfunktion erwartet, aber 'FlipV' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. materialdesignicons.min.css:1:199378
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:48:9
'none', URL oder Filterfunktion erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:667:10
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:1044:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:1051:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:1055:9
'none', URL oder Filterfunktion erwartet, aber 'Alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. jquery-ui.css:1307:10
Fehler beim Verarbeiten des Wertes für 'shape-rendering'.  Deklaration ignoriert. rickshaw.min.css:1:3749
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://192.168.0.33:5050/css/materialdesignicons.min.css
Source-Map-Adresse: materialdesignicons.css.map

My appdaemon.yaml looks like (Appdaemon 4.0):

logs:
  error_log:
    filename: errors.log
    log_generations: 1
  main_log:
    filename: appdaemon.log
    log_generations: 1
appdaemon:
  disable_apps: 1
  total_threads: 10
  app_dir: apps
  latitude: 51.6747074
  longitude: 8.347194
  elevation: 81
  time_zone: Europe/Berlin
  api_key: XXXXXXXX
  plugins:
    HASS:
     type: hass
     ha_url: http://192.168.0.33:8123
     token: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJjNzZkN2JjMzEzNmI0ZDg0YjBmNDk4M2U3YjU5NDEzZCIsImlhdCI6MTYwNDU5OTAxMSwiZXhwIjoxOTE5OTU5MDExfQ.dGVahzJMqaMGnETDLBgS-6K9G_kzSwAaAWL2_Jkqs2g
hadashboard:
  dash_url: http://192.168.0.33:5050
  dash_compile_on_start: 1
  dash_force_compile: 1
http:
  url: http://192.168.0.33:5050

Important parts of the configuration.yaml:


# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

history:
  use_include_order: true
  include:
    entities:
      - sun.sun
      - sensor.current_temperature_wohnzimmer
      - sensor.current_temperature_schlafzimmer
      - sensor.current_temperature_bad_oben
      - sensor.current_temperature_bad_unten

# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
http:
  base_url: 192.168.0.33:8123
  cors_allowed_origins:
    - http://192.168.0.33:5050
    - http://192.168.0.33:8123

homeassistant:
  auth_providers:
   - type: legacy_api_password
     api_password: testpw
   - type: homeassistant
   - type: trusted_networks
     trusted_networks:
       - 192.168.0.0/24

Dashboard-Config:

title: extendedheating
widget_dimensions: [170, 170]
widget_margins: [1, 1]
columns: 20

mvp:
  widget_type: hagraph
  entities:   
    - sensor.current_temperature_bad_oben
  units: "°C"
  titles:   
    - "Bad oben"
    time: 2h 
    title: "Temperaturen Heizung"
    value_in_legend: 1
    fill: "none"
    log: 1

layout:
    - mvp(7x1)

Can you please have a look and give me some tips to get it work?

Thanks in advance!
Christian