Coronavirus Tracker per State and County
This feature is currently unavailable
Step 1. Open Covid-19 Script on GitHub and fork the repository. You may need to create a GitHub account if you don't already have one.
Step 2. After creating the fork, please submit the State and County Request to let us know about your fork and we'll send you the instructions for the latest version with State and County included.
Enable Dark Mode:
Dark Mode is a premium feature, please follow instructions on how to enable it
Step 1. Open Covid-19 Script on GitHub and fork the repository. You may need to create a GitHub account if you don't already have one.
Step 2. After creating the fork, please submit the Dark Mode Request to let us know about your fork and we'll send you the instructions for the latest version with Dark Mode included.
See Dark Mode in action at Covid-19 Script Demo:
Live Coronavirus Dashboard with statistics, map, chart, table, cards and search for covering and tracking the global COVID-19 pandemic.
Pure Bootstrap 4, fully responsive, speed optimized with easy-translate.
Data Source: displaying latest information with coronavirus updates from around the world, using live data from the Coronavirus API.
Coronavirus Update. Live coronavirus updates and statistics with historical data, map, chart, graph. Coronavirus (COVID-19) live updates and historical data including Day, Week, Month, Year, Change per Day, Difference, Summary. Total Cases, Active, Deaths, Recovered, Tested and Critical. World Regions by Country. Corona virus live updates via COVID-19 API.
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.
...
Coronavirus Tracker and Coronavirus API with free COVID-19 live updates based on multiple sources.
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
The Coronavirus Tracker Script tracks COVID-19 cases and related data from around the world.
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.
Daily data (updated live): Total Cases, Active Cases, Recovered, Deaths, Tested, Critical Condition, Change Ratio %s and Summaries.
Historical data includes: Day, Week, Month, Year, Changes per Day, Differences and Summaries.
World, Countries and reported Regions.
Yes, you can track all U.S. States separately.
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>
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.
var chart = new google.visualization.PieChart(document.getElementById(‘drawchart'));
and change to BarChart, ColumnChart or any other chart type you may need.
Coronavirus Tracker HTML/JS example:
<!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">
❯ More demos at <a class="text-muted" href="https://quarantine.country">Coronavirus Dashboard</a> ⚙ 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>
/*
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
);
}
);
Hello @tanchanoks !
Thank you for your request. Unfortunately, this information is not enough to understand what is wrong with the App. Please make a screenshot where does the App stop and we will try to figure out.
Thank You!
Hello @Vatuany !
Thank you for your request. Unfortunately, this information is not enough to understand what is wrong with the App. Please make a screenshot where does the App stop and we will try to figure out.
Thank You!
Hello @chloe !
Thank you for your request. Unfortunately, this information is not enough to understand what is wrong with the App. Please make a screenshot where does the App stop and we will try to figure out.
Thank You!
Hello @slayisagod !
Thank you for your request. Unfortunately, this information is not enough to understand what is wrong with the App. Please make a screenshot where does the App stop and we will try to figure out.
Thank You!