Lovelace: Weather card with chart

Share your Projects! Dashboards & Frontend
1

openweathermap

Custom weather card for Lovelace:

  • Animated chart with weather forecast (maximum for 9 days);
  • Time of sunrise and sunset (optional);
  • Displays values from the temperature sensor instead of data from the forecast (optional).

Installation instructions can be found on the GitHub

30 Likes
2

Thanks a lot. It looks really cool in the dashboard
I’ve got latest version on github (raw js from the repo) and have some issue with the days (see ‘invalid date’ hereunder)

image

Any guess where I could have a look to correct it ?

3

Thanks for reporting. This is known issue and fix will be released soon.

4

Hey @Yevgeniy
Nice work. One Question. The custom updater does not recognitze your card. I’ve the following entry in my configuration.yaml:

custom_updater:
  show_installable: False
  track:
    - cards                                                                                                                                                                                         
  card_urls:
    - https://raw.githubusercontent.com/sgttrs/lovelace-weather-card-chart/master/custom-updater.json

and in lovelace-ui.yaml:

resources:
  - url: /local/custom-weather-card-chart.js?v=0.1
    type: module

Can you help out?

5

weather

Hi! Great Work!
Can you hourly forecast with hour make?
Можешь в почасовой прогноз часы добавить?

1 Like
6

Thanks. Sorry for late answer.

@eLRIC Issue fixed in v0.2.

@jones Custom updater works now.

@Barmalej I will try to add this feature in future releases.

1 Like
7

@Yevgeniy Can you please update the README.md with the correct entry for custom_updater? I’ve entered the new URL to your custom_updater.json but it still doesn’t show up.

8

Of course. I updated the instructions

1 Like
9

Still have some issue … strange one as different browsers show different issues …

FF 64.0
image

Chromium 72.x
image

Details on the OWM itself seems OK

image
image351×682 28 KB

Do I need to setup a specific OWM sensor on top of OWM config itself ?

10

@eLRIC Are you cleared cache in firefox?

11

Should have done it before :slight_smile:
Now, I have the same as in Chromium (same day without hour)

12

Thanks for this, I’ve got this working and it’s a great replacement for the now defunct Yahoo weather. Is there a way I can display the daily values (i.e. Monday, Tuesday, etc) rather than the different times of the current day? Also, FYI, the graph values displays “NaN mm” for the rain amount when it’s 0 mm - perhaps it’s better to just say 0 mm? Also, can we change to imperial system i.e. inches of rain rather than metric i.e. mm?

edit if we’re sticking to the multiple values (every 3 hours) for the display, is there a way we could display Tues 3pm and so on, like the underlying Openweather data? Right now it just shows Tu Tu Tu?

13

Thank you. It’s implemented in v0.2.1.

14

v0.2.1

  • Add localisation to date ticks.
  • Tooltip: show zero if precipitation is null, support imperial units for precipitations

Please make sure you clear your browser’s cache after updating.

2 Likes
15

Thanks for this card. I’m using weather.dark_sky with your card and instead of displaying the days it shows 9 hours. Any ideas on how to solve this.

Capture
Capture1103×925 66.6 KB

  - type: 'custom:weather-card-chart'
    title: Météo
    weather: weather.dark_sky
    sun: sun.sun

Thanks

16

Cool card! What is the green line in your chart and how do you get it?

17

To answer myself and the one above: the green line is night when you set the mode to daily :slight_smile:

@Romquenin add mode: daily to your weather in configuration.yaml

18

Thanks Narfel it works.

19

suggestion: i flipped Line 166 in custom-weather-card-chart.js to

if (temperature < 0) {
return “-” + Math.round(temperature);

since most places are more likely to have positive degree values throughout the year. i miss the snow, though :slight_smile:

20

Looks good. But I’m getting full white screen on my lovelace view when I put the following code:

 - type: 'custom:weather-card-chart'
   title: Hava
   weather: weather.dark_sky
   sun: sun.sun

and here is the browser console log:

custom-weather-card-chart.js?v=0.1:145 Uncaught (in promise) TypeError: Cannot read property 'attributes' of null
    at HTMLElement.set hass [as hass] (custom-weather-card-chart.js?v=0.1:145)

any advice?

switched to openweather, problem solved :slight_smile: