Adding Live Weather to Your Grafana Home Dashboard

Back in Part 4 of Trending & Analyzing SmartThings Devices we created a Grafana dashboard to display details of devices via SmartThings. We'll build on this dashboard over time, and an important theme here is the unification of data from multiple services. SmartThings natively integrates with AccuWeather to report current temperature and the like, but what if you really want to see a snapshot of the week's forecast on your home dashboard?

DarkSky offers one of the best developer APIs around. I'm not paid to say that, they're not sponsoring this post (they don't even know about it), but having worked with their API on several other projects I've always been super impressed with their data models and the specificity of the data they return. Instead of basing their data on a large area (like a zip code), DarkSky uses your specific latitude and longitude, giving you a very precise forecast. We won't be directly using the API in this particular post, but if you're curious you should definitely go check it out.

In this particular case, we'll simply be adding DarkSky's embed widget to the Grafana dashboard we made previously.

DarkSky provides information on the embed process on their own blog, but I'll also document the entire end-to-end process here for completeness. We'll start by adding a "Text" panel to our Grafana dashboard. Click on the Panel Title of your new text panel, and edit it. You'll initially be taken to the "Options" tab, and you'll want set the "Mode" to "HTML". Paste the following script into the box, being sure to set your own Latitude and Longitude in place of the NN.NNNNNN's in line 10.

There's a few things going on in this script, but it's all pretty straight forward. Instead of simply adding the iframe from the DarkSky blog post, we're using JavaScript to populate the source of an empty iframe. The reason for this is so that we can refresh the iframe automatically without having to manually interact with the browser. Line 16 resets the source of the iframe every 1,800,000 milliseconds (or 30 minutes).

While I'm sharing this solution publicly, please be aware that DarkSky provides this embed functionality for free and does not charge for the API usage that powers it. Please be respectful of this and don't abuse it by using an overly high refresh rate.

Once you've pasted the code in and plugged in your latitude and longitude, switch over to the General tab. Here I've set a height of 120px, and erased the title so that there is no panel title in the weather widget on my dashboard.

Close the panel configuration by clicking the "X" to the right of the tabs to go back to your dashboard and admire your work. As with previous examples, the full JSON for this panel is available in my Grafana repo.