<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Earlham College Electrical Energy Consumptionis</title> <link type="image/x-icon" href="images/favicon.png" rel="shortcut icon"> <link rel="stylesheet" type="text/css" href="css/main.css" /> <!--Scripts at bottom --> </head> <body onload="initializeLineChart();"> <div id="header"> <div class="flex-parent"> <img src="images/logo.png" title="Logo" border="none"/></img> <a id="page-title" href=".">Electrical Energy Consumption</a> <button id = "howToButton" class="aboutBtn" onclick="changeDashboard('howToUse')">How to Use</button> <button id="aboutButton" class="aboutBtn" onclick="changeDashboard('about')">About</button> </div> </div> <!-- end header --> <div id="dashboard"> <div id="lineChart"></div> <div id="control"></div> <div id="aboutText" class="displayNone"> <p class="about"> The energy eDisplay is a project between Earlham College's Green Science Hardware Interface Project (or GRIP), and the Maintenance Department. Magnets around each buildings' main power line collect and store values in a database which we harvest and visualize here using Google's Chart and Visualization API. </p> <p class="about"> For questions, comments, or display issues please send an email to <nobr>green-science@cs.earlham.edu</nobr>. </p> </div> <div id="howToUse" class="displayNone"> <p class="about"> You can click the building buttons below the graph to choose which buildings are displayed in the graph. Move the slider below the graph to view the energy consumption during a period of time. The Download CSV button will download a .csv file of the data currently being shown on the graph. The Get Permalink button will generate a link that will link to the site with the data being currently shown. </p> </div> </div> <!-- end dashboard and chart. --> <div id="site-options" class="flex-parent"> <a id="csvDownload" href="#"><button class="csvBtn" type="button">Download CSV</button></a> <form id="plink-form"> <input id="plink" type="text" value=""></input> <input class="getPlink"type="button" value="Get Permalink" onclick=" document.getElementById('plink').value = genPermalink(); document.getElementById('plink').select(); "></input> </form> </div> <div id="site-details"> <!-- Add any site details below. Please leave credit in my name (Leif?)--> <p>This is a project of Green Science and the Maintenance Department at Earlham College. <br /> Gaps in the graph signify where power went out. Click the About button to find out more about this project.</p> </div> <!-- end site details --> <!-- scripts --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/loader.js"></script> <script type="text/javascript"> google.charts.load('45.2', {packages:['corechart', 'controls']}); </script> </body> </html>