This website uses the COVID-19 API to generate charts related to the pandemic. This is an HTML webpage that displays COVID-19 data using charts and tables. The webpage includes several JavaScript libraries, including Bootstrap, Chart.js, and Highcharts, which are used to create the charts.
The webpage displays a navigation bar at the top, which includes a search bar for searching for COVID-19 data for a specific country. The main content of the page is divided into several sections, each displaying a chart or table with COVID-19 data.
this how it looks like
The JavaScript code included in the HTML file fetches data from the COVID-19 API and uses it to populate the charts and tables on the page. There are three URLs used to fetch data: one for global COVID-19 data, and two for COVID-19 data specific to Ethiopia. The data is fetched using the fetch() method and is returned in JSON format.
The data is then used to populate the charts and tables. The charts are created using Chart.js and Highcharts. Each chart has its own configuration, including the chart type, title, and data source. The tables are created using HTML and JavaScript, with the data being inserted into the table rows and cells using JavaScript.
The code first initializes an empty array dailyWorldData, an array of API URLs apiUrls, and an array of chart objects charts.
Each chart object in the charts array specifies the API URL to fetch data from, the ID of the canvas element that the chart will be drawn in, the title of the chart, and the type of chart. The code then loops through each chart object and fetches data from the corresponding API URL using fetch(). The data is then used to create a chart using Chart.js, which is drawn on the canvas element specified in the chart object.
This is how it looks when you search by countries
The code also defines a getRandomColor() function that returns a random hex color code.
Finally, the code defines a search() function that generates an HTML figure element with an ID of “container”. This function is not currently used or called in the code.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>This imports the Bootstrap CSS stylesheet from a CDN (Content Delivery Network). Bootstrap is a popular front-end framework that provides pre-built styles and components for web development.
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>This imports the Bootstrap JavaScript library from a CDN. The JavaScript in this library is used to add interactivity and dynamic behavior to the webpage.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>This imports the Chart.js library from a CDN. Chart.js is a JavaScript library for creating interactive charts and graphs.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>These four script tags import the Highcharts library from a CDN. Highcharts is another JavaScript library for creating charts and graphs.
Overall, this code is an example of a simple webpage that uses JavaScript libraries to display data in a visually appealing way.
1. First, you need to include the Chart.js library in your HTML file. You can do this by adding the following code to the head section of your HTML file:
<head>
<script src=”https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
2. Next, you need to create a canvas element in your HTML file where the chart will be displayed. You can do this by adding the following code to the body section of your HTML file:
<body>
<canvas id=”myChart”></canvas>
</body>
3. Now, you can create the JavaScript code to create the chart. You can start by getting a reference to the canvas element and creating a new Chart object:
const ctx = document.getElementById(‘myChart’).getContext(‘2d’);
const myChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’],
datasets: [{
label: ‘Sales’,
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’,
‘rgba(153, 102, 255, 0.2)’,
‘rgba(255, 159, 64, 0.2)’,
‘rgba(255, 99, 132, 0.2)’
],
borderColor: [
‘rgba(255, 99, 132, 1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(75, 192, 192, 1)’,
‘rgba(153, 102, 255, 1)’,
‘rgba(255, 159, 64, 1)’,
‘rgba(255, 99, 132, 1)’
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
This code creates a bar chart with labels for each month and data for the sales in each month. It also specifies some styling options for the chart.
4. Finally, you can create the JavaScript code to populate the table with data. You can start by getting a reference to the table element and creating a loop to iterate over the data:
const table = document.getElementById(‘myTable’);
const data = [
for (let i = 0; i < data.length; i++) {
const row = table.insertRow();
const nameCell = row.insertCell();
const ageCell = row.insertCell();
const cityCell = row.insertCell();
nameCell.innerHTML = data[i].name;
ageCell.innerHTML = data[i].age;
cityCell.innerHTML = data[i].city;
}
This code creates a table with columns for name, age, and city, and populates it with data from an array of objects. It uses a loop to create a new row for each object in the array and inserts cells for each property of the object.
And this is how i made the api’s
1. The first API URL is used to retrieve data about the total number of confirmed, recovered, and deceased cases for each country. This data is used to create the table that displays the country names and their corresponding case numbers. The API endpoint used is:
https://covid19.mathdro.id/api/countries
This endpoint returns a JSON object containing an array of objects, where each object represents a country and contains information about its confirmed, recovered, and deceased cases.
2. The second API URL is used to retrieve data about the daily number of confirmed cases for a specific country. This data is used to create the line chart that displays the trend of daily cases over time. The API endpoint used is:
https://covid19.mathdro.id/api/countries/<COUNTRY_CODE>/confirmed
Here, <COUNTRY_CODE> is a placeholder that should be replaced with the ISO 3166–1 alpha-2 code for the country you want to display data for (e.g. “US” for the United States, “GB” for the United Kingdom). This endpoint returns a JSON object containing an array of objects, where each object represents a daily record of confirmed cases for the specified country.
In both cases, the data returned by the API is parsed and processed using JavaScript to create the table and chart objects that are displayed on the webpage.
Here is the source code Below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Covid</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<title>COVID-19 Data Center</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand"></a>
<label for="search-input">Search for a country:</label>
<input type="text" id="search-input" name="search-input" />
<button type="button" onclick="search()">Search</button>
</div>
</nav>
<div id="search-form">
</div>
<div id="updated">
<div></div>
<h1>COVID-19 Data Center</h1>
<div>
<canvas id="chart1"></canvas>
</div>
<div>
<canvas id="chart2"></canvas>
</div>
<div>
<canvas id="chart3"></canvas>
</div>
<div>
<canvas id="chart4"></canvas>
</div>
<div id="chart111"></div>
<div >
<table id="covidTable">
<thead>
<tr>
<h3>Covid data table</h3>
<th>Country</th>
<th>Total Cases</th>
<th>Deaths</th>
<th>Recovered</th>
<th>Active Cases</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="card">
<canvas id="chart6"></canvas>
</div>
<script src="covid.js"></script>
</html>var dailyWorldData = new Array();
var apiUrls = [
"https://api.covid19api.com/summary",
"https://api.covid19api.com/country/ethiopia",
"https://api.covid19api.com/country/ethiopia",
]
var charts = [
{
url: apiUrls[0],
chart: "chart1",
title: "Global COVID-19 Cases",
type: "bar",
},
{
url: apiUrls[1],
chart: "chart2",
title: "COVID-19 Cases in Ethiopia",
type: "doughnut",
},
{
url: apiUrls[2],
chart: "chart3",
title: "COVID-19 Cases Timeline in Ethiopia",
type: "line",
dateFormat: "YYYY-MM-DD",
},
];
charts.forEach(function (chart) {
fetch(chart.url)
.then(function (response) {
return response.json();
})
.then(function (data) {
var labels = [];
var values = [];
var backgroundColors = [];
var borderColors = [];
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
if (chart.url === apiUrls[0]) {
shuffleArray(data.Countries);
data.Countries.slice(0, 10).forEach(function (country) {
labels.push(country.Country);
values.push(country.TotalConfirmed);
backgroundColors.push(getRandomColor());
borderColors.push(getRandomColor());
});
}
else if (chart.url === apiUrls[1]) {
labels.push("Confirmed", "Recovered", "Deaths");
values.push(data.All.confirmed, data.All.recovered, data.All.deaths);
backgroundColors.push("#F44336", "#4CAF50", "#607D8B");
borderColors.push("#F44336", "#4CAF50", "#607D8B");
} else if (chart.url === apiUrls[2]) {
labels.push("Confirmed", "Recovered", "Deaths");
// Get data for first three months of 2021
values.push(
data.MonthlySummaries.slice(0, 3).reduce((acc, cur) => acc + cur.confirmed, 0),
data.MonthlySummaries.slice(0, 3).reduce((acc, cur) => acc + cur.recovered, 0),
data.MonthlySummaries.slice(0, 3).reduce((acc, cur) => acc + cur.deaths, 0)
);
backgroundColors.push("#F44336", "#4CAF50", "#607D8B");
borderColors.push("#F44336", "#4CAF50", "#607D8B");
}
var chartData = {
labels: labels,
datasets: [
{
label: chart.title,
data: values,
backgroundColor: backgroundColors,
borderColor: borderColors,
borderWidth: 1,
},
],
};
var ethiopiaTimelineChart = charts[2];
fetch(ethiopiaTimelineChart.url)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data)
var labels = [];
var values = [];
var backgroundColors = [];
var borderColors = [];
var daysToSkip = 7;
for (var i = 0; i < data.length; i += daysToSkip) {
var day = data[i];
labels.push(day.Date.substr(0, 10));
values.push(day.Confirmed);
backgroundColors.push(getRandomColor());
borderColors.push(getRandomColor());
}
var chartData = {
labels: labels,
datasets: [
{
label: ethiopiaTimelineChart.title,
data: values,
backgroundColor: backgroundColors,
borderColor: borderColors,
borderWidth: 1,
},
],
};
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
};
var ctx = document
.getElementById(ethiopiaTimelineChart.chart)
.getContext("2d");
var myChart = new Chart(ctx, {
type: ethiopiaTimelineChart.type,
data: chartData,
options: chartOptions,
});
})
.catch(function (error) {
console.log("Error fetching data: ", error);
});
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
};
var ctx = document.getElementById(chart.chart).getContext("2d");
var myChart = new Chart(ctx, {
type: chart.type,
data: chartData,
options: chartOptions,
});
})
.catch(function (error) {
console.log("Error fetching data: ", error);
});
});
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var dailydata = new Array();
var sum = 0;
function search() {
let card = `
<figure class="highcharts-figure">
<div id="container"></div>
</figure>`;
document.getElementById("updated").innerHTML = card;
var inputsearch = document.getElementById("search-input").value;
alert(inputsearch);
fetch(`https://api.covid19api.com/dayone/country/${inputsearch}`)
.then((response) => response.json())
.then((countrySummary) => {
for (let i = 0; i < countrySummary.length; i++) {
let comfirmed = 0;
comfirmed = countrySummary[i].Confirmed;
dailydata.push(comfirmed - sum);
sum = comfirmed;
}
Highcharts.chart("container", {
title: {
text: "Daily Case",
},
xAxis: {
tickInterval: 1,
type: "logarithmic",
accessibility: {
rangeDescription: "Range: 1 to 10",
},
},
yAxis: {
type: "logarithmic",
minorTickInterval: 0.1,
accessibility: {
rangeDescription: "Range: 0.1 to 1000",
},
},
tooltip: {
headerFormat: "<b>{series.name}</b><br />",
pointFormat: "x = {point.x}, y = {point.y}",
},
series: [
{
data: [],
pointStart: 1,
},
],
});
function updateChart() {
let chart = Highcharts.charts[1];
chart.series[0].setData(dailydata);
}
updateChart();
});
}
fetch(
"https://api.covid19api.com/world?from=2020-03-01T00:00:00Z&to=2023-04-01T00:00:00Z"
)
.then((response) => response.json())
.then((worldDaily) => {
for (let i = 0; i < worldDaily.length; i++) {
let total = worldDaily[i].TotalConfirmed;
dailyWorldData.push(Number(total));
}
// Data retrieved https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
Highcharts.chart("chart111", {
chart: {
type: "spline",
},
title: {
text: "",
},
subtitle: {
text:
"Source: " +
'<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
'target="_blank">Wikipedia.com</a>',
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
accessibility: {
description: "Months of the year",
},
},
yAxis: {
title: {
text: "No: of People",
},
labels: {
formatter: function () {
return this.value + "°";
},
},
},
tooltip: {
crosshairs: true,
shared: true,
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: "#666666",
lineWidth: 1,
},
},
},
series: [
{
name: "Case",
marker: {
symbol: "square",
},
data: [1, 2, 4],
},
],
});
function updateChart() {
let chart = Highcharts.charts[0];
chart.series[0].setData(dailyWorldData);
}
updateChart();
})
.catch((err) => console.error(err));
fetch('https://disease.sh/v3/covid-19/countries?sort=cases')
.then(response => response.json())
.then(data => {
let tableBody = document.querySelector('#covidTable tbody');
data.slice(0, 40).forEach(country => {
let row = document.createElement('tr');
row.innerHTML = `
<td>${country.country}</td>
<td>${country.cases}</td>
<td>${country.deaths}</td>
<td>${country.recovered}</td>
<td>${country.active}</td>
`;
tableBody.appendChild(row);
});
});