Newer
Older
<!--
Authors:
Lillian Gray 2017-2020
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="image/x-icon" href="images/favicon.png" rel="shortcut icon">
<link rel="stylesheet" href="css/main.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
<script src="js/loader.js"></script>
<script>
google.charts.load('45.2', {packages:['corechart', 'controls']});
google.charts.setOnLoadCallback(onAPILoad);
<a id="pageTitle" href=".">Electrical Energy Consumption</a>
<button class="aboutButton" onclick="changeDashboard('howToUse')">How to Use</button>
<button class="aboutButton" onclick="changeDashboard('about')">About</button>
<div id="chart" class="flexParent">
<div id="leftLegend"></div>
<div id="dashboard">
<div id="closeButton" class="close displayNone" onclick="changeDashboard('close')"></div>
<div id="spinner" class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<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 id="rightLegend"></div>
<div class="seriesSelect flexParent">
<div>
<div class="selectTitle">Home</div>
<div class="selectOptionsWrapper">
<div class="selectOption">
<input class="checkbox" type="checkbox"> Total
<input class="checkbox" type="checkbox"> Barrett
<input class="checkbox" type="checkbox"> Bundy
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<input class="checkbox" type="checkbox"> Hoerner
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Mills
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> OA
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Warren
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Wilson
</div>
</div>
</div>
<div>
<div class="selectTitle">Work</div>
<div class="selectOptionsWrapper">
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 1
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 2
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 3
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 4
</div>
</div>
</div>
<div>
<div class="selectTitle">Play</div>
<div class="selectOptionsWrapper">
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 1
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 2
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 3
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 4
<div id="siteOptions" class="flexParent">
<a href="#" onclick="downloadCSV(this)"><button class="csvButton" type="button">Download CSV</button></a>
<div>
<input id="permalink" type="text" value=""></input>
<button class="getPermalink inactive" type="button" onclick=genPermalink();>Get Permalink</button>
<!-- 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 -->