Added DataTables with our actual data (6ece0c4c) · Commits · Chris / SpamHunter

web/index.html

+19 −16

Original line number	Diff line number	Diff line
		@@ -40,7 +40,7 @@
		<div id="top_algorithm">
		<p>Algorithm currently in use: </p><p name="algorithmInUse"></p>
		<br>
		<table class="table table-bordered table-hover" style="width: 75%;">
		<table id="algsTable" class="table table-bordered table-hover">
		<thead class="thead-dark">
		<tr>
		<th>Algorithm Name</th>
		@@ -53,41 +53,35 @@

		<tbody>
		<tr>
		<td id="alg1_name"><b>Neural Network (in use)</b></td>
		<td id="alg1_f1"><b>1.0</b></td>
		<td id="alg1_name"></td>
		<td id="alg1_f1"></td>
		<td id="alg1_recall"></td>
		<td id="alg1_acc"></td>
		<td id="alg1_precision"></td>

		</tr>
		<tr>
		<td id="alg2_name">Neural Network</td>
		<td id="alg2_f1">1.0</td>
		<td id="alg2_name"></td>
		<td id="alg2_f1"></td>
		<td id="alg2_recall"></td>
		<td id="alg2_acc"></td>
		<td id="alg2_precision"></td>
		</tr>
		<tr>
		<td id="alg3_name">Neural Network</td>
		<td id="alg3_f1">1.0</td>
		<td id="alg3_name"></td>
		<td id="alg3_f1"></td>
		<td id="alg3_recall"></td>
		<td id="alg3_acc"></td>
		<td id="alg3_precision"></td>
		</tr>
		<tr>
		<td id="alg4_name">Neural Network</td>
		<td id="alg4_f1">1.0</td>
		<td id="alg4_name"></td>
		<td id="alg4_f1"></td>
		<td id="alg4_recall"></td>
		<td id="alg4_acc"></td>
		<td id="alg4_precision"></td>
		</tr>
		<tr>
		<td id="alg5_name">Neural Network</td>
		<td id="alg5_f1">1.0</td>
		<td id="alg5_recall"></td>
		<td id="alg5_acc"></td>
		<td id="alg5_precision"></td>
		</tr>

		</tbody>

		</table>
		@@ -124,5 +118,14 @@
		<!-- Visualization import -->
		<script src="https://code.highcharts.com/highcharts.js"></script>

		<script
		src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
		crossorigin="anonymous"></script>

		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css"/>

		<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>

		<!-- ML Script -->
		<script src="js/main.js"></script>
		No newline at end of file

web/js/main.js

+26 −21

Original line number	Diff line number	Diff line

		$(document).ready( function () {
		} );

		function getPrediction() {

		@@ -108,35 +109,39 @@ function getTopAlgorithms() {
		console.log(replyObj)
		// put the algorithm names in their ranked order
		// document.getElementById("alg1_name").innerHTML = "<b>" + replyObj.name[0] + "</b>";
		// document.getElementById("alg2_name").innerText = replyObj.name[1];
		// document.getElementById("alg3_name").innerText = replyObj.name[2];
		// document.getElementById("alg4_name").innerText = replyObj.name[3];
		// document.getElementById("alg5_name").innerText = replyObj.name[4];
		document.getElementById("alg1_name").innerText = replyObj.name[0];
		document.getElementById("alg2_name").innerText = replyObj.name[1];
		document.getElementById("alg3_name").innerText = replyObj.name[2];
		document.getElementById("alg4_name").innerText = replyObj.name[3];

		// // put the algorithms' F1 scores in their ranked order
		// document.getElementById("alg1_f1").innerHTML = "<b>" + replyObj.f1[0] + "</b>";
		// document.getElementById("alg2_f1").innerText = replyObj.f1[1];
		// document.getElementById("alg3_f1").innerText = replyObj.f1[2];
		// document.getElementById("alg4_f1").innerText = replyObj.f1[3];
		// document.getElementById("alg5_f1").innerText = replyObj.f1[4];
		document.getElementById("alg1_f1").innerText = replyObj.f1[0];
		document.getElementById("alg2_f1").innerText = replyObj.f1[1];
		document.getElementById("alg3_f1").innerText = replyObj.f1[2];
		document.getElementById("alg4_f1").innerText = replyObj.f1[3];



		// document.getElementById("alg1_acc").innerHTML = "<b>" + replyObj.accuracy[0] + "</b>";
		// document.getElementById("alg2_acc").innerText = replyObj.accuracy[1];
		// document.getElementById("alg3_acc").innerText = replyObj.accuracy[2];
		// document.getElementById("alg4_acc").innerText = replyObj.accuracy[3];
		// document.getElementById("alg5_acc").innerText = replyObj.accuracy[4];
		document.getElementById("alg1_acc").innerText = replyObj.accuracy[0];
		document.getElementById("alg2_acc").innerText = replyObj.accuracy[1];
		document.getElementById("alg3_acc").innerText = replyObj.accuracy[2];
		document.getElementById("alg4_acc").innerText = replyObj.accuracy[3];

		// document.getElementById("alg1_precision").innerHTML = "<b>" + replyObj.precision[0] + "</b>";
		// document.getElementById("alg2_precision").innerText = replyObj.precision[1];
		// document.getElementById("alg3_precision").innerText = replyObj.precision[2];
		// document.getElementById("alg4_precision").innerText = replyObj.precision[3];
		// document.getElementById("alg5_precision").innerText = replyObj.precision[4];
		document.getElementById("alg1_precision").innerText = replyObj.precision[0];
		document.getElementById("alg2_precision").innerText = replyObj.precision[1];
		document.getElementById("alg3_precision").innerText = replyObj.precision[2];
		document.getElementById("alg4_precision").innerText = replyObj.precision[3];

		// document.getElementById("alg1_recall").innerHTML = "<b>" + replyObj.recall[0] + "</b>";
		// document.getElementById("alg2_recall").innerText = replyObj.recall[1];
		// document.getElementById("alg3_recall").innerText = replyObj.recall[2];
		// document.getElementById("alg4_recall").innerText = replyObj.recall[3];
		// document.getElementById("alg5_recall").innerText = replyObj.recall[4];
		document.getElementById("alg1_recall").innerText = replyObj.recall[0];
		document.getElementById("alg2_recall").innerText = replyObj.recall[1];
		document.getElementById("alg3_recall").innerText = replyObj.recall[2];
		document.getElementById("alg4_recall").innerText = replyObj.recall[3];

		$('#algsTable').DataTable();

		// loadAlgGraph(replyObj)
		}