coronaindia
Version:
COVID19 India Tracker, predictive analytics and research. Built by engineers, data scientists, AI and medical professionals.
594 lines (578 loc) • 27.4 kB
HTML
<!--
#Project : COVID19
#Team : https://github.com/orgs/elComrades/people
#Author : github.com/prashantmi, github.com/deepandu
github.com/abhijatchaturvedi, github.com/siddharthsrivastava
-->
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script data-ad-client="ca-pub-3584207319564393" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-161859093-2"></script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N2ZNT32');</script>
<!-- End Google Tag Manager -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-161859093-2');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content=" Dashboard for COVID-19 virus outbreak in INDIA">
<meta property="og:url" content="https://coronaindia.github.io/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="COVID-19 INDIA Dashboard" />
<meta property="og:description" content="Dashboard for COVID-19 virus outbreak in INDIA">
<meta property="og:image" content="https://coronaindia.github.io//media/images/fsharevirus.png">
<title>COVID-19 INDIA Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/css/dashboardTheme.css">
<!--JQueryUI -->
<link href="media/jquery-ui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!--Bootstrap -->
<link href="media/bootstrap/bootstrap-4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--Bootstrap Datables -->
<link href="media/dataTables/DataTables-1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<!--Bootstrap Datables Responsive -->
<link href="media/dataTables/Responsive-2.2.2/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<!-- Datables select -->
<link rel="stylesheet" href="media/dataTables/DataTables-1.10.18/css/select.dataTables.min.css" />
<!--Fontawesome Icons---->
<link rel="stylesheet" href="media/fontawesome/5.10.1/css/all.css" />
<!-- OverlayScrollbars Plugin CSS -->
<link type="text/css" href="media/overlayScrollbars/css/OverlayScrollbars.css" rel="stylesheet" />
<!--customBootstrap----->
<link rel="stylesheet" href="media/prashantUIUX/customBootstrap/css/customBootstrap.css" type="text/css" />
<!--Fonts--------------->
<link rel="stylesheet" href="media/prashantUIUX/fonts/webfontkit-averta-family/stylesheet.css" type="text/css" />
<!--Custom -->
<link rel="stylesheet" href="media/misc/css/indexDay.css" type="text/css" />
<link rel="stylesheet" href="media/misc/css/common.css" type="text/css" />
<link rel="stylesheet" href="media/misc/css/themeSwitch.css" type="text/css" />
<link rel="stylesheet" href="media/misc/css/allAnimation.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<script src="media/misc/js/pace.js"></script>
<style>
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 5px;
width: 200px;
background: #fff;
border: 1px solid #29d;
overflow: hidden;
}
.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 200px;
position: fixed;
z-index: 2000;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: #29d;
}
.pace.pace-inactive {
display: none;
}
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed" id="pagescroll" ng-app="" ng-cloak>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N2ZNT32"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<input type="text" name="themeTypeElm" id="themeTypeElm" class="d-none themeTypeElm" value="1">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header-thsw main-header navbar navbar-expand navbar-light" id="">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-link-menuBtn" data-widget="pushmenu" href="#">
<i class="menu-thsw fas fa-bars text-danger" style="font-size:20px; font-weight: bold;"></i>
</a>
</li>
<li class="nav-item mt-2 ">
<a href="" class="text-nowrap"><b>COVID-19 Virus Outbreak in INDIA </b><img class="img" src="media/images/indianflag.svg" width="20px" height="20px"></a>
<div class="form-group d-flex text-nowrap flex-nowrap">
Day Mode
<i class="fas fa-cloud-sun text-warning" style=""></i>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input themeSwitchChkBox" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>
<i class="fas fa-cloud-moon text-primary" style=""> </i>
Night Mode
</div>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<form class="form-inline">
<span style="cursor: pointer;"><span class="badge badge-secondary" data-widget="control-sidebar" data-slide="true">Ask Bot <i class="far fa-hand-point-right"></i></span><img class="direct-chat-img animated flip delay-0.2s"
data-widget="control-sidebar" data-slide="true" src="media/images/robot.svg" style="float: right;">
</span>
</form>
</li>
</ul>
</nav>
<!-- Main Sidebar Container -->
<aside class="main-Sidebar-thsw navbar-light main-sidebar elevation-4 shadow">
<!-- Brand Logo -->
<a href="" class="brand-link">
<img src="media/images/virus.svg" alt="CoronaIndia Logo" class="brand-image img-circle elevation-3">
<span class="brand-text-thsw brand-text font-weight-bold text-shadow brand-text-light" style="">COVID-19 INDIA</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="" class="nav-link">
<i class="nav-icon fas fa-home"></i>
<p>
Home
</p>
</a>
</li>
<li class="nav-item">
<a href="../index.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Stats- INDIA
</p>
</a>
</li>
<li class="nav-item">
<a href="worldwide.html" class="nav-link">
<i class="nav-icon fas fa-globe"></i>
<p>
Stats- WORLD
</p>
</a>
</li>
<li class="nav-item">
<a href="researchcentre.html" class="nav-link">
<i class="nav-icon fas fa-flask"></i>
<p>
Research Centre <span class="badge badge-danger new-text">New</span>
</p>
</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">
<i class="fa fa-info-circle nav-icon"></i>
<p>
About
</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!--Common navbar ends here-->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper bg-white">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-5 col-md-5">
<h1 class="">Dashboard </h1>
</div>
<div class="col-7 col-md-3">
</div>
<div class="col-12 col-md-4">
<ol class="breadcrumb d-flex flex-row-reverse pt-3 pt-md-0">
<li class="nav-item mr-1">
<a class="fab fa-twitter shadow" title="Share via Twitter" target="_blank" href="https://twitter.com/elcomrades">
</a>
</li>
<li class="nav-item mr-1">
<a class="fab fa-linkedin shadow" title="Share via Linkedin" target="_blank"
href="https://www.linkedin.com/shareArticle?mini=true&url=https://coronaindia.github.io/&title=#indiafightscorona&source=https://coronaindia.github.io/"></a>
</li>
<li class="nav-item mr-1">
<a href="https://www.instagram.com/?url=https://coronaindia.github.io/" title="Share via Instagram" target="_blank" class="fab fa-instagram shadow"></a>
</li>
<li class="nav-item mr-1">
<a class="fab fa-facebook shadow" target="_blank" title="Share via Facebook" href="https://www.facebook.com/elcomrades"></a>
</li>
<li class="nav-item mr-1">
<a target="_blank" title="Share via Whatsapp" href="whatsapp://send?&text= COVID-19 INDIA Dashboard https://coronaindia.github.io/" class="fab fa-whatsapp shadow"></a>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Main content -->
<section class="content" id="dashboardSection">
<div class="container-fluid">
<!-- Main row -->
<div class="row">
<section class="col-lg-12 connectedSortable">
<div class="card shadow" id="mapCard">
<div class="card-header border-0 mb-0">
<h3 class="card-title">
<i class="fas fa-globe mr-1" style="color:#20B4C4;"></i>
Worldwide Cases Information
</h3>
<!-- card tools -->
<div class="card-tools">
<button type="button" class="btn btn-dark btn-sm" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<div class="card-body mt-0 mb-0">
<div class="flexbox">
<div id="chartdiv"></div>
<div id="list" class="ncovWorldAmTable-div-thsw">
<table id="areas" class="ncovWorldAmTable-thsw compact hover order-column row-border">
<thead>
<tr>
<th>Country/State</th>
<th>Confirmed</th>
<th>Deaths</th>
<th>Recovered</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.card-body-->
</div>
<div align="right">
Data: <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins University</a>
</div>
</section>
</div>
</div>
</section>
<section class="content" id="dashboardSection">
<div class="container-fluid">
<!-- Main row -->
<div class="row">
<section class="col-lg-12 connectedSortable">
<div class="card shadow" id="mapCard">
<div class="card-header border-0 mb-0">
<h3 class="card-title">
<i class="fas fa-globe mr-1" style="color:#20B4C4;"></i>
Statistics on World Data
</h3>
<!-- card tools -->
<div class="card-tools">
<button type="button" class="btn btn-dark btn-sm" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<div class="card-body mt-0 mb-0">
<div class="flexbox">
<div id="container" class="ncovWorldStat-div-thsw">
</div>
</div>
</div>
<!-- /.card-body-->
</div>
<div align="right">
Data: <a href="#">Our World Data</a>, Idea Courtesy: Prof. Dr. TS Ravikumar, AIIMS Mangalagiri
</div>
</section>
</div>
</div>
</section>
</div>
<footer class="main-footer ">
<div class="container-fluid">
<div class="row">
<div class="col-6 col-md-4">
<span class="flex-nowrap "><i class="far fa-envelope text-danger"></i><span style="color:#20B4C4;"> elcomrades19@gmail.com</span></span>
</div>
<div class="col-6 col-md-2">
<span class="flex-nowrap ">Visitor Count : <span class="badge badge-danger" id="visitorCount"><i class='fa fa-spinner fa-spin'></i></span></span>
</div>
<div class="col-8 col-md-4 pt-md-0 pt-2">
<span class="flex-nowrap">Designed & Developed By <a href="https://github.com/orgs/elComrades">elComrades</a></span>
</div>
<div class="col-4 col-md-2">
<span class="flex-nowrap"><a href="https://github.com/orgs/elComrades/people"><i class="fab fa-github" style="color:black;"></i> Authors</a></span>
</div>
</div>
</div>
</footer>
<aside class="control-sidebar" style="" id="newsscroll">
<div id="frame">
<div class="chatbot-frame-thsw content bg-white shadow" style="">
<div class="bot-header-thsw contact-profile shadow rounded ">
<img src="media/images/robot.svg" class="img animated flip delay-0.2s">
<h4><span class="animated fadeIn delay-0.2s ">Corona Bot</span></h4>
<div>
<h6 style="float:left;"><span class="badge badge-success" onclick="start_over();" style="cursor: pointer;"><i class="fas fa-sync-alt"></i> Start Again</span></h6>
<h6><span class="badge badge-danger" data-widget="control-sidebar" data-slide="true" style="cursor: pointer;"><i class="fas fa-times"></i> Close</span></h6>
</div>
</div>
<div class="messages shadow rounded border border-dark" id="mssg">
<ul>
<li class="replies">
<p>Hello I am Corona Bot. And I am here to help you during novel corona virus outbreak.</p>
</li>
<li class="replies">
<p>Warning: Do not take this as medical advise. Consult your doctor if you feel sick.</p>
</li>
<li class="sent">
<button type="button" class="btn btn-success" onclick="start()">Risk Analyzer. 🤒</button>
<button type="button" class="btn btn-danger" onclick="quiz()">Take Quiz. 🤓</button>
</li>
</ul>
</div>
</div>
</div>
</aside>
</div>
<!--JQuery -->
<script src="media/jquery/3.4.1/jquery-3.4.1.min.js" type="text/javascript"></script>
<!--JQueryUI -->
<script src="media/jquery-ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<!--Bootstrap -->
<script src="media/bootstrap/bootstrap-4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<!-- list.min.js-->
<script src="media/list.js/1.5.0/dist/list.min.js"></script>
<!-- Json values and variables -->
<script src="media/misc/js/jsonNvars.js"> </script>
<!-- chart and map js -->
<script src="media/misc/js/themeSwitch.js"> </script>
<!--Bootstrap Datables -->
<script src="media/dataTables/DataTables-1.10.18/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="media/dataTables/DataTables-1.10.18/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<!--Bootstrap Datables Responsive -->
<script src="media/dataTables/Responsive-2.2.2/js/dataTables.responsive.min.js" type="text/javascript"></script>
<script src="media/dataTables/Responsive-2.2.2/js/responsive.bootstrap4.min.js" type="text/javascript"></script>
<!-- Datables api->processing -->
<script type="text/javascript" src="media/dataTables/api/processing().js"></script>
<!-- Datables select -->
<script src="media/dataTables/DataTables-1.10.18/js/dataTables.select.min.js"></script>
<!---moment.js dattimepicker---->
<script type="text/javascript" src="media/moment-js/moment.js"></script>
<!--highchart JS -->
<script src="media/highcharts/7.2.0/highcharts.js"></script>
<script src="media/highcharts/7.2.0/modules/exporting.js"></script>
<script src="media/highcharts/7.2.0/modules/export-data.js"></script>
<!--TextFit JS----->
<script type="text/javascript" src="media/textFit/2.4.0/textFit.min.js"></script>
<!-- ChartJS -->
<script src="media/chart.js/Chart.min.js"></script>
<!-- Am chart core -->
<script src="media/amCharts/amcharts4/core.js"></script>
<!-- Am chart charts -->
<script src="media/amCharts/amcharts4/charts.js"></script>
<script src="media/amCharts/amcharts4/themes/animated.js"></script>
<script src="media/amCharts/amcharts4/themes/material.js"></script>
<!-- Am chart maps -->
<script src="media/amCharts/amcharts4/maps.js"></script>
<script src="media/amCharts/geodata/data/countries2.js"></script>
<script src="media/amCharts/geodata/worldIndiaLow.js"></script>
<!-- amCharts includes -->
<script src="media/amCharts/amcharts4/themes/dark.js"></script>
<!-- Set am charts js -->
<script src="media/misc/js/amCharts.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.js"></script>
<!--OverlayScrollbars Plugin JS -->
<script type="text/javascript" src="media/overlayScrollbars/js/jquery.overlayScrollbars.js"></script>
<!--customBootstrap----->
<script type="text/javascript" src="media/prashantUIUX/customBootstrap/js/customBootstrap.js"></script>
<!-- Chat bot js -->
<script src="media/chatbot/js/chatbot.js"> </script>
<!-- Data -->
<!-- <script src="data/js/world_timeline.js"></script>
<script src="data/js/total_timeline.js"></script> -->
<script type="text/javascript" src="https://combinatronics.com/amcharts/covid-charts/master/data/js/world_timeline.js"></script>
<script type="text/javascript" src="https://combinatronics.com/amcharts/covid-charts/master/data/js/total_timeline.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" media="all" href="media/amCharts/custom/dark.css" />
<!-- Main app -->
<script src="media/amCharts/custom/app.js"></script>
<script>
// $.widget.bridge('uibutton', $.ui.button)
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script>
$.get('https://covid.ourworldindata.org/data/owid-covid-data.csv', function(data) {
var countries = null;
var countryDict = {};
$.ajax({
url: "https://covid.ourworldindata.org/data/ecdc/locations.csv",
type: "get",
async: false,
success: function(data) {
countries = data;
},
error: function() {
connectionError();
}
});
// start the table
var html = '<table id ="table_id" class="ncovWorldStat-thsw table table-bordered">';
// split into lines
var rows = data.split("\n");
var rows1 = countries.split("\n");
html += "<thead><tr><th>Country</th><th>Population</th><th>Date</th><th>Total Cases</th><th>Total Deaths</th><th>Total cases per million (tpm)</th><th>Death per million(dpm)</th><th>DPM/TPM</th></tr></thead>"
// parse lines
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
dd = dd - 1;
var today = yyyy + '-' + mm + '-' + dd;
var count = 0;
rows.forEach(function getvalues(ourrow) {
var columns = ourrow.split(",");
if (count == 0) {
count = 1; //ignore first row
// alert("ignored first row");
} else {
if (typeof columns[1] == "undefined") {
// do nothing
// alert("undefined");
} else {
if (!(columns[1] in countryDict)) { //repeating countries, quick fix
var date = new Date(columns[2]);
var t = new Date(today);
if (date < t) {} else {
html += "<tr>";
html += "<td>" + columns[1] + "</td>";
var x = 0;
countryDict[columns[1]] = "true";
var tpm = 0;
var dpm = 0;
var population1 = 0;
rows1.forEach(function getvalues(ourrow1) {
var str = columns[1];
var columns1 = ourrow1.split(",");
if (x == 0) {
var str1 = columns1[1];
if (str1 == str) {
var population = columns1[4];
if (columns[1] == "Jersey") {
population = "97857";
x = 1;
} else if (columns[1] == "Guernsey") {
population = "67052";
}
html += "<td>" + population + "</td>";
tpm = (parseFloat(columns[3])/population)*1000000;
tpm = tpm.toFixed(2);
dpm = (parseFloat(columns[5])/population)*1000000
dpm = dpm.toFixed(2);
x = 1;
}
}
})
if (x == 0) {
html += "<td>" + "-" + "</td>";
}
html += "<td>" + columns[2] + "</td>";
html += "<td>" + columns[3] + "</td>";
html += "<td>" + columns[5] + "</td>";
// var tpm = columns[7];
// var dpm = columns[9];
// if (columns[1] == "Jersey") {
// tpm1 = (columns[3] / 97857) * 1000000;
// tpm1 = tpm1.toFixed(2);
// dpm1 = (columns[5] / 97857) * 1000000;
// dpm1 = dpm1.toFixed(2);
// isCustom = 1;
// } else if (columns[1] = "Guernsey") {
// tpm1 = (columns[3] / 67052) * 1000000;
// tpm1 = tpm1.toFixed(2);
// dpm1 = (columns[5] / 67052) * 1000000;
// dpm1 = dpm1.toFixed(2);
// isCustom = 1;
// }
html += "<td>" + tpm + "</td>";
html += "<td>" + dpm + "</td>";
html += "<td>" + (dpm / tpm).toFixed(3) + "</td>";
// close row
html += "</tr>";
}
}
}
}
})
// close table
html += "</table>";
// insert into div
$('#container').append(html);
// $('#table_id').DataTable();
$('#table_id').DataTable({
dom: 'Bfrtip',
responsive: true,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
</script>
<link rel="stylesheet" href="media/misc/css/themeSwitch.css" type="text/css" />
</body>
</html>