51 lines
		
	
	
	
		
			1.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			51 lines
		
	
	
	
		
			1.2 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <html lang="en">
 | |
|   <head>
 | |
|     <meta charset="utf-8"/>
 | |
|     <script src="chart.js"></script>
 | |
|     <script src="chartjs-adapter-date-fns.bundle.js"></script>
 | |
|     <script src="chartjs-chart-error-bars.umd.js"></script>
 | |
|     <style>
 | |
|       body {
 | |
|           text-align: center;
 | |
|       }
 | |
|       div.chart {
 | |
|           margin: 20px auto;
 | |
|           position: relative;
 | |
|           height: 80vh;
 | |
|           width: 80vw;
 | |
|       }
 | |
|       label {
 | |
|           padding-left: 10px;
 | |
|           padding-right: 10px;
 | |
|       }
 | |
|     </style>
 | |
|     <title>💩📈</title>
 | |
|   </head>
 | |
|   <body>
 | |
|     <h1>💩📈</h1>
 | |
|     <div id="controls">
 | |
|       <label>
 | |
|         Start date:
 | |
|         <input id="startDate" type="date">
 | |
|       </label>
 | |
|       <label>
 | |
|         End date:
 | |
|         <input id="endDate" type="date">
 | |
|       </label>
 | |
|     </div>
 | |
|     <div class="chart">
 | |
|       <canvas id="northCanvas"></canvas>
 | |
|     </div>
 | |
|     <div class="chart">
 | |
|       <canvas id="southCanvas"></canvas>
 | |
|     </div>
 | |
|     <script src="poopGraph.js"></script>
 | |
|     <div>
 | |
|       Download data: <a href="/data.csv">CSV</a> <a href="/data.json">JSON</a>
 | |
|     </div>
 | |
|     <div>
 | |
|       <a href="https://www.mwra.com/biobot/biobotdata.htm">Source: Massachusetts Water Resources Authority</a>
 | |
|     </div>
 | |
|   </body>
 | |
| </html>
 |