Skip to content
Snippets Groups Projects
Commit c1d71d87 authored by Lillian Gray's avatar Lillian Gray
Browse files

Create legends to left and right of dashboard #6

parent 1a80bcd5
Branches
No related merge requests found
...@@ -98,11 +98,23 @@ header a, header button { ...@@ -98,11 +98,23 @@ header a, header button {
box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222;
} }
#chart {
width: 100%;
margin: 20px 0;
flex-wrap: nowrap;
justify-content: space-evenly;
}
#leftLegend, #rightLegend {
width: 10%;
margin: 0;
}
#dashboard { #dashboard {
width: 80%; width: 75%;
margin: 0;
/* height is responsive, + 75 is for height of control */ /* height is responsive, + 75 is for height of control */
height: calc(100vh * .6 + 75px); height: calc(100vh * .6 + 75px);
margin: 20px auto;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
......
...@@ -32,32 +32,36 @@ ...@@ -32,32 +32,36 @@
</div> </div>
</header> <!-- end header --> </header> <!-- end header -->
<div id="dashboard"> <div id="chart" class="flexParent">
<div id="closeButton" class="close displayNone" onclick="changeDashboard('close')"></div> <div id="leftLegend"></div>
<div id="spinner" class="spinner"> <div id="dashboard">
<div class="bounce1"></div> <div id="closeButton" class="close displayNone" onclick="changeDashboard('close')"></div>
<div class="bounce2"></div> <div id="spinner" class="spinner">
<div class="bounce3"></div> <div class="bounce1"></div>
</div> <div class="bounce2"></div>
<div id="lineChart"></div> <div class="bounce3"></div>
<div id="control"></div> </div>
<div id="aboutText" class="displayNone"> <div id="lineChart"></div>
<p class="about"> <div id="control"></div>
The energy eDisplay is a project between Earlham College's Green Science Hardware Interface Project (or GRIP), and the Maintenance Department. <div id="aboutText" class="displayNone">
Magnets around each buildings&#39 main power line collect and store <p class="about">
values in a database which we harvest and visualize here using The energy eDisplay is a project between Earlham College's Green Science Hardware Interface Project (or GRIP), and the Maintenance Department.
Google&#39s Chart and Visualization API. Magnets around each buildings&#39 main power line collect and store
</p> values in a database which we harvest and visualize here using
<p class="about"> Google&#39s Chart and Visualization API.
For questions, comments, or display issues please send an email to <nobr>green-science@cs.earlham.edu</nobr>. </p>
</p> <p class="about">
</div> For questions, comments, or display issues please send an email to <nobr>green-science@cs.earlham.edu</nobr>.
<div id="howToUse" class="displayNone"> </p>
<p class="about"> </div>
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. <div id="howToUse" class="displayNone">
</p> <p class="about">
</div> 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.
</div> <!-- end dashboard and chart. --> </p>
</div>
</div> <!-- end dashboard and chart. -->
<div id="rightLegend"></div>
</div>
<div id="siteOptions" class="flexParent"> <div id="siteOptions" class="flexParent">
<a href="#" onclick="downloadCSV(this)"><button class="csvButton" type="button">Download CSV</button></a> <a href="#" onclick="downloadCSV(this)"><button class="csvButton" type="button">Download CSV</button></a>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment