bingo!
is this what it should be?:
and with pop over:
added locale: nl to config to see Dutch, which works also (see days and wind bearing). Now use capitalize on the daynames to make it look somewhat more robust.
Will you change the title into the state condition?
icons are a bit off as yo can see, and Im trying to see if apparent temp could be fit in somewhere nice… 
Is there a way to remove decimals from temperature axel? I noticed that when temp stays inside a degree, it gives a decimal or even two. The problem is that the number does not then fit to the card. It doesn’t help that we are below zero so there’s ’-’ too.
Another option would be to force it to show at least 4 degrees.
Another issue - might be related to previous one. The curve does not always fit into the chart.
I tried to debug myself but I’m not familiar with javascript.
HI @Yevgeniy
not sure if you saw my post, but please note the top left icon for humidity is not aligned properly. Ive checked in the card but all seems fine thooght. Any clues where to correct this?
Feature request: Could you add the option of setting the Chart Line and Bar colors, so that these could be styled to match the current theme.
I tried to do it myself in the .js file,but simply can’t figure out how to set the color for each chart line and the preceip bar.
found another error in the card, when using Buienradar, or any other weather component using meters per second for windspeed.
currently your card uses
computeWind(speed) {
var calcSpeed = Math.round(speed * 1000 / 3600);
return calcSpeed;
}
which renders an incorrect speed when the unit is already m/s…
Ive changed it into
computeWind(speed) {
var calcSpeed = speed;
return calcSpeed;
}
which is silly of course, but at least the card shows correctly now (since you have the unit set to m/s)
If you’d want the speed to be expressed in km/h you have to *3.6, but also change the unit to display that.
Hello to all. Unfortunately now I have less free time, however I will try to release a new version with fixes in the near future.
Will be fixed in the next version.
This is a chart.js issue and unfortunately I don’t know how to solve it.
The strings are centered. It was intended, but I will try other options.
Unfortunately in the current chart implementation colors are hardcoded.
Hi @Yevgeniy,
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!
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.
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?
…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.
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'
]
},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'
]
},Is there a way to convert hPa to mm Hg/s?
Как можно конвертировать гПа в привычные мм рт/с?
Just wait for acceptance of this pull request: https://github.com/sgttrs/lovelace-weather-card-chart/pull/16
It seems to me that mode: hourly doesn’t work.
I get this if i use that mode:
I am in favour of “Höchsttemperatur” and “Tiefsttemperatur” - that’s what a German wheater forecast would use.
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:
--- 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.
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?
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?