Global Moderators

Yatko

How the New Coronavirus Spreads and Progresses

The number of Covid-19 cases continues to rise, surpassing 4 million as this coronavirus tracker shows.

The total number of cases is now at 4,290,410 with 2,458,682 cases still active. According to quarantine.country, 45 million people have been tested for the Coronavirus, at the time of writing this article, and once more tests are conducted the novel coronavirus infection numbers could rise.

The US continues to have the biggest share of those, recording 18.502 new cases yesterday. The mortality rate in all the countries is trending downwards however, as lockdowns are eased in some capacity across the world, some fear we could see the numbers climb back up.

...

Yatko

COVID-19 Dashboard

Coronavirus Tracker and Coronavirus API with free COVID-19 live updates based on multiple sources.

Coronavirus Tracker Script

COVID-19 App Demo HTML/JS Example

Edit "index.html" that came together with this documentation and follow the instructions to personalize it to your needs

What is it for?

The Coronavirus Tracker Script tracks COVID-19 cases and related data from around the world.

What data is available?

Data is available for countries that are submitting confirmed cases and related COVID-19 records. See full list of supported countries or list latest data with Coronavirus API.

Live data:

Daily data (updated live): Total Cases, Active Cases, Recovered, Deaths, Tested, Critical Condition, Change Ratio %s and Summaries.

Is historical data available?

Historical data includes: Day, Week, Month, Year, Changes per Day, Differences and Summaries.

What regions are covered?

World, Countries and reported Regions.

Are U.S. states included?

Yes, you can track all U.S. States separately.

Customizing

Selecting country: the script is delivered with a set of 50 countries, randomly selected to display COVID-19 cases data.

Find var countryFeedKey and change it to var countryFeedKey = 'usa';. Replace 'usa' with the country of your choice see full list here.

Showing multiple countries: duplicate index.html and name it e.g. "usa.html". Edit and change var countryFeedKey = 'usa';.

Adding more data: if you need to display more data like “Tests Made” or “In Severe Condition”, simply add a new section and set the data-country-placeholder according to your needs, example:

<div class="d-inline qc_data-cases qc_data-cases-all">
   <button class="btn btn-secondary fixwidth">
      <strong data-country-placeholder="tested">0</strong>
   </button>
</div>

ask the community for options for details that you are trying to add
if you need to display a calculation or present another detail, ask the community, ask technical questions, be specific, to the point
another place to ask developers

Coronavirus Charts: Google Charts was used in the attached covid-19 tracker script however, you may chose any other charting library. We recommend Chart.js, as used on the Coronavirus Dashboard. See examples: Australia, China, Germany, Mexico, Spain, Thailand, USA, etc.

Find:

var chart = new google.visualization.PieChart(document.getElementById(‘drawchart'));

and change to BarChart, ColumnChart or any other chart type you may need.

Further editing Charts: ask the community any changes you might need, be specific and to the point: Coronavirus-Dashboard

Other resources

Ask the community Coronavirus-Dashboard/issues
Ask other technical details if the community could not help
Check the Coronavirus API for more advanced features
See some great examples at quarantine.country
Add your own tracker to the TOP list, mention your URL with hashtag #covidTop at coronavirus-dashboard community

Coronavirus Tracker HTML/JS example:

coronavirus-dashboard.html

<!DOCTYPE html>
<html lang=en>

<head>
    <title>Coronavirus App Example</title>
    <link href="https://quarantine.country/public/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://quarantine.country/public/assets/css/covid-19-demo.css" rel="stylesheet">
</head>

<body>
    <div class="container mt-4 pt-4">

        <div class="row">
            <div class="col-10 offset-1">

                <div class="card">
                    <div class="card-header">
                        COVID-19 App Demo
                    </div>
                    <div class="card-body">
                        <h2 class="display-6">Coronavirus Cases in <span data-var-placeholder="country"></span></h2>
                        <p class="small text-muted">LIVE UPDATE</p>
                        <div class="data">

                            <!--total cases-->
                            <div class="d-inline qc_data-cases qc_data-cases-all">
                                <button class="btn btn-danger fixwidth">
                                    <strong data-country-placeholder="total_cases">0</strong>
                                </button>
                            </div>
                            <div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
                                <span class="text-muted small">Confirmed cases in the
									<span data-var-placeholder="country"></span>
                                </span>
                            </div>
                            <hr />

                            <!--active-->
                            <div class="d-inline qc_data-cases qc_data-cases-all">
                                <button class="btn btn-warning fixwidth">
                                    <strong data-country-placeholder="active_cases">0</strong>
                                </button>
                            </div>
                            <div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
                                <span class="text-muted small">Active cases in the 
									<span data-var-placeholder="country"></span>
                                </span>
                            </div>
                            <hr />

                            <!--recovered-->
                            <div class="d-inline qc_data-cases qc_data-cases-all">
                                <button class="btn btn-success fixwidth">
                                    <strong data-country-placeholder="recovered">0</strong>
                                </button>
                            </div>
                            <div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
                                <span class="text-muted small">Recoveding cases in the 
									<span data-var-placeholder="country"></span>
                                </span>
                            </div>
                            <hr />

                            <!--deaths-->
                            <div class="d-inline qc_data-cases qc_data-cases-all">
                                <button class="btn btn-secondary fixwidth">
                                    <strong data-country-placeholder="deaths">0</strong>
                                </button>
                            </div>
                            <div class="d-inline qc_data-cases qc_data-cases-text pl-1 pl-sm-2">
                                <span class="text-muted small">Death cases in the 
									<span data-var-placeholder="country"></span>
                                </span>
                            </div>
                            <hr />

                        </div>
                    </div>
                    <div class="card-footer text-muted small">
                        &#10095; More demos at <a class="text-muted" href="https://quarantine.country">Coronavirus Dashboard</a> &#9881; Build even more with <a class="text-muted" href="https://github.com/Yatko/Coronavirus-API">Coronavirus API</a>
                    </div>
                </div>
                <!--/card-->

            </div>
        </div>

    </div>
    <script src="tracker.js" type="text/javascript"></script>
</body>

</html>

tracker.js

/* 
Available Spots and Summary:
Total Cases, Active Cases, Deaths, Recovered, Tested, Critical, Change Ratio %, Summary
Historical data:
Day, Week, Month, Year, Change per Day, Difference, Summary
Regions:
World, Regions and Countries

Read documentation for more functionality - https://rapidapi.com/Yatko/api/coronavirus-live
See all available countries - https://api.quarantine.country/api/v1/summary/latest
*/

var countryFeedKey = 'usa';	//try china, spain, italy, etc.
var countryName = 'USA';		//try 中国, España, Italia, etc.

function ready(cb) {
  if( document.readyState !== 'loading' ) {
    cb();
  } else {
    document.addEventListener('DOMContentLoaded', function () {
        cb();
    });
  }
}

function fetchData(url) {
  return fetch(url)
    .then(function(response) {
      if(response.ok) {
        return response.json();
      }
    })
    .then(function(payload) {
      return payload['data'] || {};
    });
}

function formatNumber(number, precision, separate, separator, comma) {
  if(!number) {
    return '';
  }

    var re = '\\d(?=(\\d{' + (separate || 3) + '})+' + (precision > 0 ? '\\D' : '$') + ')',
        num = number.toFixed(Math.max(0, ~~precision));

    return (coma ? num.replace('.', comma) : num).replace(new RegExp(re, 'g'), '$&' + (separator || ','));
};

function fillPlaceholders(data) {
  var i;
  var varEl = document.querySelectorAll('[data-var-placeholder]');

  for(i = 0; i < varEl.length; i++) {
    var placeholder = varEl[i].getAttribute('data-var-placeholder');

    if(placeholder && placeholder != '') {
      switch(placeholder) {
        case 'country':
          varEl[i].innerText = countryName;    
          break;
      }
    }
  }

  var countryPlaceholderEl = document.querySelectorAll('[data-country-placeholder]');

  for(i = 0; i < countryPlaceholderEl.length; i++) {
    var placeholder = countryPlaceholderEl[i].getAttribute('data-country-placeholder');

    if(placeholder && placeholder != '' && data['summary'][placeholder]) {
      countryPlaceholderEl[i].innerText = parseInt(data['summary'][placeholder]).toLocaleString();
    }
  }
}

ready(
  function() {
    var url = 'https://api.quarantine.country/api/v1/summary/region?region=' + countryFeedKey;

    fetchData(url)
        .then(fillPlaceholders);

    setInterval(
      function() {
        fetchData(url)
          .then(fillPlaceholders);
      },
      10000
    );
  }
);

coronavirus dashboard
coronavirus API

evgeniya

Hello @tanchanoks !