Skip to content

Commit

Permalink
fixed statistics page, added a chart and made map work, still a few bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jic13003
jic13003 committed Apr 21, 2017
1 parent 1b73688 commit e7fbd94
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 58 deletions.
6 changes: 1 addition & 5 deletions .classpath
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@
<attribute name="owner.project.facets" value="jst.web"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/jre1.8.0_121">
<attributes>
<attribute name="owner.project.facets" value="java"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER"/>
<classpathentry kind="output" path="target/classes"/>
</classpath>
121 changes: 109 additions & 12 deletions WebContent/html/javascript/statistics.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,30 @@
<title>Insert title here</title>
</head>
<body>
<%
<%
//statistics for status
Statistics[] genStatistics = StatisticsQueries.getStatistics();
String statString = Statistics.arrayToString(genStatistics);
//location queries for map
Statistics[] genLocations = StatisticsQueries.getLocations();
String locString = Statistics.arrayToString(genLocations);
//device type queries
Statistics[] genTypes = StatisticsQueries.getDeviceTypes();
String typeString = Statistics.arrayToString(genTypes);
%>
<script type=text/javascript
src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var statistics = makeStatistics();
displayData();
var statistics = makeStatistics(); //initialize statistics
var deviceTypes = makeTypes(); //initialize types
displayData(); //run the function
function displayData() {
var html = "";
var htmlend = "";
var totalDevices = 0;
/*
var availableDevices=0;
var loanDevices=0;
var lostDevices=0;
Expand All @@ -28,15 +40,17 @@ function displayData() {
var unavailDevices=0;
var returnDevices=0;
var brokenDevices=0;
*/
if (statistics.status != "" && statistics.count != ""){
for (var i = 0; i<statistics.length; i++){
totalDevices = totalDevices + statistics[i].count;
htmlend += '<br>' + statistics[i].status + ': ' + statistics[i].count;
}
//data for info section
availableDevices = statistics[0].count;
loanDevices = statistics[1].count;
unavailDevices = statistics[2].count;
//availableDevices = statistics[0].count;
//loanDevices = statistics[1].count;
//unavailDevices = statistics[2].count;
//old categories
//lostDevices = statistics[2].count;
Expand All @@ -45,18 +59,16 @@ function displayData() {
//pendingDevices = statistics[0].count;
html += '<div class = "info-container">Total Devices: '+ totalDevices +
'<br>Available Devices: ' + availableDevices +
'<br>Loaned Devices: ' + loanDevices +
'<br>Permanent Devices: ' + unavailDevices +
'</div>';
html += '<div class = "info-container">Total Devices: '+ totalDevices;
html += htmlend + '</div>';
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawPie);
google.charts.setOnLoadCallback(drawCol);
google.charts.setOnLoadCallback(drawTypesBar);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
Expand All @@ -80,7 +92,7 @@ function displayData() {
chart.draw(data, options);
}
function drawCol() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Status');
Expand Down Expand Up @@ -108,13 +120,98 @@ function displayData() {
var chart = new google.visualization.ColumnChart(document.getElementById('colchart'));
chart.draw(view, options);
}
function drawTypesBar() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Device Type');
data.addColumn('number', 'Count');
for (var i = 0; i<deviceTypes.length; i++){
data.addRow([deviceTypes[i].type, deviceTypes[i].count]); //fixed this to match the new database
}
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 Type',
'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('bardevicechart'));
chart.draw(view, options);
}
document.getElementById('stats').innerHTML = html;
}
}
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)};
locations.push(locObject);
}
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'});
}
/* hardcoded
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
]
*/
function makeStatistics(){
window.json = '<%=statString%>';
return JSON.parse(window.json);
}
function makeLocations(){
window.json = '<%=locString%>';
return JSON.parse(window.json);
}
function makeTypes(){
window.json = '<%=typeString%>';
return JSON.parse(window.json);
}
</script>

</body>
</html>
43 changes: 5 additions & 38 deletions WebContent/html/webpages/statisticsPage.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,42 +65,6 @@
<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
Expand All @@ -110,8 +74,11 @@
<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>
<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>
<br><br>
<div style = "" class = infoContainer id="stats"></div>
</div>
</div>
<%@ include file="../javascript/statistics.jsp" %>
Expand Down
48 changes: 47 additions & 1 deletion src/database/StatisticsQueries.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,59 @@ 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"), resultSet.getInt("count(*)"));
statusDevice[counter] = new Statistics(resultSet.getString("Status"), null, resultSet.getInt("count(*)"), null, null);
counter++;
}
stmt.close();
connection.close();
return statusDevice;

}
public static Statistics[] getLocations() throws ClassNotFoundException, SQLException {
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 Latitude, Longitude from devices JOIN location WHERE devices.Location = location.Location_ID AND Employee_Flag = 0");
int counter = 0;

resultSet.last();
int rows = resultSet.getRow();
resultSet.beforeFirst();

Statistics[] locations = new Statistics[rows];
//iterate result set
while(resultSet.next()){
locations[counter] = new Statistics(null, null, 0, resultSet.getString("Latitude"), resultSet.getString("Longitude"));
counter++;
}
stmt.close();
connection.close();
return locations;
}

public static Statistics[] getDeviceTypes() 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 Hardware, count(*) FROM devices GROUP BY Hardware");
int counter = 0;

resultSet.last();
int rows = resultSet.getRow();
resultSet.beforeFirst();

Statistics[] typeDevice = new Statistics[rows];
//iterate result set
while(resultSet.next()){
typeDevice[counter] = new Statistics(null, resultSet.getString("Hardware"), resultSet.getInt("count(*)"), null, null);
counter++;
}
stmt.close();
connection.close();
return typeDevice;

}
}
15 changes: 13 additions & 2 deletions src/entities/Statistics.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,17 @@

public class Statistics {
private String _status;
private String _type;
private int _count;
public Statistics(String status,int count) {
private String _latitude;
private String _longitude;

public Statistics(String status,String type, int count, String latitude, String longitude) {
_status = status;
_type = type;
_count = count;
_latitude = latitude;
_longitude = longitude;
}

/**
Expand All @@ -16,11 +23,15 @@ public String toString(){
StringBuilder sb = new StringBuilder();
String comma = ", ";
sb.append("{\"status\": \"").append(_status).append("\"").append(comma);
sb.append("\"count\": ").append(_count);
sb.append("\"type\": \"").append(_type).append("\"").append(comma);
sb.append("\"count\": ").append(_count).append(comma);
sb.append("\"lat\": \"").append(_latitude).append("\"").append(comma);
sb.append("\"lng\": \"").append(_longitude).append("\"");
sb.append("}");
return sb.toString();
}


/**
* This is a static function which will turn a Listed Statistics array into its proper string. (modification)
* @author - Connor
Expand Down

0 comments on commit e7fbd94

Please sign in to comment.