Coronavirus (COVID 19) Tracker in SharePoint Online

This SharePoint Online tutorial shows you, how to create a coronavirus tracker in SharePoint Online. Here. we will see how to create a small app for COVID-19 using simple API.

In this application, I have used Rest API, bootstrap, jQuery and JavaScript.

Here my main goal is to track the progress of the coronavirus around the world.

You can download the code and use a content editor web part in your SharePoint Online sites (web part page).

Coronavirus Tracker in SharePoint Online

Now, we will see how to create a COVID 19 tracker in SharePoint Online which will show you the no of COVID-19 cases worldwide in which, the data is coming from other open-source API.

In this application, I used RAPID API which is publicly available. If anyone interested to show the COVID-19 tracker in their own application, this blog might be helpful for them.

This API uses publicly available data about current confirmed cases, deaths, and recoveries of the COVID-19 virus compiled by Johns Hopkins University.

Data returned includes confirmed cases, deaths, recoveries, and last reporting data. This data is filterable by the country.

So I have created a free account in the rapidapi.com site and tried to use the free api to get the daily updates for COVID-19.

Below are the API available to get no of affected in COVID-19.

Get Total no of Corona affected cases, Deaths, Recovered and Active cases worldwide

Below is the code to get the Total no of corona affected cases, Deaths, Recovered, and active cases worldwide.

var wolrdHistory = {
	"async": true,
	"crossDomain": true,
	"url": "https://coronavirus-monitor.p.rapidapi.com/coronavirus/worldstat.php",
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
		"x-rapidapi-key": "8a73cdfe94mshd1bbe1c6d299719p105d3bjsn343dfdfdf349be2"
	}
}

Note: Here you can use your own x-rapidapi-key" which will generate automatically after you create your own account.

O./p :

Here we can see the wold wide corona cases in a tabular structure with Country Name, ACTIVE, Total Confirmed, Total Deaths, and Total Recovered Serious.

var coutry = {
	"async": true,
	"crossDomain": true,
	"url": "https://ajayakv-rest-countries-v1.p.rapidapi.com/rest/v1/all",
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "ajayakv-rest-countries-v1.p.rapidapi.com",
		"x-rapidapi-key": "8a73cdfe94mshd1bbe1c6d4545kjfd455be2"
	}
}

O./p :

Display Total no of Corona affected cases, Deaths, Recovered and Active cases Country Wise

By using this API, we can also display a Total number of corona affected cases, deaths, recovered, and active case country wise.

It will display the Coronavirus Tracker country wise and if you will click on the country, it will populate the data of all states of that country.

var wolrdHistory = {
	"async": true,
	"crossDomain": true,
	"url": "https://coronavirus-monitor.p.rapidapi.com/coronavirus/cases_by_country.php",
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
		"x-rapidapi-key": "8a73cdfe94mshd1bbe1c6dfkdjfdfj34105d3bjsnc75867349be2"
	}

O/P

Get Corona affected Count for a Particular Country

By using this API, we can also get the corona or COVID 19 affected count for a particular country like India you can see below:

var settings = {
	"async": true,
	"crossDomain": true,
	"url": "https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country=India",
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com",
		"x-rapidapi-key": "8a73cdfe94mshd1bbe143847105d3bjsnc75867349be2"
	}
}

O/P

Coronavirus Tracker or COVID 19 tracker MAP View

There is an interesting functionality called the MAP view. We can see all countries count through a MAP. I just embed the free demo widget in this application.

We can see the Total no of Corona affected cases, Deaths, Recovered and Active cases world wide through the map view. And Once you click on a country, it will display the Country’s total corona virus cases, Deaths and Recovered.

You have create a free widget through this URL : https://elfsight.com/coronavirus-stats-widget/create/

COVID-19 updated news

Below API you can use to show COVID-19 updated news which data feed from outside.

This API provides real-time information about the coronavirus and developed at Johns Hopkins University. This API gives you flexibility on what is returned, you can filter by country, see global statistics, or historical trends.

<script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://feeds.bbci.co.uk/news/world/rss.xml");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
		    var entry = result.feed.entries[i];
		    var link = document.createElement("a");
            link.setAttribute('target', "_top");
			link.setAttribute('id', "feeds");
            link.setAttribute('href', entry.link);
			var str=entry.title;
			link.appendChild(document.createTextNode(str.substring(0,60)));
            var div = document.createElement("div");
            div.appendChild(link);
            container.appendChild(div);
			
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>

O/p

Here I just created a web part page in SharePoint online and used the Content editor web part to write the code.

Download Source Code

You can download the full source code

References:

You can fin the more details from below given references link.

• Rapid API
• HitWebCounter
• Elfsight Premium Plugin for Web sites

Note: This tutorial we can use for a leaning purpose but don’t use this code as a commercial purpose.

• How to create a SharePoint Online Chatbot using JavaScript

This SharePoint tutorial, we learned how to implement COVID 19 tracker in SharePoint Online or Coronavirus Tracker in SharePoint Online using 3rd party APIs.