Lovelace: Weather card with chart

scstraus · February 11, 2019, 4:54pm

Thank you so much for this card, it is probably my favorite card in all of Lovelace, it gives so much more useful information than the standard weather card. I only have one issue with it, and that is that the day of week labels are wrong on the graph. This makes it a little hard to read, especially since the next segment of the graph can be anywhere from 1 minute to 3 hours away. The screenshot below was taken at 14:00 on Monday, but it’s still showing it as being Sunday. What would be ideal is if it showed the correct day and also time on the graph, as there’s no way to tell when the graph starts.

It’s got the correct data when you click for the detail, though:

Here is the configuration for my openweathermap. Hourly mode is ideal for me because the graph then shows the next 24 hours, which is exactly what I want.

weather:
  - platform: openweathermap
    api_key: !secret openweathermap_key
    mode: hourly

I also have another one set up for the next 10 days which has the same problem (screenshot also at 14:06 on Monday, but it’s showing it starting on Saturday).

Here is the detail pane if I click on the top. It seems it might be taking only some of the days, as it’s also starting on Sunday instead of Monday.

Here’s the configuration of the weather component for this graph.

weather:
  - platform: darksky
    api_key: !secret darksky_key
    name: Weather Forecast
    mode: daily
    scan_interval: 720

The time on my server is set correctly, but as CET whereas I am in CET+1. However I have the time zone correctly set in my hass config:

homeassistant:

  name: Home
  latitude: !secret home_lat
  longitude: !secret home_long
  elevation: 260
  unit_system: metric
  time_zone: Europe/Prague

If you need anything else from my config, it’s up on github Would be happy to test any new versions which might be able to address these issues.

EDIT: I just noticed that it works properly on the Homeassistant app on iOS but not on chrome… The plot thickens!

Thanks again for a wonderful card!

rantaki3 · February 12, 2019, 4:02pm

I solved the issue curve not fitting to the chart by calling reload(true) if any value updated. Also, I found it best to limit the temp axis range to 4 degrees because its not useful to differentiate values that inside one degree.

scstraus · February 18, 2019, 8:46pm

So, a few updates later and added the mode:hourly option to the hourly and now they seem to be putting the right labels on the graph on both my mobile and chrome finally.

But for some reason, my custom updater doesn’t seem to recognize your card, though it does all my other cards. I have:

custom_updater:
  track:
    - cards
    - components
    - python_scripts
  component_urls:
    - https://raw.githubusercontent.com/pnbruckner/homeassistant-config/master/custom_components.json
  python_script_urls:
    - https://raw.githubusercontent.com/pnbruckner/homeassistant-config/master/python_scripts.json
  card_urls:
    - https://raw.githubusercontent.com/rdehuyss/homeassistant-lovelace-google-calendar-card/master/custom_updater.json
    - https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json
    - https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json
    - https://raw.githubusercontent.com/nervetattoo/simple-thermostat/master/tracker.json
    - https://raw.githubusercontent.com/sgttrs/lovelace-weather-card-chart/master/custom-updater.json

But my custom updater card still shows as below after many restarts (every card except this one shows up…):

Any idea why that might be?

scstraus · February 18, 2019, 9:34pm

…And of course as soon as I write about it here, it appears, though it was like this for many weeks after adding it to the config… Okay, as long as it’s there, I’m happy… Sorry to bother you, disregard the above, thanks for the great card.

philwilldo · March 26, 2019, 9:10pm

Awesome work! German translation:

    de: {
    tempHi: "Temperatur",
    tempLo: "Temperatur Nacht",
    precip: "Niederschlag",
    uPress: "hPa",
    uSpeed: "m/s",
    uPrecip: "mm",
    cardinalDirections: [
      'N', 'N-NO', 'NO', 'O-NO', 'O‘, 'O-SO', 'SO', 'S-SO',
      'S', 'S-SW', 'SW', 'W-SW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
    ]
  },

FunkyBoT · March 26, 2019, 9:30pm

Portuguese translation. Thanks!

pt: {
tempHi: "Temperatura",
tempLo: "Temperatura Noite",
precip: "Precipitação",
uPress: "hPa",
uSpeed: "m/s",
uPrecip: "mm",
cardinalDirections: [
  'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
  'S', 'S-SO', 'SO', 'O-SO', 'O', 'O-NO', 'NO', 'N-NO', 'N'
]
  },

DobriyS · March 27, 2019, 10:21am

Is there a way to convert hPa to mm Hg/s?
Как можно конвертировать гПа в привычные мм рт/с?

Limych · March 27, 2019, 10:37am

Just wait for acceptance of this pull request: https://github.com/sgttrs/lovelace-weather-card-chart/pull/16

maurizio53 · March 27, 2019, 11:33am

It seems to me that mode: hourly doesn’t work.

I get this if i use that mode:

seidler · May 12, 2019, 8:01pm

I am in favour of “Höchsttemperatur” and “Tiefsttemperatur” - that’s what a German wheater forecast would use.

seidler · May 12, 2019, 8:04pm

Thanks a lot for this card. I was looking for just that. I made a tiny patch to remove the header, because that way I can have two charts, one short-term and one long-term, without duplicating the current conditions:

The patch is just this:

--- a/custom-weather-card-chart.js
+++ b/custom-weather-card-chart.js
@@ -122,7 +122,7 @@ class WeatherCardChart extends Polymer.Element {
       </style>
       <ha-card header="[[title]]">
         <div class="card">
-          <div class="main">
+          <div class="main" style="[[noHead]]">
             <ha-icon icon="[[getWeatherIcon(weatherObj.state)]]"></ha-icon>
             <template is="dom-if" if="[[tempObj]]">
               <div on-click="_tempAttr">[[roundNumber(tempObj.state)]]<sup>[[getUnit('temperature')]]</sup></div>
@@ -131,7 +131,7 @@ class WeatherCardChart extends Polymer.Element {
               <div on-click="_weatherAttr">[[roundNumber(weatherObj.attributes.temperature)]]<sup>[[getUnit('temperature')]]</sup></div>
             </template>
           </div>
-          <div class="attributes" on-click="_weatherAttr">
+          <div class="attributes" on-click="_weatherAttr" style="[[noHead]]">
             <div>
               <ha-icon icon="hass:water-percent"></ha-icon> [[roundNumber(weatherObj.attributes.humidity)]] %<br>
               <ha-icon icon="hass:gauge"></ha-icon> [[roundNumber(weatherObj.attributes.pressure)]] [[ll('uPress')]]
@@ -165,6 +165,7 @@ class WeatherCardChart extends Polymer.Element {
       config: Object,
       sunObj: Object,
       tempObj: Object,
+      noHead: String,
       mode: String,
       weatherObj: {
         type: Object,
@@ -204,6 +205,7 @@ class WeatherCardChart extends Polymer.Element {
     this.title = config.title;
     this.weatherObj = config.weather;
     this.tempObj = config.temp;
+    this.noHead = config.chartOnly?'display:none':'';
     this.mode = config.mode;
     if (!config.weather) {
       throw new Error('Please define "weather" entity in the card config');

It adds an extra attribute chartOnly to the card. so

chartOnly: true

will remove the header.

Christian_Hollbjar · May 12, 2019, 8:46pm

Really nice! That way it can be combined with the animated wethercard (or any other) in a nice verticle stack! @Yevgeniy is it possible to get this in to your version?

dragonfly · June 7, 2019, 4:30am

Loving the card, I’ve been using seidler’s chart_only patch to setup long and short term forecasts. Just wondering are the weather icons stored somewhere, that I could update them for something with a bit more colour?

dragonfly · June 10, 2019, 4:40am

How did you limit axis range, I am also getting decimals on one of my charts.

rantaki3 · June 10, 2019, 5:25pm

I don’t have the code now, but I simply searched the part of the code (update function?) that calculates max-min and uses that value as range on y-axis. I just added one IF sentence that confirms that the range is at least 4.

dragonfly · June 10, 2019, 5:42pm

Thanks, I’ll go looking I thought I was missing a setting or something.

mjarva · July 11, 2019, 12:03pm

Absolutly excellent card, thank @Yevgeniy

@seidler: your patch is good idea. But for some reason I’m not able to get it work.
Changing 2 lines, and adding two more to .js file, and chartOnly: true to Lovelace card configuration does not remove header from UI.

Do you have any idea why that is?
Edit: got it solved: clear cache, get a prize.

I use Dark Sky weather element for this, which works well.
Though I had to do 2 elements to get it working:

weather:
  - platform: darksky
    api_key: [omitted]
    mode: daily
    scan_interval: 10
    name: "Dark Sky daily"
  - platform: darksky
    api_key: [omitted]
    mode: hourly
    scan_interval: 10
    name: "Dark Sky hourly"

Locale for Finnish:

  fi: {
    tempHi: "Lämpötila",
    tempLo: "Yölämpötila",
    precip: "Sademäärä",
    uPress: "hPa",
    uSpeed: "m/s",
    uPrecip: "mm",
    cardinalDirections: [
      'N', 'N-NE', 'NE', 'E-NE', 'E', 'E-SE', 'SE', 'S-SE',
      'S', 'S-SO', 'SO', 'O-SO', 'O', 'O-NO', 'NO', 'N-NO', 'N'
    ]
  },

thomas0782 · July 22, 2019, 7:31pm

Thanks @Yevgeniy for this great card.

Here the locale for German:

  de: {
    tempHi: "Höchstemperatur",
    tempLo: "Tiefsttemperatur",
    precip: "Niederschlag",
    uPress: "hPa",
    uSpeed: "m/s",
    uPrecip: "mm",
    cardinalDirections: [
      'N', 'N-NO', 'NO', 'O-NO', 'O', 'O-SO', 'SO', 'S-SO',
      'S', 'S-SW', 'SW', 'W-SW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
    ]
  },

Ralf · July 25, 2019, 12:50pm

@seidler: never did any changes so bit a newbie here.
Seems the code has changed so the code lines do not match anymore.

Can you post teh complete code please so i (and maybe others) can simply copy&paste?

Or i’m missing some thoughts (due to high temp here currently ;-)?

/ Ralf

Ralf · July 26, 2019, 12:16pm

Saw this fork which support HACS (note from the issue from GitHub).

Nevertheless, still having problems showing only the graph but no header.

/ Ralf