October 21

Plotting Minutely Precipitation using Chart.js

The AerisWeather API makes a plethora of weather data available. Earlier this summer, we introduced minutely precipitation forecasts, one of our latest enhancements to the conditions endpoint. Today, we will look at an easy way to plot minutely precipitation data using Chart.js.

Getting Started

We will need to load three javascript libraries. One is the AerisWeather Javascript SDK, and the other two are for our plotting purposes. Note that in order to set up a Time Cartesian Axis in Chart.js, you will need to load a date library. In this example, we will be using date-fns.

Setting Up the Request

With the tools above loaded, we are ready to roll. We will be using the AerisWeather Javascript SDK to request the minutely precipitation from the conditions endpoint. This is done by providing a filter parameter to the request

By default, the minutely precipitation forecast is returned in 1-minute intervals for up to 60 minutes, though for our purposes, we will add a 5-minute interval to the filter for a less condensed-looking chart.

With our conditions endpoint and filter in mind, we now can create and configure the request instance for the Javascript SDK

We will be plotting precipitation accumulation and precipitation at each interval over time. This will require us to massage some of the data for the accumulation and store all of our data in arrays that will be used for datasets in Chart.js.

Chart Configuration

Now that we have our data, we need to tell Chart.js where and how to plot it.  We will be using a bar chart for the interval precipitation amounts and a line chart for the total accumulation over time.

There are dozens of options you can configure for your chart but I will omit them here. Please see the full example below for more information.

The final step is to instantiate the Chart class and pass the DOM element to render the chart within (see example), as well as  the chart configuration.

The Result

The Complete Example

Here’s the example in its entirety. In order for this snippet to work, you will need to replace the ‘CLIENT_ID’ and ‘CLIENT_SECRET’ with your keys.

Next Steps

As you can see, obtaining and plotting the data is easy and provides a powerful visual. With all the weather data in the AerisWeather API, your plotting possibilities could be endless.

If you can’t use this example yet because you don’t have your own AerisWeather account ‘CLIENT_ID’ and ‘CLIENT_SECRET’, you can sign up for a free developer account to get started.

Happy Coding!

Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.