diff --git a/CityWebServer/wwwroot/index.html b/CityWebServer/wwwroot/index.html
index ebe0dd3..3e3dc59 100644
--- a/CityWebServer/wwwroot/index.html
+++ b/CityWebServer/wwwroot/index.html
@@ -1,11 +1,10 @@
-﻿<!DOCTYPE html>
 <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 -->
-    <title>Cities: Skylines - Test</title>
+    <title>City Statistics</title>
     <link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet'>
     <style type="text/css">
         body { padding-top: 50px; }
@@ -22,41 +21,73 @@
                 <ul class="nav navbar-nav">
                     <li><a href="/">Home</a></li>
                     <li><a href="/Log">Log</a></li>
-                    <!-- TODO: Dynamically populate this with links to other handlers.  -->
+                    <li><a href="/Budget">Budget</a></li>
+                    <li><a href="/Building">Building</a></li>
+                    <li><a href="/Messages">Chirper Messages</a></li>
+                    <li><a href="/CityInfo">City Info</a></li>
+                    <li><a href="/Transport">Transport</a></li>
+                    <li><a href="/Vehicle">Vehicle</a></li>
                 </ul>
             </div>
         </div>
     </nav>
     <div class="container">
-        <h1>Cities: Skylines - Integrated Web Server</h1>
+        <h1><span data-bind="text: Name"></span>'s City Statistics</h1>
         <div id="chart"></div>
-        <table class="table table-bordered table-striped">
+<div>
+<h4> Display Options </h4>
+<h5> Select how you'd like your data displayed: </h5>
+<div id="displayOptions" style="align-items:center;">	
+<div class="btn btn-default">Timeline</div> 
+<div class="btn btn-default">Column</div>
+<div class="btn btn-default">Pie</div>
+</div>
+<div id="graphOptions" style="align-items:center;">	
+<h5> Select what data you'd like displayed: </h5>
+<div class="btn btn-default">Population</div> 
+<div class="btn btn-default">Tourists</div>
+<div class="btn btn-default">Households</div>
+<div class="btn btn-default">Jobs Occupied</div>
+<div class="btn btn-default">Household Vacancies</div>
+<div class="btn btn-default">Job Vacancies</div> 
+<div class="btn btn-default">Household Fullness</div> 
+<div class="btn btn-default">Job Fullness</div>
+<div class="btn btn-default">Tourist Saturation</div> 
+</div>
+</div>
+<h2><span data-bind="text: Name"></span>'s District Overview</h2>
+        <table id="mainDataTable" class="table table-bordered table-striped">
             <thead>
                 <tr>
-                    <th>District ID</th>
-                    <th>Name</th>
-                    <th>Population</th>
-                    <th>Buildings</th>
-                    <th>Vehicles</th>
-                    <th>Households (Max)</th>
-                    <th>Jobs (Max)</th>
-                    <th>Weekly Tourists</th>
-                    <th>Land Value</th>
-                    <th>Pollution</th>
+                    <th onclick="sortTable(0)">Name</th>
+                    <th onclick="sortTable(1)">Population</th>
+		    <th onclick="sortTable(2)">Tourists</th>
+                    <th onclick="sortTable(3)">Households</th>
+		    <th onclick="sortTable(4)">Jobs</th>
+		    <th onclick="sortTable(5)">Vacant Households</th>
+                    <th onclick="sortTable(6)">Vacant Jobs</th>
+		    <th onclick="sortTable(7)">Household Fullness</th>
+                    <th onclick="sortTable(8)">Job Fullness</th>
+		    <!--<th>City Domination*</th>-->
+                    <th onclick="sortTable(9)">Tourist Saturation</th>
+                    <th onclick="sortTable(10)">Land Value</th>
+                    <th onclick="sortTable(11)">Pollution</th>
                 </tr>
             </thead>
             <tbody>
 
             <!-- ko foreach: Districts -->
             <tr>
-                <td data-bind="text: DistrictID"></td>
                 <td data-bind="text: DistrictName"></td>
-                <td data-bind="text: TotalPopulationCount"></td>
-                <td data-bind="text: TotalBuildingCount"></td>
-                <td data-bind="text: TotalVehicleCount"></td>
-                <td><span data-bind="text: CurrentHouseholds"></span> (<span data-bind="text: AvailableHouseholds"></span>)</td>
-                <td><span data-bind="text: CurrentJobs"></span> (<span data-bind="text: AvailableJobs"></span>)</td>
-                <td data-bind="text: WeeklyTouristVisits"></td>
+                <td><span data-bind="text: TotalPopulationCount"></span></td>
+		<td data-bind="text: WeeklyTouristVisits"></td>
+                <td><span data-bind="text: CurrentHouseholds"></span></td>
+		<td><span data-bind="text: CurrentJobs"></span></td>
+		<td><span data-bind="text: (AvailableHouseholds()-CurrentHouseholds()).toFixed(0)"></span></td>
+		<td><span data-bind="text: (AvailableJobs()-CurrentJobs()).toFixed(0)"></span></td>
+		<td><span data-bind="text: (((CurrentHouseholds() / AvailableHouseholds()) * 100).toFixed(2)) + '%'"></td>
+		<td><span data-bind="text: (((CurrentJobs() / AvailableJobs())) * 100).toFixed(2) + '%'"></span></td>
+		<td><span data-bind="text: ((WeeklyTouristVisits() / TotalPopulationCount()) * 100).toFixed(2) + '%'"></span></td>
                 <td data-bind="text: '₡' + AverageLandValue()"></td>
                 <td data-bind="text: (Pollution() * 100).toFixed(0) + '%'"></td>
             </tr>
@@ -64,60 +95,36 @@ <h1>Cities: Skylines - Integrated Web Server</h1>
             </tbody>
             <tfoot>
                 <tr>
-                    <td></td>
-                    <td>Total</td>
-                    <td data-bind="text: GlobalDistrict.TotalPopulationCount"></td>
-                    <td data-bind="text: GlobalDistrict.TotalBuildingCount"></td>
-                    <td data-bind="text: GlobalDistrict.TotalVehicleCount"></td>
-                    <td><span data-bind="text: GlobalDistrict.CurrentHouseholds"></span> (<span data-bind="text: GlobalDistrict.AvailableHouseholds"></span>)</td>
-                    <td><span data-bind="text: GlobalDistrict.CurrentJobs"></span> (<span data-bind="text: GlobalDistrict.AvailableJobs"></span>)</td>
-                    <td data-bind="text: GlobalDistrict.WeeklyTouristVisits"></td>
-                    <td data-bind="text: '₡' + GlobalDistrict.AverageLandValue()"></td>
-                    <td data-bind="text: (GlobalDistrict.Pollution() * 100).toFixed(0) + '%'"></td>
+                    <td><strong>Total</strong></td>
+                <td><span data-bind="text: GlobalDistrict.TotalPopulationCount"></span></td>
+		<td data-bind="text: GlobalDistrict.WeeklyTouristVisits"></td>
+                <td><span data-bind="text: GlobalDistrict.CurrentHouseholds"></span></td>
+		<td><span data-bind="text: GlobalDistrict.CurrentJobs"></span></td>
+		<td><span data-bind="text: (GlobalDistrict.AvailableHouseholds()-GlobalDistrict.CurrentHouseholds()).toFixed(0)"></span></td>
+		<td><span data-bind="text: (GlobalDistrict.AvailableJobs()-GlobalDistrict.CurrentJobs()).toFixed(0)"></span></td>
+		<td><span data-bind="text: (((GlobalDistrict.CurrentHouseholds() / GlobalDistrict.AvailableHouseholds()) * 100).toFixed(2)) + '%'"></td>
+		<td><span data-bind="text: (((GlobalDistrict.CurrentJobs() / GlobalDistrict.AvailableJobs())) * 100).toFixed(2) + '%'"></span></td>
+		<td><span data-bind="text: ((GlobalDistrict.WeeklyTouristVisits() / GlobalDistrict.TotalPopulationCount()) * 100).toFixed(2) + '%'"></span></td>
+                <td data-bind="text: '₡' + GlobalDistrict.AverageLandValue()"></td>
+                <td data-bind="text: (GlobalDistrict.Pollution() * 100).toFixed(0) + '%'"></td>
                 </tr>
             </tfoot>
         </table>
     </div>
+
+    <footer class="footer">
+	<div class="container">
+<input type="text" id="searchInput" onkeyup="filterTable()" placeholder="Search for names.."> <br />
+	      <p class="text-muted"> * City Domination is a comparision between the specified distict and the rest of the city.</p>	
+        </div>
+    </footer>
     <script src='./jquery-2.1.3.min.js'></script>
     <script src='./bootstrap.min.js'></script>
     <script src='./knockout-3.3.0.js'></script>
     <script src='./knockout.mapping-latest.js'></script>
     <script src="./highcharts.js"></script>
     <script src="./script.js"></script>
+    <script scr="./history.js"></script>
 
-    <script type="text/javascript">
-
-    var endpoint = "./CityInfo";
-    var viewModel;
-    var chart;
-    var initialized = false;
-    var lastDate;
-
-    //$.getJSON(endpoint, function (data)
-    //{
-    //    viewModel = ko.mapping.fromJS(data);
-    //});
-
-    // Update the data once every second.
-    window.setInterval(function ()
-    {
-        $.getJSON(endpoint, function(data) {
-            if (initialized) {
-                ko.mapping.fromJS(data, viewModel);
-                if (lastDate !== viewModel.Time()) {
-                    updateChart(viewModel, chart);
-                    lastDate = viewModel.Time();
-                } else {
-                    console.log("Same Date: " + lastDate);
-                }
-            } else {
-                initialized = true;
-                viewModel = ko.mapping.fromJS(data);
-                ko.applyBindings(viewModel);
-                chart = initializeChart(viewModel);
-            }
-        });
-    }, 2000); // Every two seconds.
-    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/CityWebServer/wwwroot/script.js b/CityWebServer/wwwroot/script.js
index 2c4bf98..ade5be4 100644
--- a/CityWebServer/wwwroot/script.js
+++ b/CityWebServer/wwwroot/script.js
@@ -1,56 +1,87 @@
-function initializeChart() {
+var graphChoice = 'Default';
+var dataDisplay = 'spline';
+var querySelect = document.querySelectorAll('#graphOptions div');
+var querySelect2 = document.querySelectorAll('#displayOptions div');
+var endpoint = "./CityInfo";
+var viewModel;
+var chart;
+var initialized = false;
+var lastDate;
+let history = [];
+
+for(var i = 0; i < querySelect.length; i++){
+	querySelect[i].addEventListener("click", updateGraphChoice);
+}
+
+for(var i = 0; i < querySelect2.length; i++){
+	querySelect2[i].addEventListener("click", updateGraphChoice2);
+}
+
+
+function updateGraphChoice(e){
+	
+	graphChoice = e.currentTarget.innerHTML;
+	chart.destroy();
+	chart = initializeSplineChart(viewModel);
+	updateChart(viewModel, chart);
+	
+}
+
+function updateGraphChoice2(e){
+	
+	dataDisplay = e.currentTarget.innerHTML.toLowerCase();
+	if(dataDisplay == 'timeline'){
+	dataDisplay = 'spline'
+}
+	chart.destroy();
+	chart = initializeSplineChart(viewModel);
+	updateChart(viewModel, chart);
+	
+}
+
+function initializeSplineChart() {
+var t = graphChoice;
+var d;
+if(graphChoice == "Default"){
+t = "Statistics"
+}
+if(dataDisplay == 'spline'){
+d = "datetime";
+}
+if(dataDisplay == 'column' || dataDisplay == 'pie'){
+d = "linear";
+}
     var c = new Highcharts.Chart({
     chart: {
             renderTo: 'chart',
-            defaultSeriesType: 'spline',
+            defaultSeriesType: dataDisplay,
             events: { }
         },
         title: {
-            text: 'Statistics'
+            text: t
         },
         xAxis: {
-            type: 'datetime',
+            type: d,
             tickPixelInterval: 150
         },
         yAxis: {
-            minPadding: 0.2,
-            maxPadding: 0.2,
+            minPadding: .02,
+            maxPadding: .02,
             title: {
-                text: 'Value',
-                margin: 80
+                text: 'Values',
+                margin: 5
             }
         }
     });
     return c;
 }
 
-function deleteUnusedSeries(chart, seriesArray)
-{
-    // seriesArray is an array that contains only the NAMES of the series that were updated this tick.
-
-    //for (var j = 0; j < chart.series.length; j++) {
-    //    var series = chart.series[j];
-    //    var isUsed = false;
-    //    for (var i = 0; i < seriesArray.length; i++) {
-    //        var usedSeriesName = seriesArray[i];
-    //        if (series.name == usedSeriesName) {
-    //            isUsed = true;
-    //        }
-    //    }
-
-    //    if (!isUsed) {
-    //        //console.log("Removing: " + chart.series[j].name);
-    //        chart.series[j].remove();
-    //        j = -1;
-    //    }
-
-    //}
-}
 
 function addOrUpdateSeries(theChart, seriesName, value, valueName)
 {
     var series;
     var matchFound = false;
+	
     if(theChart.series.length > 0)
     {
         for(var s = 0; s < theChart.series.length; s++)
@@ -59,42 +90,234 @@ function addOrUpdateSeries(theChart, seriesName, value, valueName)
             {
                 series = theChart.series[s];
                 matchFound = true;
-                s = theChart.series.length; // Stop looping
+                s = theChart.series.length;
             }
         }
     }
 
-    if(!matchFound)
+    if(!matchFound && dataDisplay == 'spline')
     {
-        //console.log("Adding series: " + seriesName);
         var seriesOptions = {
             id: seriesName,
             name: seriesName,
             data: [{ name: valueName, y: value}]
         };
         series = theChart.addSeries(seriesOptions, false);
+    } else if(!matchFound && dataDisplay == 'column')
+    {
+        var seriesOptions = {
+            id: seriesName,
+            name: valueName,
+            data: [{ name: valueName, y: value}]
+        };
+        series = theChart.addSeries(seriesOptions, false);
+    } else if(!matchFound && dataDisplay == 'pie')
+    {
+        var seriesOptions = {
+            id: seriesName,
+            name: seriesName,
+            data: value
+        };
+        series = theChart.addSeries(seriesOptions, false);
     }
-    else
+    else if(matchFound)
     {
-        var shift = series.data.length > 20;
-        series.addPoint(value, true, shift);
+	console.log(series);
+	 var shift = series.data.length > 20;
+	series.addPoint(value, true, shift);
     }
 }
 
 function updateChart(vm, chart)
 {
-    var updatedSeries = [];
+    var pieData = [];
     var districts = vm.Districts();
+
+    var dataPointX; 
+    var seriesName;
+    var dataPoint;
+
     for(var i = 0; i < districts.length; i++)
     {
         var district = districts[i];
-        var districtName = district.DistrictName();
+	seriesName = district.DistrictName();
 
-        var seriesName = districtName + " - Population";
-        var population = district.TotalPopulationCount();
-        addOrUpdateSeries(chart, seriesName, population, vm.Time());
-        updatedSeries.push(seriesName);
-        deleteUnusedSeries(chart, updatedSeries);
-    }
+	if(graphChoice == "Population"){
+		pointYPopulation = district.TotalPopulationCount();
+	}
+	if(graphChoice == "Tourists"){
+		pointYPopulation = district.WeeklyTouristVisits();
+	}
+	if(graphChoice == "Households"){
+		pointYPopulation = district.CurrentHouseholds();
+	}
+	if(graphChoice == "Jobs Occupied"){
+		pointYPopulation = district.CurrentJobs();
+	}
+	if(graphChoice == "Household Vacancies"){
+		pointYPopulation = district.AvailableHouseholds()-district.CurrentHouseholds();
+	}
+	if(graphChoice == "Job Vacancies"){
+		pointYPopulation = district.AvailableJobs()-district.CurrentJobs();
+	}
+	if(graphChoice == "Household Fullness"){
+		pointYPopulation = doMath(district.CurrentHouseholds(), district.AvailableHouseholds());
+	}
+	if(graphChoice == "Job Fullness"){
+		pointYPopulation = doMath(district.CurrentJobs(), district.AvailableJobs());
+	}
+	if(graphChoice == "Tourist Saturation"){
+		pointYPopulation = doMath(district.WeeklyTouristVisits(), district.TotalPopulationCount());
+	}
+	if(graphChoice == "Default"){
+		graphChoice = 'Population';
+		pointYPopulation = district.TotalPopulationCount();
+	}
+	if(dataDisplay == "column"){
+		dataPointX = seriesName;
+		dataPointY = pointYPopulation;
+		addOrUpdateSeries(chart, seriesName, dataPointY, dataPointX);
+	
+	}
+	if(dataDisplay == "spline"){
+		dataPointX = formatDate(vm.Time());
+		dataPointY = pointYPopulation;
+		addOrUpdateSeries(chart, seriesName, dataPointY, dataPointX);
+	}
+	if(dataDisplay == 'pie'){
+		dataPointX = seriesName;
+		pieData.push({name: seriesName, y: pointYPopulation})
+		dataPointY = pieData;
+	}
+	
+	
+   }
+
+if(dataDisplay == 'pie'){
+	addOrUpdateSeries(chart, graphChoice, dataPointY, dataPointX);
+}
     chart.redraw();
-}
\ No newline at end of file
+
+
+}
+
+function formatDate(t){
+	t = Date.parse(t);
+	return t;
+}
+
+function doMath(v1,v2){
+	var r = 0;
+
+	if(!isFinite((v1 / v2)*100) || isNaN((v1 / v2)*100)){
+		r = 0;
+	} else {
+		r = ((v1 / v2)*100).toFixed(0);
+		r = parseInt(r);
+}
+	return r;
+}
+
+function filterTable() {
+  // Declare variables
+  var input, filter, table, tr, td, i, txtValue;
+  input = document.getElementById("searchInput");
+  filter = input.value.toUpperCase();
+  table = document.getElementById("mainDataTable");
+  tr = table.getElementsByTagName("tr");
+
+  // Loop through all table rows, and hide those who don't match the search query
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByTagName("td")[0];
+    if (td) {
+      txtValue = td.textContent || td.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  }
+}
+
+function sortTable(n) {
+  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+  table = document.getElementById("mainDataTable");
+  switching = true;
+  //Set the sorting direction to ascending:
+  dir = "asc"; 
+  /*Make a loop that will continue until
+  no switching has been done:*/
+  while (switching) {
+    //start by saying: no switching is done:
+    switching = false;
+    rows = table.rows;
+    /*Loop through all table rows (except the
+    first, which contains table headers):*/
+    for (i = 1; i < (rows.length - 1); i++) {
+      //start by saying there should be no switching:
+      shouldSwitch = false;
+      /*Get the two elements you want to compare,
+      one from current row and one from the next:*/
+      x = rows[i].getElementsByTagName("TD")[n];
+      y = rows[i + 1].getElementsByTagName("TD")[n];
+      /*check if the two rows should switch place,
+      based on the direction, asc or desc:*/
+      if (dir == "asc") {
+        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+          //if so, mark as a switch and break the loop:
+          shouldSwitch= true;
+          break;
+        }
+      } else if (dir == "desc") {
+        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+          //if so, mark as a switch and break the loop:
+          shouldSwitch = true;
+          break;
+        }
+      }
+    }
+    if (shouldSwitch) {
+      /*If a switch has been marked, make the switch
+      and mark that a switch has been done:*/
+      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+      switching = true;
+      //Each time a switch is done, increase this count by 1:
+      switchcount ++;      
+    } else {
+      /*If no switching has been done AND the direction is "asc",
+      set the direction to "desc" and run the while loop again.*/
+      if (switchcount == 0 && dir == "asc") {
+        dir = "desc";
+        switching = true;
+      }
+    }
+  }
+}
+
+ 
+    
+    // Update the data once every second.
+    window.setInterval(function ()
+    {
+        $.getJSON(endpoint, function(data) {
+            if (initialized) {
+                ko.mapping.fromJS(data, viewModel);
+                if (lastDate !== viewModel.Time()) {
+                    updateChart(viewModel, chart);
+                    lastDate = viewModel.Time();
+                } else {
+                    //console.log("Same Date: " + lastDate);
+                }
+            } else {
+                initialized = true;
+                viewModel = ko.mapping.fromJS(data);
+                ko.applyBindings(viewModel);
+		chart = initializeSplineChart(viewModel);
+            }
+        });
+    }, 2000); // Every two seconds.
+
+	function appendHistoryTable(){
+		console.log(history)
+	}
diff --git a/README.md b/README.md
index c25a09c..623746a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
 # CityWebServer
 Adds a web server to Cities: Skylines
 
-![Screenshot](http://i.imgur.com/U3dD0vd.png)
+![Screenshot](https://i.imgur.com/7apKt7I.jpg)
