Custom UI: Buienradar rain forecast graph

Hey everyone! So I’m building a pretty custom Lovelace UI over here. One thing that was really bugging me, I couldn’t graph forecasted rain in a history graph. This is a quick little card designed purely for Buienradar (Netherlands) rain forecast data.

I admit, its incredibly rough - I used chartjs to display the graph. That being said, if you know a little javascript you can probably easily modify this to graph anything non historic. You can customize the color, icon and location that it sources rain data from (Netherlands only):

      - type: 'custom:buien-rain-forecast'
        lineColor: 'rgba(89, 160, 238, 1)'
        fillColor: 'rgba(89, 160, 238, 0.2)'
        icon: 'mdi:weather-rainy' 


Nice, but i have to use the type “buien-rain-forecast” in the card

Can’t wait 'til the next rain :slight_smile:

- type: 'custom:buien-rain-forecast'
        long: 4.93423
        lat: 52.36515
        lineColor: 'rgba(89, 160, 238, 1)'
        fillColor: 'rgba(89, 160, 238, 0.2)'
        icon: 'mdi:weather-rainy'

Indeed! Edited the post - forgot I changed it on my own config, cheers

Hmm, can’t get it to work.

Placed the buien-rain-card.js file into the www directory, added the reference to Lovelace, rebooted and added the code below in an Lovelace manual card:

type: 'custom:buien-rain-forecast'
lat: 52.3667
long: 4.8945
fillColor: 'rgba(89, 160, 238, 0.2)'
lineColor: 'rgba(89, 160, 238, 1)'
icon: 'mdi:weather-rainy'

Getting this error:

Looks like you either haven’t put it into the correct folder or you didn’t get the raw script.

Copied and paste the raw script into the js file did the trick, thanx Gluwc !

Is there a way to change the frequency of the graph update ?
Now it flickers on the screen constantly.

1 Like

Actually, I was wondering the same thing. Right now this is a problem with the rough way I have written the code. I sort of had to pick whether to draw the card once, or keep drawing it so it updates. Problem is, it updates alot…

Does anyone know how to reduce the refreshrate of a card? It’s not usually necessary as other graphs work from the built in history graph. I’ll keep looking into it and let you know what I find / update

Thanx in advance to take a look at it…

1 Like

Looks great this add-on! Great job!

I do have 1 question, the card is flikkering on my MacBook Air, is this a known issue?

1 Like

Updated! Let me know if this fixes it!

Updated! Let me know if this fixes it?

Well, the frequency is definitely less.

After a refresh of the page the expected rain is displayed, after a couple of seconds it starts to reload itself unregulated , sometimes a couple times fast, and sometimes a few seconds in between.

Yep just noticed its still flickering damn! Very odd. Plan B…

My programming skills are very basic :roll_eyes:, otherwise I would help you with it

1 Like

It’s to do with the update frequency and how I’m setting it. I really want it fixed as I want to use the method for some other graph cards!

1 Like

Ok, just let me know to test it.

FINALLY! I think I nailed it. Take two! Try this update:

This should fix it!

That seems to be working !
Watt’s the update frequency now?

Other question, this week the expected rain exceeded the level of 5, but the graph will only display 5 at maximum, can that be true?