Formatting of Statistics Page

arc12012 · Apr 13, 2017 · fb62bfc · fb62bfc
1 parent 2dbdb55
commit fb62bfc
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 124 deletions.
diff --git a/WebContent/html/javascript/statistics.jsp b/WebContent/html/javascript/statistics.jsp
@@ -59,9 +59,9 @@ function displayData() {
 
         	// Set chart options
         	var options = {'title':'Chart of Devices',
-                       		'width':700,
-                       		'height':700,
-                       		'backgroundColor':'#94969A'};
+                       		'width':600,
+                       		'height':400,
+                       		'backgroundColor':'#E9EAEB'};
 
         	// Instantiate and draw our chart, passing in some options.
         	var chart = new google.visualization.PieChart(document.getElementById('piechart'));
@@ -86,11 +86,11 @@ function displayData() {
                              ]);
             
         	var options = {'title':'Devices in terms of Status',
-               		'width':700,
-               		'height':700,
+               		'width':600,
+               		'height':400,
                		'bar': {groupWidth: "75%"},                    
                		'legend': { position: "none" },
-               		'backgroundColor':'#94969A'};
+               		'backgroundColor':'#E9EAEB'};
 
 			// Instantiate and draw our chart, passing in some options.
 			var chart = new google.visualization.ColumnChart(document.getElementById('colchart'));

diff --git a/WebContent/html/webpages/index.jsp b/WebContent/html/webpages/index.jsp
@@ -67,7 +67,7 @@
         <p>Just curious to see what devices we have to offer? You've come to the right place.</p>   
       </div>
     </a>
-    <a class = "divlink" href="map.jsp">
+    <a class = "divlink" href="statisticsPage.jsp">
       <div class = "menuOption">
         <h2>Map</h2>
         <p>Wanna see the distribution of devices throughout the world? Check it out! HERE!</p>

diff --git a/WebContent/html/webpages/map.jsp b/WebContent/html/webpages/map.jsp
diff --git a/WebContent/html/webpages/statisticsPage.jsp b/WebContent/html/webpages/statisticsPage.jsp
@@ -1,26 +1,45 @@
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-  <meta name="description" content="">
-  <meta name="author" content="">
-
-  <title>Synchrony Financial</title>
-
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-  <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
-  <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
-  <style>
-  	div.infoContainer{
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Synchrony Financial</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">  
+    <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
+
+    <style>
+      /* Always set the map height explicitly to define the size of the div
+       * element that contains the map. */
+      #map {
+        height: 80%;
+        width: 80%;
+        margin:0 auto;
+        border-style: solid;
+        border-width: 20px;
+      }
+
+      h2{
+        text-align: center;
+        padding-bottom: 10px;
+      }
+      
+      div.infoContainer{
       border: solid; 
       border-width: thin; 
       padding: 15px;
       background-color: #E9EAEB;
       display: inline-block;
+      margin-bottom: 30px;
+      margin-top: 25px;
+      text-align: left;
     }
     
     div.imgContainer{
@@ -33,17 +52,68 @@
       width: 200px; 
       text-align: center; 
     }
-  </style>
-</head>
-<body>
-  <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
-  	<%@ include file="navbar.jsp"%>
-  </nav>
-  <div style = "background-color: #94969A">
-  <div class = infoContainer id="stats"></div><br>
-  <div style = "display: inline-block" id="piechart"></div>
-  <div style = "display: inline-block" id="colchart"></div>
+    </style>
+
+  </head>
+
+  <body>
+
+    <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
+      <%@ include file="navbar.jsp"%>
+    </nav>
+
+    <h2>Distribution of Devices Nationwide</h2>
+
+    <div id="map"></div>
+    <script>
+
+      function initMap() {
+
+        var map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 4,
+          center: {lat: 39.023617, lng: -94.69357}
+        });
+
+        // Create an array of alphabetical characters used to label the markers.
+        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+        // Add some markers to the map.
+        // Note: The code uses the JavaScript Array.prototype.map() method to
+        // create an array of markers based on a given "locations" array.
+        // The map() method here has nothing to do with the Google Maps API.
+        var markers = locations.map(function(location, i) {
+          return new google.maps.Marker({
+            position: location,
+            label: labels[i % labels.length]
+          });
+        });
+
+        // Add a marker clusterer to manage the markers.
+        var markerCluster = new MarkerClusterer(map, markers,
+            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
+      }
+      var locations = [
+		{lat: 37.774929, lng: -122.419416}, //San Francisco, CA
+		{lat: 14.599512, lng: 120.984219}, //Manilla, Philippines
+		{lat: 17.385044, lng: 78.486671}, //Hyderabad, India
+        {lat: 41.878114, lng: -87.629798}, //Chicago, IL
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734} //Stamford, CT
+      ]
+    </script>
+    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCndOcexx4GAOGkRKBeK1E43u_sB9gjcaU&callback=initMap">
+    </script>
+    <h2>Device Availability Statistics</h2>
+  <div style = "background-color: #94969A;">
+  <div style = "display: inline-block; border-style: solid; border-width: 20px; margin: 0px 0px 0px 50px;" id="piechart"></div>
+  <div style = "float: right; border-style: solid; border-width: 20px; margin: 0px 50px 0px 0px;" id="colchart"></div>
+  <div style = "text-align: center;">
+  	<div style = "" class = infoContainer id="stats"></div>
+  </div>
   </div>
   <%@ include file="../javascript/statistics.jsp" %>
-</body>
+  </body>
 </html>