Create legends to left and right of dashboard #6

css/main.css

@@ -98,11 +98,23 @@ header a, header button {
     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 {
-	width: 80%;
+	width: 75%;
+	margin: 0;
 	/* height is responsive, + 75 is for height of control */
 	height: calc(100vh * .6 + 75px);
-	margin: 20px auto;
 	position: relative;
 	overflow: hidden;
 	background-color: #fff;

index.html

@@ -32,32 +32,36 @@
 		</div>
 	</header> <!-- end header -->
 
-	<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&#39 main power line collect and store
-				values in a database which we harvest and visualize here using
-				Google&#39s 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="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&#39 main power line collect and store
+					values in a database which we harvest and visualize here using
+					Google&#39s 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="rightLegend"></div>
+	</div>
 
 	<div id="siteOptions" class="flexParent">
 		<a href="#" onclick="downloadCSV(this)"><button class="csvButton" type="button">Download CSV</button></a>