From 7299dbfe252e8cec037032670058f1bbb0424eff Mon Sep 17 00:00:00 2001
From: John Costa <john.costa_iii@uconn.edu>
Date: Sun, 23 Apr 2017 23:09:15 -0400
Subject: [PATCH] completed final three charts, added filtering for other
 category

---
 WebContent/html/javascript/statistics.jsp   | 131 ++++++++++++++++++--
 WebContent/html/webpages/statisticsPage.jsp |   8 +-
 src/database/StatisticsQueries.java         |  31 ++++-
 src/entities/Statistics.java                |   5 +-
 4 files changed, 161 insertions(+), 14 deletions(-)

diff --git a/WebContent/html/javascript/statistics.jsp b/WebContent/html/javascript/statistics.jsp
index c84980b..47bd52f 100644
--- a/WebContent/html/javascript/statistics.jsp
+++ b/WebContent/html/javascript/statistics.jsp
@@ -18,12 +18,16 @@ String locString = Statistics.arrayToString(genLocations);
 //device type queries
 Statistics[] genTypes = StatisticsQueries.getDeviceTypes();
 String typeString = Statistics.arrayToString(genTypes);
+// device manufacturer queries
+Statistics[] genManu = StatisticsQueries.getDeviceManu();
+String manuString = Statistics.arrayToString(genManu);
 %>
 	<script type=text/javascript
 		src="https://www.gstatic.com/charts/loader.js"></script>
 	<script>
 var statistics = makeStatistics(); //initialize statistics
 var deviceTypes = makeTypes(); //initialize types
+var deviceManus = makeManu(); //initialize manufaturers
 displayData(); //run the function
 
 function displayData() {
@@ -58,6 +62,10 @@ function displayData() {
       	google.charts.setOnLoadCallback(drawPie);
       	google.charts.setOnLoadCallback(drawCol);
       	google.charts.setOnLoadCallback(drawTypesBar);
+      	google.charts.setOnLoadCallback(drawManuBar);
+      	google.charts.setOnLoadCallback(drawTypesPie);
+      	google.charts.setOnLoadCallback(drawManuPie);
+
       	// Callback that creates and populates a data table,
       	// instantiates the pie chart, passes in the data and
       	// draws it.
@@ -68,10 +76,10 @@ function displayData() {
         	data.addColumn('string', 'Status');
         	data.addColumn('number', 'Count');
         	for (var i = 0; i<statistics.length; i++){
-        	data.addRow([statistics[i].status, statistics[i].count]); //fixed this to match the new database
+        		data.addRow([statistics[i].status, statistics[i].count]); //fixed this to match the new database
         	}
         	// Set chart options
-        	var options = {'title':'Chart of Devices',
+        	var options = {'title':'Percentage Chart of Device Statuses',
                        		'width':600,
                        		'height':400,
                        		'backgroundColor':'#E9EAEB'};
@@ -114,13 +122,19 @@ function displayData() {
     		
     		// Create the data table.
             	var data = new google.visualization.DataTable();
+    			var otherDevices = 0;
             	data.addColumn('string', 'Device Type');
             	data.addColumn('number', 'Count');
-            	
+            	var mainTypeArray = ['Computer','Smartphone','Tablet','Camera','Storage Device'];
             	for (var i = 0; i<deviceTypes.length; i++){
-                	data.addRow([deviceTypes[i].type, deviceTypes[i].count]); //fixed this to match the new database
-                }
-            	
+            		if (mainTypeArray.indexOf(deviceTypes[i].type) < 0) {
+            			otherDevices += deviceTypes[i].count;
+            		}
+            		else {
+                		data.addRow([deviceTypes[i].type, deviceTypes[i].count]); //fixed this to match the new database
+            		}
+            	}
+            	data.addRow(["Other",otherDevices]);
             	var view = new google.visualization.DataView(data);
                 view.setColumns([0, 1,
                                  { calc: "stringify",
@@ -137,19 +151,116 @@ function displayData() {
                    		'backgroundColor':'#E9EAEB'};
 
     			// Instantiate and draw our chart, passing in some options.
-    			var chart = new google.visualization.BarChart(document.getElementById('bardevicechart'));
+    			var chart = new google.visualization.BarChart(document.getElementById('bartypechart'));
     			chart.draw(view, options);
 
     		}
+		
+		function drawManuBar() {
+    		
+    		// Create the data table.
+            	var data = new google.visualization.DataTable();
+            	data.addColumn('string', 'Manufacturer');
+            	data.addColumn('number', 'Count');
+            	var otherDevices = 0;
+            	var mainManuArray = ['Apple','Amazon','Microsoft','Samsung','Intel'];
+            	
+            	for (var i = 0; i<deviceManus.length; i++){
+            		if (mainManuArray.indexOf(deviceManus[i].manu) < 0) {
+            			otherDevices += deviceManus[i].count;
+            		}
+            		else {
+                	data.addRow([deviceManus[i].manu, deviceManus[i].count]); //fixed this to match the new database
+            		}
+            	}
+            	data.addRow(["Other",otherDevices]);
+            	var view = new google.visualization.DataView(data);
+                view.setColumns([0, 1,
+                                 { calc: "stringify",
+                                   sourceColumn: 1,
+                                   type: "string",
+                                   role: "annotation" }
+                                 ]);
+                
+            	var options = {'title':'Devices in terms of Manufacturer',
+                   		'width':600,
+                   		'height':400,
+                   		'bar': {groupWidth: "75%"},                    
+                   		'legend': { position: "none" },
+                   		'backgroundColor':'#E9EAEB'};
+
+    			// Instantiate and draw our chart, passing in some options.
+    			var chart = new google.visualization.BarChart(document.getElementById('barmanuchart'));
+    			chart.draw(view, options);
+
+    		}
+		function drawTypesPie() {
+			
+			// Create the data table.
+	        	var data = new google.visualization.DataTable();
+	        	data.addColumn('string', 'Hardware Type');
+	        	data.addColumn('number', 'Count');
+	        	var otherDevices = 0;
+	        	var mainTypeArray = ['Computer','Smartphone','Tablet','Camera','Storage Device'];
+            	for (var i = 0; i<deviceTypes.length; i++){
+            		if (mainTypeArray.indexOf(deviceTypes[i].type) < 0) {
+            			otherDevices += deviceTypes[i].count;
+            		}
+            		else {
+                		data.addRow([deviceTypes[i].type, deviceTypes[i].count]); //fixed this to match the new database
+            		}
+            	}
+            	data.addRow(["Other",otherDevices]);
+	        	// Set chart options
+	        	var options = {'title':'Percentage Chart of Hardware Types',
+	                       		'width':600,
+	                       		'height':400,
+	                       		'backgroundColor':'#E9EAEB'};
+
+	        	// Instantiate and draw our chart, passing in some options.
+	        	var chart = new google.visualization.PieChart(document.getElementById('pietypechart'));
+	        	chart.draw(data, options);
+	        
+			}
+		function drawManuPie() {
+			
+			// Create the data table.
+	        	var data = new google.visualization.DataTable();
+	        	data.addColumn('string', 'Manufacturer');
+	        	data.addColumn('number', 'Count');
+	        	var otherDevices = 0;
+            	var mainManuArray = ['Apple','Amazon','Microsoft','Samsung','Intel'];
+            	
+            	for (var i = 0; i<deviceManus.length; i++){
+            		if (mainManuArray.indexOf(deviceManus[i].manu) < 0) {
+            			otherDevices += deviceManus[i].count;
+            		}
+            		else {
+                	data.addRow([deviceManus[i].manu, deviceManus[i].count]); //fixed this to match the new database
+            		}
+            	}
+            	data.addRow(["Other",otherDevices]);
+	        	// Set chart options
+	        	var options = {'title':'Percentage Chart of Manufacturers',
+	                       		'width':600,
+	                       		'height':400,
+	                       		'backgroundColor':'#E9EAEB'};
+
+	        	// Instantiate and draw our chart, passing in some options.
+	        	var chart = new google.visualization.PieChart(document.getElementById('piemanuchart'));
+	        	chart.draw(data, options);
+	        
+			}
      	document.getElementById('stats').innerHTML = html;
 	}
 }
 
+//map
 function initMap() { 
 	var locationArray = makeLocations();
 	var locations=[];
 	  for (var i = 0; i<locationArray.length; i++){
-		  var locObject = {lat: parseInt(locationArray[i].lat),lng: parseInt(locationArray[i].lng)};
+		  var locObject = {lat: parseFloat(locationArray[i].lat),lng: parseFloat(locationArray[i].lng)};
 		  locations.push(locObject);
 	  }
 	
@@ -200,6 +311,10 @@ function makeTypes(){
 	window.json = '<%=typeString%>';
 			return JSON.parse(window.json);
 		}
+function makeManu(){
+	window.json = '<%=manuString%>';
+			return JSON.parse(window.json);
+		}
 	</script>
 	
 </body>
diff --git a/WebContent/html/webpages/statisticsPage.jsp b/WebContent/html/webpages/statisticsPage.jsp
index 79645de..f6cdf5c 100644
--- a/WebContent/html/webpages/statisticsPage.jsp
+++ b/WebContent/html/webpages/statisticsPage.jsp
@@ -75,9 +75,13 @@
   <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>
   <br><br>
-  <div style = "text-align: center;"><!-- move this back to above stats later when I think of what to place for the last chart -->
-  <div style = "display: inline-block; border-style: solid; border-width: 20px; margin: 0px 0px 0px 0px;" id="bardevicechart"></div>
+  <div style = "display: inline-block; border-style: solid; border-width: 20px; margin: 0px 0px 0px 50px;" id="bartypechart"></div>
+  <div style = "float: right; border-style: solid; border-width: 20px; margin: 0px 50px 0px 0px;" id="barmanuchart"></div>
   <br><br>
+  <div style = "display: inline-block; border-style: solid; border-width: 20px; margin: 0px 0px 0px 50px;" id="pietypechart"></div>
+  <div style = "float: right; border-style: solid; border-width: 20px; margin: 0px 50px 0px 0px;" id="piemanuchart"></div>
+  <br><br>
+  <div style = "text-align: center;">
   <div style = "" class = infoContainer id="stats"></div>
   </div>
   </div>
diff --git a/src/database/StatisticsQueries.java b/src/database/StatisticsQueries.java
index 5ddd565..476a2d1 100644
--- a/src/database/StatisticsQueries.java
+++ b/src/database/StatisticsQueries.java
@@ -24,7 +24,7 @@ public static Statistics[] getStatistics() throws ClassNotFoundException, SQLExc
 		Statistics[] statusDevice = new Statistics[rows];
 		//iterate result set
 		while(resultSet.next()){
-			statusDevice[counter] = new Statistics(resultSet.getString("Status"), null, resultSet.getInt("count(*)"), null, null);
+			statusDevice[counter] = new Statistics(resultSet.getString("Status"), null, null, resultSet.getInt("count(*)"), null, null);
 			counter++;
 		}		
 		stmt.close();
@@ -47,7 +47,7 @@ public static Statistics[] getLocations() throws ClassNotFoundException, SQLExce
 		Statistics[] locations = new Statistics[rows];
 		//iterate result set
 		while(resultSet.next()){
-			locations[counter] = new Statistics(null, null, 0, resultSet.getString("Latitude"), resultSet.getString("Longitude"));
+			locations[counter] = new Statistics(null, null, null, 0, resultSet.getString("Latitude"), resultSet.getString("Longitude"));
 			counter++;
 		}		
 		stmt.close();
@@ -71,7 +71,7 @@ public static Statistics[] getDeviceTypes() throws ClassNotFoundException, SQLEx
 		Statistics[] typeDevice = new Statistics[rows];
 		//iterate result set
 		while(resultSet.next()){
-			typeDevice[counter] = new Statistics(null, resultSet.getString("Hardware"), resultSet.getInt("count(*)"), null, null);
+			typeDevice[counter] = new Statistics(null, resultSet.getString("Hardware"), null, resultSet.getInt("count(*)"), null, null);
 			counter++;
 		}		
 		stmt.close();
@@ -79,4 +79,29 @@ public static Statistics[] getDeviceTypes() throws ClassNotFoundException, SQLEx
 		return typeDevice;
 
 	}
+	
+	public static Statistics[] getDeviceManu() throws ClassNotFoundException, SQLException {
+		//database connect
+		System.getenv("VCAP_SERVICES");
+		Class.forName("com.mysql.jdbc.Driver");
+		Connection connection = DriverManager.getConnection(database, user, password);
+		Statement stmt = connection.createStatement();
+		ResultSet resultSet = stmt.executeQuery("SELECT Manufacturer, count(*) FROM devices GROUP BY Manufacturer");
+		int counter = 0;
+
+		resultSet.last();
+		int rows = resultSet.getRow();
+		resultSet.beforeFirst();
+
+		Statistics[] manuType = new Statistics[rows];
+		//iterate result set
+		while(resultSet.next()){
+			manuType[counter] = new Statistics(null, null, resultSet.getString("Manufacturer"), resultSet.getInt("count(*)"), null, null);
+			counter++;
+		}		
+		stmt.close();
+		connection.close();
+		return manuType;
+
+	}
 }
diff --git a/src/entities/Statistics.java b/src/entities/Statistics.java
index 6c0e99a..0666042 100644
--- a/src/entities/Statistics.java
+++ b/src/entities/Statistics.java
@@ -3,13 +3,15 @@
 public class Statistics {
 	private String _status;
 	private String _type;
+	private String _manu;
 	private int _count;
 	private String _latitude;
 	private String _longitude;
 	
-	public Statistics(String status,String type, int count, String latitude, String longitude) {
+	public Statistics(String status,String type, String manu, int count, String latitude, String longitude) {
 		_status = status;
 		_type = type;
+		_manu = manu;
 		_count = count;
 		_latitude = latitude;
 		_longitude = longitude;
@@ -24,6 +26,7 @@ public String toString(){
 		String comma = ", ";
 		sb.append("{\"status\": \"").append(_status).append("\"").append(comma);
 		sb.append("\"type\": \"").append(_type).append("\"").append(comma);
+		sb.append("\"manu\": \"").append(_manu).append("\"").append(comma);
 		sb.append("\"count\": ").append(_count).append(comma);
 		sb.append("\"lat\": \"").append(_latitude).append("\"").append(comma);
 		sb.append("\"lng\": \"").append(_longitude).append("\"");