InfluxDB graph widget not visible on dashboard

Question

InfluxDB graph widget not visible on dashboard

sundancekid80 opened this issue 4 years ago · comments

Hi! I'm quite the newbie but...

Today I installed the InfluxDB onto HA (on a RPi 3b+). Works well, data is flowing. I followed the instructions to use the custom widget "graph" to display graphs populated with data from the InfluxDB. However, it doesn't seem to work. Everything is restarted/reinitialized. The log of AppDaemon seem to tell me everything is alright. Could it be that there are too few data points yet? I'm using the default skin (which I copied/placed in the custom_css folder).

As I hover my mouse over the place where the widget is supposed to be it shifts to a pointing finger so something's obviously there. But nothing's visible...

From variables.yaml:

graph_legend_text_color: "#888888"
graph_grid_color: "#888"
graph_title_color: "#cccccc"
graph_x_axis_text_color: "#cccccc"
graph_y_axis_legend_color: "#cccccc"
graph_y_axis_text_color: "#cccccc"
graph_influxdb_path: http://192.168.10.149:8086 # Example: 192.168.1.20:8086  or http://www.mydomain.com:8086
graph_influxdb_path_local: "http://192.168.10.149:8086"
graph_widget_style: "border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;"
graph_trace_colors: "1"  # Set the opacity for the trace colors.
graph_fill_colors: "1"   # Set the opacity for the fill colors.
graph_bar_colors: "1"    # Set the opacity for the bar colors.
graph_bar_multi: "1"     # Leave this as is
#graph_user: INFLUXDB_USERNAME # ONLY INCLUDE THIS LINE IF AUTHENTICATION IS ENABLED FOR INFLUXDB
#graph_password: INFLUXDB_PASSWORD # ONLY INCLUDE THIS LINE IF AUTHENTICATION IS ENABLED FOR INFLUXDB
graph_degrees_celsius_text: "Degrees Celsius"  # Adjust to your own language
graph_degrees_fahrenheit_text: "Degrees Fahrenheit"  # Adjust to your own language
graph_percent_text: "Percent"  # Adjust to your own language

From log of AppDaemon after loading my Dashboard:

2021-01-25 20:40:19.850473 INFO hello_world: You are now ready to run Apps!
2021-01-25 20:40:19.857158 INFO AppDaemon: App initialization complete
2021-01-25 20:40:21.965355 INFO AppDaemon: New client Bergshamra connected
2021-01-25 20:40:31.986229 INFO AppDaemon: Loading custom skin 'default2'
2021-01-25 20:40:32.049571 INFO AppDaemon: Compiling dashboard 'Bergshamra'
2021-01-25 20:40:33.260294 WARNING AppDaemon: Variable definition not found in CSS Skin variables: $graph_user
2021-01-25 20:40:33.262712 WARNING AppDaemon: Variable definition not found in CSS Skin variables: $graph_password
2021-01-25 20:40:33.375012 INFO AppDaemon: Loading custom widget 'weatherentity.yaml'
2021-01-25 20:40:33.377068 INFO AppDaemon: Loading custom widget 'graph.yaml'
2021-01-25 20:40:33.379035 INFO AppDaemon: Loading custom widget 'basegraph'
2021-01-25 20:40:33.394447 INFO AppDaemon: Loading custom widget 'base_weatherentity'
2021-01-25 20:40:33.743215 INFO AppDaemon: function [get_dashboard] finished in 1757 ms
2021-01-25 20:40:33.983631 INFO AppDaemon: Client disconnection from Bergshamra
2021-01-25 20:40:34.211592 INFO AppDaemon: New client Bergshamra connected````

sundancekid80 · Answer 1 · Tue Jan 26 2021 03:54:20 GMT+0800 (China Standard Time)

Oh and here's the code in my dashboard file. It's a temp sensor I'm trying to plot.

mvp:
    widget_type: graph
    entities:
      - sensor.sensor_balkong  # The entity_id to be plotted.
    influxdb_units: 
      - "°C"   # The unit_of_measurement attribute for the entity.
    titles:
      - "Balkongtemperatur" # Title of the trace.
    time: 24h   # Time interval to plot. You can use "m" for minutes, "h" for hours, "d" for days and "w" for weeks.
    title: "Temperatures"  # Widget title
    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. 
    value_in_legend: 1 # If this parameter is present, the current value for each trace is displayed in the legend section.

Tomas Jansson · Answer 2 · Tue Jan 26 2021 18:56:20 GMT+0800 (China Standard Time)

Please look if you have any errors in the browser javascript console. Also, try to access the dashboard from another browser to see if it is someting browser-specific. Some browser addons sometimes blocks some javascript code.

sundancekid80 · Answer 3 · Tue Jan 26 2021 19:36:37 GMT+0800 (China Standard Time)

Hi again and thanks for your answer. I pasted the error messages from the javascript console. I've tried different browsers without luck...

Tomas Jansson · Answer 4 · Tue Jan 26 2021 19:46:33 GMT+0800 (China Standard Time)

The first two errors can be ignored. Can you click on the arrow before "TypeError" and post the hidden part? Looks like the widget can not find an entity in HA.

sundancekid80 · Answer 5 · Tue Jan 26 2021 19:57:36 GMT+0800 (China Standard Time)

Hi again, of course. See below. Any pointers on where I could begin looking for errors?

Tomas Jansson · Answer 6 · Tue Jan 26 2021 20:00:50 GMT+0800 (China Standard Time)

Looks like it cannot read the unit_of_measurement attribute from your sensor in HA. Does the sensor have a unit_of_measurement attribute?

Tomas Jansson · Answer 7 · Tue Jan 26 2021 20:05:32 GMT+0800 (China Standard Time)

Another way of testing is to add a second sensor. This forces the widget to read the unit_of_measurement from the supplied list:

mvp:
    widget_type: graph
    entities:
      - sensor.sensor_balkong  # The entity_id to be plotted.
      - sensor.another_temp_sensor
    influxdb_units: 
      - "°C"   # The unit_of_measurement attribute for the entity.
      - "°C" 
    titles:
      - "Balkongtemperatur" # Title of the trace.
      - "Another title"
  etc...

sundancekid80 · Answer 8 · Tue Jan 26 2021 20:12:27 GMT+0800 (China Standard Time)

Yes it should have that attribute (see screenshot from InfluxDB). I noticed that I'd used "sensor.sensor_balkong" (the name in HA) instead of just "sensor_balkong" (the name in InfluxDB) but when I tried the latter it complained about not finding the entity so I supposed that was right from the befinning.

sundancekid80 · Answer 9 · Tue Jan 26 2021 20:19:45 GMT+0800 (China Standard Time)

Another way of testing is to add a second sensor. This forces the widget to read the unit_of_measurement from the supplied list:

mvp:
    widget_type: graph
    entities:
      - sensor.sensor_balkong  # The entity_id to be plotted.
      - sensor.another_temp_sensor
    influxdb_units: 
      - "°C"   # The unit_of_measurement attribute for the entity.
      - "°C" 
    titles:
      - "Balkongtemperatur" # Title of the trace.
      - "Another title"
  etc...

I tried adding a second sensor and modifying the entities, influxdb_units and titles attributes with another row. Got another error then...````

mvp:
widget_type: graph
entities:
- sensor.sensor_balkong # The entity_id to be plotted.
- sensor.sensor_pappas_sovrum
influxdb_units:
- "°C" # The unit_of_measurement attribute for the entity.
- "°C"
titles:
- "Balkongtemperatur" # Title of the trace.
- "Sovrumstemperatur"
time: 24h # Time interval to plot. You can use "m" for minutes, "h" for hours, "d" for days and "w" for weeks.
title: "Temperatures" # Widget title
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.
value_in_legend: 1 # If this parameter is present, the current value for each trace is displayed in the legend section.````

Tomas Jansson · Answer 10 · Wed Jan 27 2021 15:51:32 GMT+0800 (China Standard Time)

This indicates that an empty response is received from influxdb. I have a version of the code that logs a lot of debug inormation to the console. I will post a link to that version.

sundancekid80 · Answer 11 · Wed Jan 27 2021 16:01:46 GMT+0800 (China Standard Time)

This indicates that an empty response is received from influxdb. I have a version of the code that logs a lot of debug inormation to the console. I will post a link to that version.

Thank you Tomas! I tried with a variety of different sensors but I get the same errors. Looking forward to further debugging!

sundancekid80 · Answer 12 · Thu Jan 28 2021 13:46:40 GMT+0800 (China Standard Time)

I tried installing Grafana and used InfluxDB as data source, that worked fine.

Could it be that I used the dev version of your widgets?

Looking forward to the debug link 😃

This indicates that an empty response is received from influxdb. I have a version of the code that logs a lot of debug inormation to the console. I will post a link to that version.

sundancekid80 · Answer 13 · Sun Jan 31 2021 14:45:20 GMT+0800 (China Standard Time)

Finally solved it. For some reason the parameters didn't get passed on to BaseGraph function. That led to all sorts of problems that disappeared after hard-coding urls etc into the JavaScript code.

Thanks for the help!

sundancekid80 · Answer 14 · Sun Jan 31 2021 16:20:25 GMT+0800 (China Standard Time)

Oh another question to @tjntomas : Since the X-axis legend doesn't render very nicely on my iPad2 being used as dashboard, is there any way to alter the color/parameters of this? Do you know where I could look?!

Tomas Jansson · Answer 15 · Mon Feb 01 2021 23:29:04 GMT+0800 (China Standard Time)

You can change the parameters in the skin file:

graph_x_axis_text_color: "#cccccc"

I can also map the font and size to parameters in the widget if you like.

sundancekid80 · Answer 16 · Tue Feb 02 2021 14:39:20 GMT+0800 (China Standard Time)

Yes please!

Now I just need to modify the date format since my old ipad2 seems to parse them wrong regardless of which browser I use for the dashboard...