How to Show Historical Weather Data by City in Your Weather App

Nowadays, we see both live and historical weather data by city dashboard in many applications. Especially in web applications, this dashboard frequently appears as a widget on the home page or menu. The main purpose of this service is to directly increase customer satisfaction. So how do developers obtain historical weather data, especially for millions of locations going back years? Of course, with a free historical weather data API.

Recently, many web services have provided data in the categories of exchange rates, geolocation, and news. Historical weather data is one of them and is almost the most popular. There are many free historical weather data providers used in thousands of applications today. In this article, we will first touch on the importance of historical weather data. Then, we will develop a web application with one of the most popular weather APIs that offer this service for free.

What is the Importance of Historical Weather Data for Your Business?

Historical weather data is of great importance to your business. First, historical weather data provides valuable information to support your business decisions. By examining past weather conditions, you can better plan your future operations and minimize risks.

Additionally, if your business operates in a weather-sensitive manner, historical weather data plays a critical role in risk management. This data helps you evaluate the effects of possible weather events and take precautions when necessary. Finally, historical weather data provides a rich resource for data analytics projects. Using this data, you can examine trends, seasonal changes, and statistics.

Create a Historical Weather Dashboard by City in a Web App

In this section, we will develop a historical weather dashboard by city in a web application with the weatherstack API, which provides us with historical weather data. First, let’s talk about why we prefer the weatherstack API.

The weatherstack API is today’s best weather API that provides live and historical weather data. It even provides weather forecast data. This API is used by the most popular companies in the market such as Microsoft and Ericsson.

The weatherstack API provides users with highly accurate weather data for millions of cities around the world. It also provides this data at the highest speed and with a scalable infrastructure. In this way, those who use this API minimize error rates in their business processes. This API provides historical weather data until 2008.

The weatherstack API was developed with a developer-friendly approach. Developers can easily integrate it into all programming languages. It also provides sample integration codes for popular programming languages such as PHP, Python, and Go in its documentation.

Now let’s develop a web application using the historical weather endpoint of this API.

Get an API Key

Before we start developing the application, we need an API key to use the historical weather endpoint of the weatherstack API. For this, let’s sign up for one of the affordable subscription plans offered by the weatherstack API and obtain an API key.

Code

After obtaining the API key, we can start developing our application. We will develop our web application using HTML, CSS, JavaScript, and Bootstrap. For this, let’s create an HTML file and put the following codes in it:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-…”
</head>
<body>
    <div class=”container mt-5″>
        <div id=”weather-widget” class=”mt-4″></div>
    </div>

    <script>
        fetch(“https://api.weatherstack.com/historical?access_key=YOUR-ACCESS-KEY&query=Rome&historical_date_start=2023-09-11&historical_date_end=2023-09-13”)
            .then(response => response.json())
            .then(data => {
                const historicalData = data.historical;
                const currentData = data.current;

                const weatherWidget = document.getElementById(“weather-widget”);

                const currentTemperature = currentData.temperature;

                const widget = document.createElement(“div”);
                widget.classList.add(“card”, “p-4”);

                const title = document.createElement(“h2”);
                title.classList.add(“text-center”);
                title.textContent = `Current Weather in ${data.location.name}`;
                widget.appendChild(title);

                const currentTemp = document.createElement(“p”);
                currentTemp.classList.add(“text-center”, “fs-3”);
                currentTemp.textContent = `${currentTemperature}°C`;
                widget.appendChild(currentTemp);

                const historicalWeather = document.createElement(“div”);
                historicalWeather.classList.add(“mt-4”);
                historicalWeather.innerHTML = “<h3>Historical Weather Data</h3>”;

                const daysOfWeek = [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’];

                for (const date in historicalData) {
                    if (historicalData.hasOwnProperty(date)) {
                        const data = historicalData[date];
                        const dateEpoch = data.date_epoch;
                        const dateObj = new Date(dateEpoch * 1000);
                        const dayOfWeek = daysOfWeek[dateObj.getDay()];
                        const day = dateObj.getDate();
                        const month = dateObj.getMonth() + 1;
                        const year = dateObj.getFullYear();
                        const avgTemp = data.avgtemp;

                        const historicalEntry = document.createElement(“p”);
                        historicalEntry.textContent = `${dayOfWeek}: ${avgTemp}°C`;
                        historicalWeather.appendChild(historicalEntry);
                    }
                }

                widget.appendChild(historicalWeather);
                weatherWidget.appendChild(widget);
            })
            .catch(error => console.error(error));
    </script>
</body>
</html>

Test

We can now test our application. Before running the application, let’s put our API key in the ‘YOUR-ACCESS-KEY’ field and start the application.

After starting the application, we obtained both live and historical weather data in the city of Rome with a single API and listed them on the dashboard.

Conclusion

To sum up, historical weather data is one of the most important resources that increase user satisfaction today. There are many benefits to developers and businesses. This provides a great way to provide users with more information and track historical weather trends. Integrating a reliable weather API to retrieve this data and then creating a user-friendly interface is one of the most important tasks for developers and businesses.

FAQs

Q: Is the weatherstack a Free Weather Data Provider?

A: Yes, it is. It offers multiple flexible and affordable subscription plans to users of this API. It also offers its users a free plan with a limit of 1,000 API calls per month.

Q: What Services Does the weatherstack API Offer?

A: The API features offered by the weatherstack are as follows:

Current Weather
Historical Weather
Historical Time-Series
Weather Forecast
Location Lookup

Q: What are the Historical Weather Data Use Cases?

A: Historical weather data provides valuable information across several different applications and industries. For example, the agricultural industry can use historical weather data for harvest timing and water management. The travel industry can reference historical data to predict weather conditions for travel plans. Additionally, energy management, construction, insurance, and many other industries can use historical weather data to make strategic decisions.

Q: Does the weatherstack API Support a Wide Range of Locations Around the World?

A: Yes, it does. It supports millions of cities around the world and provides highly accurate data for all of them.