index.html

<!doctype html>
<html lang="en">

<head>
	<title>Hays Counts</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta property="og:title" content="Hays CISD Covid data">
	<meta property="og:description"
		content="Graphs of the Hays CISD Covid Dashboard data. Daily, weekly, and campus breakdown of how Covid is affecting Hays Schools">
	<meta property="og:image" content="http://hayscounts.com/images/graph-sample.png">
	<meta property="og:image:url" content="http://hayscounts.com/images/graph-sample.png">
	<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
	<link rel="manifest" href="site.webmanifest">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="./dashboard.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-BV3RCYZQTR"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag() { dataLayer.push(arguments); }
		gtag('js', new Date());

		gtag('config', 'G-BV3RCYZQTR');
	</script>
</head>

<body>
	<nav class="navbar navbar-light bg-primary">
		<div class="container">
			<h2 class="navbar-text">Hays CISD COVID Data</h2>
			<ul class="nav navbar-nav navbar-right">
				<li class="nav-item">
					<p class="navbar-text">Last Updated: 2022-04-12</p>
				</li>
				<li class="nav-item active">
					<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
						data-toggle="dropdown">
						About
					</a>
					<div class="dropdown-menu">
						<p class="dropdown-content">This site is not managed by, nor is it
							affiliated with Hays CISD</p>
					</div>
				</li>
			</ul>
		</div>
	</nav>
	<main role="main">
		<div class="container-fluid">
			<h3>The graphs below are generated using public data posted on the
				<a
					href="https://docs.google.com/document/d/e/2PACX-1vRMIhWmz2y8FypOh1FhQFtY3PY1Lwr7g8ylKwuq3TZd11RAJDzx5HzaXTT8dMJq55BYOd6KnbtclHTJ/pub">
					Hays CISD Covid Dashboard
				</a>
			</h3>
			<h3>
				This site aims to provide better visualization of the COVID data from Hays CISD schools.
				This site is not managed by
				Hays CISD, nor is it affiliated with Hays CISD.
			</h3>
			<div class="card custom-1">
				<div class="card-body">
					<center>
						<h1>Daily Data</h1>
					</center>
				</div>
			</div>
			<div class="col-xl-6">
				<h4>New Daily Cases</h4>
				<canvas class="my-2" id="newDailyCombinedChart" width="900" height="380"></canvas>
			</div>
			<div class="row">
				<div class="col-md-6">
					<canvas class="my-2" id="newDailyStudentChart" width="900"
						height="380"></canvas>
				</div>
				<div class="col-md-6">
					<canvas class="my-2" id="newDailyStaffChart" width="900" height="380"></canvas>
				</div>
			</div>
			<div class="card custom-1">
				<div class="card-body">
					<center>
						<h1>Weekly Data</h1>
					</center>
				</div>
			</div>
			<div class="col-xl-6">
				<h4>New Cases</h4>
				<canvas class="my-2" id="newCombinedChart" width="900" height="380"></canvas>
			</div>
			<div class="row">
				<div class="col-md-6">
					<canvas class="my-2" id="newStudentChart" width="900" height="380"></canvas>
				</div>
				<div class="col-md-6">
					<canvas class="my-2" id="newStaffChart" width="900" height="380"></canvas>
				</div>
			</div>
			<div class="col-xl-6">
				<h4>Cumulative Cases</h4>
				<canvas class="my-2" id="cumulativeChart" width="900" height="380"></canvas>
			</div>
			<div class="row">
				<div class="col-md-6">
					<canvas class="my-2" id="cumulativeStudentChart" width="900"
						height="380"></canvas>
				</div>
				<div class="col-md-6">
					<canvas class="my-2" id="cumulativeStaffChart" width="900"
						height="380"></canvas>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<canvas class="my-2" id="HSPieChart" width="900" height="380"></canvas>
				</div>
				<div class="col-md-6">
					<canvas class="my-2" id="MSPieChart" width="900" height="380"></canvas>
				</div>
				<div class="col-md-6">
					<canvas class="my-2" id="ESPieChart" width="900" height="380"></canvas>
				</div>
			</div>
		</div>
	</main>

	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="scripts/data.js"></script>
	<script src="scripts/config.js"></script>

	<script>
		// === include 'setup' then 'config' above ===

		var newDailyCombinedChart = new Chart(
			document.getElementById('newDailyCombinedChart'),
			new_daily_combined_config
		);
		var newDailyStudentChart = new Chart(
			document.getElementById('newDailyStudentChart'),
			new_daily_student_config
		);
		var newDailyStaffChart = new Chart(
			document.getElementById('newDailyStaffChart'),
			new_daily_staff_config
		);
		var newCombinedChart = new Chart(
			document.getElementById('newCombinedChart'),
			new_combined_config
		);
		var newStudentChart = new Chart(
			document.getElementById('newStudentChart'),
			new_student_config
		);
		var newStaffChart = new Chart(
			document.getElementById('newStaffChart'),
			new_staff_config
		);
		var cumulativeChart = new Chart(
			document.getElementById('cumulativeChart'),
			cumulative_config
		);
		var cumulativeStudentChart = new Chart(
			document.getElementById('cumulativeStudentChart'),
			cumulative_student_config
		);
		var cumulativeStaffChart = new Chart(
			document.getElementById('cumulativeStaffChart'),
			cumulative_staff_config
		);
		var ESPieChart = new Chart(
			document.getElementById('ESPieChart'),
			es_pie_config
		);
		var MSPieChart = new Chart(
			document.getElementById('MSPieChart'),
			ms_pie_config
		);
		var HSPieChart = new Chart(
			document.getElementById('HSPieChart'),
			hs_pie_config
		);
	</script>
</body>