Build a Weather Dashboard that Sends Alerts Using a Weather Data API

Jeffrey Loucks
Initial State
Published in
10 min readJun 18, 2020
Weather Data API Weather Dashboard

The first question I ask in the morning is, “What’s the weather today?” Siri quickly responds with a human-esque retort and gives me the weather forecast data. My iPhone comes with a weather app that I can’t even erase, and being a Tornado survivor, I now have multiple ways to not only check the weather but also to get alerts.

For years, we’ve used weather data API’s with Initial State to monitor weather in real-time and create weather alerts. There seems to be a trend with these weather API’s of giving access to free weather data, and then closing down the free plan over time. We used to use Wunderground (no longer free) and then we used the Dark Sky API (acquired by Apple and no longer free). Now, we use Weatherstack! Along with changing where we get our weather information, we’ve made it much easier to access it using our new Data Integration Marketplace.

In this tutorial, I’ll show you just how easy it is to set up a real-time weather dashboard with the Weatherstack integration on Initial State.

Step 1: Log in or Create an Account

Creating an account at Initial State is easy and free. The individual tier gives you free and full access to the platform for 14-days. After that, it’s only $9.99/mo. If you’re an active student with a .edu or similar email address then it’s completely free, minus a few features such as triggers, shorter data retention and less API calls.

Simply go to initialstate.com, click the orange Get Started button and register/sign in from there.

Weather Data API Integration on Initial State

Step 2: Using the Data Integration Marketplace

Once you’ve logged into your Initial State account, you’ll see a screen like the one below. Before we dive right into setting up the integration, click the “view all integrations” click pointed out in this screenshot. I want to show off all the other integrations we have right now because once you learn how easy it is to set the Weatherstack dashboard up, you’ll be able to do it with all of these. You can create new dashboards for these integrations or add them into other relevant dashboards to make them more robust.

IoT Platform for Streaming and Visualizing Data

At the time of writing this tutorial, we have 6 integrations on the marketplace:

Weather Data API Integration
  1. Initial State’s Bucket Watchdog is an integration that checks in on your dashboards to make sure they’re still sending data. Nothing worse than setting up your Arduino or Raspberry Pi to collect data only to find the connection was interrupted. This integration will make sure you know as soon as that happens!
  2. CoinCap let’s you stream cryptocurrency market price and volume data to an Initial State dashboard.
  3. FMP streams real-time stock prices.
  4. The Tesla Integration sends location, charge state and other Tesla data to Initial State.
  5. The Twitch integration streams information from twitch channels
  6. And finally, Weatherstack. Weatherstack streams, well, the weather.

You’ll notice little Initial State tokens that look like this.

Data Integration Marketplace Token

Each Initial State account is given 10 tokens to use in the marketplace to use any way you please. Each integration costs a different amount of tokens to use based on how much data is streamed and how often the integration calls the API. Right now, users only have access to the 10 tokens they’re given, but eventually you will be able to purchase more.

Step 3: Weatherstack

Click the details button on the Weatherstack box on the integrations page.

This page will tell you all of the basic information about the integration and what’s required to use it. In this case, you’ll just need a zip code (or latitude & longitude) of a location that you’ll want to monitor the weather for, and you’ll have to know what units you’ll want to see that data in (metric, scientific or US imperial).

Weather Data API Integration

Click the Begin Setup button and you’ll see a modal pop up from the right side of your screen. There are just a few easy steps to take before we can start watching that weather data roll in:

Weather Data API Integration
  1. Give your new dashboard a name. I named mine Nashville Weather.

Pro tip: I like to use emoji’s in my dashboards names to give them a little more oomph. A quick way to pull up emojis on a Mac is Ctrl+Command+Space bar. For Windows hold the Windows button and either the period (.) or semicolon (;).

2. Type in your location. I use the Zip Code of the area I want to track, but you can also put Latitude and Longitude to be more specific. It’s easy to find the latitude and longitude of your area just by going to google maps, searching for a place and then copying the latitude & longitude out of the browser and pasting it into the form. Only US, UK and Canada locations can be used at this time.

3. Choose your units. I chose US/Imperial because I lived in the United States.

4. Choose to create a new bucket or send your Weatherstack data to an existing bucket. For this tutorial, I’m going to create a new bucket/dashboard. However, let’s say you were already monitoring the temperature of the inside of your home, and wanted to add the weather to that dashboard then you could easily do so by clicking “Send data to an existing bucket” and then choosing the dashboard you want to send data to from the drop down.

Create a new bucket

Send to data bucket

Send to existing bucket

Send to data bucket

5. Choose whether you want all the data that Weatherstack will send or if you want just specific weather data to send to your dashboard. I’m going to send it all because I want to be able to see all of the data trend over time, but if you’re sending to an existing bucket you may not want every piece of weather data crowding your existing data. Please note, if you choose to send all the data then it will load in a pre-made template that our team created for you. Otherwise, the tiles will not be organized in any specific order. Regardless, you can customize them to your needs and visual preference.

All available data

Stream Weather Data API

I want to select specific data

If you check this option, then simply just go and check the box next to each piece of weather data that you want to stream to your dashboard like below.

Stream Weather Data

7. Choose how often you want your dashboard to update with weather conditions. You can choose between every 15 minutes or hour by hour. Keep in mind that sending data every 15 minutes costs an extra token compared to sending it every hour. So, if you’re wanting to use other integrations in the marketplace at the same time then you may want to just poll every hour. You can always stop sending data from the integration and start it again, or change the frequency at which you send data later. However, if you do stop it and start again then there will be gaps in your data. I chose every hour because I want to use this dashboard to send weather alerts, and measure data over time. So, I don’t need data to update every 15 minutes.

8. Click Start Integration. Now you’re streaming data from Weatherstack! Click the “View in the IoT App” button to see the first data points roll in.

Weather Dashboard Integration

9. Customize your dashboard. If you’re streaming to a new bucket, we’ve set you up with a template to get you started. However, you should make it your own! Press the down arrow in the top center of your dashboard to bring down the timeline, click Edit Tiles, move some tiles around, resize them and change the background. Make the dashboard the way you want it so that it’s easy for you to ingest the data you want to collect.

You can also use other Weatherstack templates that we’ve created for you here.

To add a little more context to your dashboard, you can also add a map that shows the location of where you’re monitoring the weather.

Your dashboard might look a little bare at first, but give it some time and it will fill up with beautiful historical weather data.

Weather Data API Integration

Step 4: Setting Weather Alerts

As I mentioned in the introduction of this post, my wife and I recently survived a Tornado that tore through Nashville on March 3rd. Since then, I’ve learned that it’s important to set multiple alerts from different sources for severe weather. I follow a local meteorology group on Twitter, I pay for the StormWatch+ app, I have a NOAA certified weather radio and I’m also setting some alerts on my weather dashboard on Initial State. It might sound like overkill, but in my experience, having just one option to get alerts is not enough. When the Tornado hit our house, the iPhone alert didn’t wake us up and we were awakened by the sound of the storm hitting our home. We didn’t have much time to react. Now I have multiple ways to get alerts for different weather scenarios just in case I don’t hear one, or if one comes through a little late.

If you have a student account with Initial State, you won’t be able to do this step as triggers is only available on the Individual tier and above.

Here’s how you set up a weather alert on Initial State:

Weather Data API Alerts
  1. Click “settings” under the dashboard that you want to set alerts on.
  2. Click Triggers in the top middle of the settings panel.
  3. Click “+ Create a new trigger.”
  4. Enter the signal key that you want to monitor. You can get the stream key by going to the edit tile menu on your dashboard, clicking the tile you want to monitor and copying the text in the signal key box. For this trigger, I’ll monitor the forecasted weather. (Get signal key from edit tile screen)
Weather Data API Weather Alerts

5. Change the operator from “=” to “match.” This is telling the app to look for the partial match of a string. So, it doesn’t have to be an exact match of exactly what the forecasted weather is.

6. Type whatever value you want to track in the forecast. I typed “rain” in value. Now the match operator will look for the word rain in the forecasted weather tile. So, if it says “moderate rain at times”, heavy rain, or “Rainn Wilson is listening to Purple Rain” it will set the trigger off. It just has to have the word rain in it. You can set it for any phrase that you’d like to track. I’m still monitoring the words Weatherstack uses for different forecasts so I can set up better and more frequent alerts over time. Fair warning here, I found that rain is in the forecast a lot. So, I get quite a few texts on this key value. You may want to watch the data over time and find a key value that is more specific to what you’re looking out for.

7. Enter your phone number. If you haven’t done this already it will need to send you a verification code to verify that you’re sending triggers to your phone and not someone else’s.

8. Type in what you want your message to say. I erased what was in there and put “Looks like it might rain. Go ahead and check the weather… Unless you want to get wet. Message from Weatherstack: {{triggeredValue}}” This way when I get a text, I’ll be able to go to the easiest and most trusted weather source I have near me at the time.

You can set multiple triggers on your data at the same time. You could also set a trigger for when the chance of thunder or snow is above a certain percentage, for current weather, or whatever else you think might be helpful. Keep in mind, you should always have multiple ways to get weather alerts. Just one way of receiving alerts is not enough.

Now, you’ve created a weather dashboard and set weather alerts that you can add into your weather alert mix! We’d love to see how you’ve customized your dashboards or how you used the integration marketplace. If you’ve made something that you want to show off then send a screenshot, or if you’re comfortable sharing your live dashboard, public share URL to us on Twitter using @initialstate. We’d love to see it!

--

--