coronaindia
Version:
COVID19 India Tracker, predictive analytics and research. Built by engineers, data scientists, AI and medical professionals.
527 lines (488 loc) • 21.5 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 async src="https://www.googletagmanager.com/gtag/js?id=UA-161859093-2"></script>
<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="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">
<meta name="theme-color" content="#FFFFFF" />
<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">
<!-- Theme style -->
<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" />
<!--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/allAnimation.css" type="text/css" />
<!-- <link rel="stylesheet" href="media/misc/css/botFrame.css" type="text/css" /> -->
<link rel="manifest" href="media/pwa/manifest.json" />
</head>
<body class="hold-transition sidebar-mini layout-fixed" id="pagescroll" ng-app="" ng-cloak>
<input type="text" name="themeTypeElm" id="themeTypeElm" class="d-none themeTypeElm" value="1">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-link-menuBtn" data-widget="pushmenu" href="#"><img class="img" src="media/images/open-menu.svg" width="20px" height="20px">
</a>
</li>
<li class="nav-item mt-2 ">
<a href="" style="color:black;" 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 bg-white 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 font-weight-bold text-shadow " style="color:black;text-shadow: 0.5px 0.5px #FF0000;">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="#dashboardSection" 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="#newsCard" class="nav-link">
<i class="nav-icon fas fa-rss-square"></i>
<p>
Guidelines
</p>
</a>
</li>
<li class="nav-item">
<a href="#faqCard" class="nav-link">
<i class="nav-icon far fa-question-circle"></i>
<p>
FAQs
</p>
</a>
</li>
<li class="nav-item">
<a href="#helplineCard" class="nav-link">
<i class="nav-icon fas fa-tty"></i>
<p>
Helpline
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-chart-bar"></i>
<p>
Graphs
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#mapCard" class="nav-link">
<i class="fas fa-map-marker-alt nav-icon"></i>
<p>State Wise Cases Map</p>
</a>
</li>
<li class="nav-item">
<a href="#doughnutCard" class="nav-link">
<i class="fas fa-chart-pie nav-icon"></i>
<p>Cases 2019-nCoV</p>
</a>
</li>
<li class="nav-item">
<a href="#lineCard" class="nav-link">
<i class="fas fa-chart-line nav-icon"></i>
<p>Trend of 2019-nCoV</p>
</a>
</li>
<li class="nav-item">
<a href="#lineCard2" class="nav-link">
<i class="fas fa-chart-line nav-icon"></i>
<p>Doubling rate 2019-nCoV</p>
</a>
</li>
<li class="nav-item">
<a href="#bargraph" class="nav-link">
<i class="fas fa-chart-bar nav-icon"></i>
<p>State & UTs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#latestnewsCard" class="nav-link">
<i class="fas fa-rss nav-icon"></i>
<p>
News Center
</p>
</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">
<i class="fa fa-info-circle"></i>
<p>
About
</p>
</a>
</li>
<!-- <li class="nav-item ml-3"> -->
<!-- <a class="fab fa-twitter shadow" title="Share via Twitter" target="_blank" href="https://twitter.com/intent/tweet?button_hashtag=indiafightscorona&ref_src=twsrc%5Etfw"> -->
<!-- </a> -->
<!-- <a target="_blank" href="https://twitter.com/intent/tweet?button_hashtag=indiafightscorona&ref_src=twsrc%5Etfw">#indiafightscorona</a> -->
<!-- </li> -->
<!-- <li class="nav-item ml-3 mt-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 ml-3 mt-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 ml-3 mt-1"> -->
<!-- <a class="fab fa-facebook shadow" target="_blank" title="Share via Facebook" href="https://www.facebook.com/sharer.php?u=https://coronaindia.github.io/"></a> -->
<!-- </li> -->
<!-- <li class="nav-item ml-3 mt-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> -->
</nav>
</div>
</aside>
<!--Common navbar ends here-->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper bg-gradient-white">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Dashboard
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<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">
<!-- Left col -->
>
<section class="col-lg-12 connectedSortable">
<!-- Map card -->
<div class="card bg-gradient-white shadow" id="mapCard">
<div class="card-header border-0 mb-0">
<h3 class="card-title">
<i class="fas fa-map-marker-alt mr-1" style="color:red;"></i>
State Wise Case Information
</h3>
<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>
</div>
<div class="card-body mt-0 mb-0">
<!-- <div id="googleMapNcovCas" style="height: 550px; width: 100%; display none;"></div> -->
<div id="amMapdiv" style="width: 100%; height: 400px; "></div>
</div>
<div class="card-footer bg-transparent d-none">
</div>
</div>
</section>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<strong><img class="img" src="media/images/copyright.svg" width="15px" height="15px">2020 <a href="https://github.com/orgs/elComrades">elComrades</a></strong>
<strong class="float-right">Designed & Developed By <a href="https://github.com/orgs/elComrades">elComrades</a></strong>
<br>
<strong><i class="far fa-envelope text-danger"></i><span style="color:blue;"> elcomrades19@gmail.com</span></strong>
<strong class="float-right"><a href="https://github.com/orgs/elComrades/people"><i class="fab fa-github" style="color:black;"></i> Authors</a></strong>
</footer>
<aside class="control-sidebar bg-white" style="" id="newsscroll">
<div id="frame">
<div class="content shadow" style=" height: 685px;">
<div class="contact-profile shadow rounded border border-dark">
<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>
</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>
<!---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/json/indiaLow.json"></script> -->
<!-- mapnChars js -->
<script src="media/misc/js/mapNcharts.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>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- <script async defer SameSite=None src="https://maps.google.co.in/maps/api/js?key=AIzaSyB9o2-H1VP2p3JwxC8f-yr_Le7UpuwovPE&callback=initMap"></script> -->
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Chat bot js -->
<script src="media/chatbot/js/chatbot.js"> </script>
<!-- common js -->
<script src="media/misc/js/common.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
//Coro cases choropleth map
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
window.onload = function() {
/*
jQuery.getJSON( "https://www.amcharts.com/lib/4/geodata/json/india2019Low.json", function( geo ) {
if ( am4geodata_data_countries2[ geo.country_code ] !== undefined ) {
currentMap = am4geodata_data_countries2[ geo.country_code ][ "maps" ][ 0 ];
// add country title
if ( am4geodata_data_countries2[ geo.country_code ][ "country" ] ) {
title = am4geodata_data_countries2[ geo.country_code ][ "country" ];
}
}
});
*/
var url = window.location.href;
var country = url.substring(url.lastIndexOf('#') + 1);
console.log("country is, ",country);
// Default map
var defaultMap = country?country:"india2019High";
// calculate which map to be used
var currentMap = defaultMap;
var title = "";
// Create map instance
var chart = am4core.create("amMapdiv", am4maps.MapChart);
chart.titles.create().text = title;
// Set map definition
chart.geodataSource.url = "media/amCharts/geodata/json/" + currentMap + ".json";
chart.geodataSource.events.on("parseended", function(ev) {
/* for(var i = 0; i < ev.target.data.features.length; i++) { polygonSeries.data.push(); } */
$.when( gentAmChartCovCasSeriesDiffObj ).then(function( status ) {
polygonSeries.data = amChartSateCovCasSeries;
});
});
// Set projection
chart.projection = new am4maps.projections.Mercator();
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
chart.maxZoomLevel = 1;
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
//Set min/max fill color for each area
polygonSeries.heatRules.push({
property: "fill",
target: polygonSeries.mapPolygons.template,
//min: chart.colors.getIndex(1).brighten(1),
//max: chart.colors.getIndex(1).brighten(-0.6)
"min": am4core.color("#e3f2fd"),
"max": am4core.color("#1a237e")
});
// Make map load polygon data (state shapes and names) from GeoJSON
polygonSeries.useGeodata = true;
// Set up heat legend
let heatLegend = chart.createChild(am4maps.HeatLegend);
heatLegend.series = polygonSeries;
heatLegend.align = "right";
heatLegend.width = am4core.percent(25);
heatLegend.marginRight = am4core.percent(4);
heatLegend.minValue = 0;
heatLegend.maxValue = 40000000;
heatLegend.valign = "bottom";
// Set up custom heat map legend labels using axis ranges
var minRange = heatLegend.valueAxis.axisRanges.create();
minRange.value = heatLegend.minValue;
minRange.label.text = "COVID19 Cases Scale";
var maxRange = heatLegend.valueAxis.axisRanges.create();
maxRange.value = heatLegend.maxValue;
maxRange.label.text = "";
// Blank out internal heat legend value axis labels
heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function(labelText) {
return "";
});
// Configure series tooltip
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}: {value}";
polygonTemplate.nonScalingStroke = true;
polygonTemplate.strokeWidth = 0.5;
polygonTemplate.fill = am4core.color("#00e676");
//#74B266
// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
//hs.properties.fill = chart.colors.getIndex(1).brighten(-0.5);
hs.properties.fill = am4core.color("#673ab7");
};
}); // end am4core.ready()
</script>
</body>
</html>