This time I will share jQuery Plugin and tutorial about COVID-19 Map Of Cases And Deaths Around The World – COVID-19 Dashboard, hope it will help you in programming stack.
A COVID-19 dashboard that consists of a world map of confirmed COVID-19 cases, deaths, recovered patients around the world and a World Wide Statistics widget showing the latest data in a bar chart.
Dependencies:
- Bootstrap 4 framework.
- jqvmap: jQuery Vector Map Plugin.
- axios: Promise based HTTP client for the browser and node.js.
- Chart.js: Simple HTML5 Chart library.
- covid19api: A free API for data on the Coronavirus.
How to use it:
1. Load the necessary JavaScript and CSS files in your HTML document.
02 |
<link href="/path/to/dist/jqvmap.css" rel="stylesheet" /> |
03 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
06 |
<script src="/path/to/cdn/jquery.min.js"></script> |
07 |
<script src="/path/to/dist/jquery.vmap.js"></script> |
08 |
<script src="/path/to/dist/maps/jquery.vmap.world.js"></script> |
09 |
<script src="/path/to/cdn/axios.min.js"></script> |
10 |
<script src="/path/to/js/jquery.vmap.sampledata.js"></script> |
11 |
<script src="/path/to/cdn/chart.js"></script> |
12 |
<script src="/path/to/cdn/popper.min.js"></script> |
13 |
<script src="/path/to/cdn/bootstrap.min.js"></script> |
2. Build the HTML for the COVID-19 dashboard.
01 |
<div id="loader" style="display: flex; justify-content: center;"> |
02 |
<div class="spinner-grow text-muted mt-3"></div> |
03 |
<div class="spinner-grow text-primary mt-3"></div> |
04 |
<div class="spinner-grow text-success mt-3"></div> |
05 |
<div class="spinner-grow text-info mt-3"></div> |
06 |
<div class="spinner-grow text-warning mt-3"></div> |
07 |
<div class="spinner-grow text-danger mt-3"></div> |
08 |
<div class="spinner-grow text-secondary mt-3"></div> |
09 |
<div class="spinner-grow text-dark mt-3"></div> |
10 |
<div class="spinner-grow text-light mt-3"></div> |
22 |
<div class="modal-dialog modal-dialog-centered modal-lg" role="document"> |
23 |
<div class="modal-content"> |
24 |
<div class="modal-header"> |
25 |
<h5 class="modal-title" id="modal-title"></h5> |
32 |
<span aria-hidden="true" id="modal-body">×</span> |
35 |
<div class="modal-body"> |
36 |
<div class="container-fluid"> |
38 |
<div class="col-md-12"> |
39 |
<div id="region-stat-chart-container"> |
40 |
<canvas id="region-stat-chart"></canvas> |
46 |
<div class="container-fluid"> |
48 |
<div class="col-md-6"> |
49 |
<ul class="list-group"> |
50 |
<li class="list-group-item"> |
54 |
class="list-group-item list-group-item-warning" |
55 |
id="region-new-confirmed" |
58 |
class="list-group-item list-group-item-danger" |
