Visualization code added.

categoryBreakdown.php

@@ -0,0 +1,192 @@
+<?php 
+
+
+// This script fetches how many people, for every category, have answered a given score
+// and spits out a json with an array of category ID, category name, score and count
+
+// 	require_once 'processes/config.php';
+	require_once 'processes/dbh.inc.php';
+// 	require_once 'processes/checkLogin.php';
+
+
+
+$experienceID = mysqli_real_escape_string($connection, trim($_POST['experienceID'])); // 26
+$momentID = mysqli_real_escape_string($connection, trim($_POST['momentID'])); // 196
+$studentID = mysqli_real_escape_string($connection, trim($_POST['studentID']));
+
+
+
+// Count the number of categories for the experience
+$sqlCountCategories = "SELECT DISTINCT C.id
+						FROM category AS C
+						JOIN question as Q
+						JOIN subquestionnair_question AS SQ
+						JOIN experience_subquestionnair AS ES
+							WHERE C.id = Q.id_category
+							AND SQ.id_question = Q.id
+							AND SQ.id_subquestionnair = ES.id_subquestionnair
+							AND ES.id_experience = '$experienceID'";
+$resultCountCategories = mysqli_query($connection, $sqlCountCategories);
+$countCategories = $resultCountCategories->num_rows;
+
+
+
+// Fetch all the results, depending if all students or a specific one
+if($studentID === "all") {
+
+	$sql = "SELECT C.id AS categoryID,
+		   	C.categoria AS categoryName,
+	       	A.value AS score,
+    	   	COUNT(id_student) AS `count`
+			FROM category AS C
+    	    LEFT JOIN question AS Q
+        		ON Q.id_category = C.id
+			JOIN answer AS A
+    	    JOIN subquestionnair_question AS SQ
+        	JOIN experience_subquestionnair AS ES
+				-- WHERE Q.id_category = C.id
+		        WHERE A.id_question = Q.id
+	    	    AND A.id_question = SQ.id_question
+    	    	AND A.id_subquestionnair = SQ.id_subquestionnair
+				AND SQ.id_subquestionnair = ES.id_subquestionnair
+				AND ES.id_experience = '$experienceID'
+    	        AND SQ.id_subquestionnair = '$momentID'
+					GROUP BY score, categoryID
+					ORDER BY score, categoryID";
+
+} else {
+
+	$sql = "SELECT C.id AS categoryID,
+		   	C.categoria AS categoryName,
+	       	A.value AS score,
+    	   	COUNT(id_student) AS `count`
+			FROM category AS C
+	        LEFT JOIN question AS Q
+    	    	ON Q.id_category = C.id
+			JOIN answer AS A
+	        JOIN subquestionnair_question AS SQ
+    	    JOIN experience_subquestionnair AS ES
+        		-- WHERE Q.id_category = C.id
+		        WHERE A.id_question = Q.id
+    		    AND A.id_question = SQ.id_question
+        		AND A.id_subquestionnair = SQ.id_subquestionnair
+				AND SQ.id_subquestionnair = ES.id_subquestionnair
+				AND ES.id_experience = '$experienceID' -- 10
+    	        AND SQ.id_subquestionnair = '$momentID' -- 105
+        	    AND A.id_student = '$studentID' -- 118
+					GROUP BY score, categoryID
+					ORDER BY score, categoryID";
+
+}
+
+$result = mysqli_query($connection, $sql);
+
+
+
+// Initialize Arrays
+$datasets = [];
+$dataLabels = [];
+$scoreToIndex = [];
+$i = 0;
+$categoryIDToIndex = [];
+$j = 0;
+
+
+
+// Prepare result
+while($row = mysqli_fetch_object($result)) {
+
+
+	// Parse score (cause if might come from an open question)
+	// or it might be a float, while we should expect an int
+	// then cast it to string to use it as a map key
+	
+	$pointLabel = ($studentID === "all") ? " # of people who answered '" : " # of times student answered '";
+	
+	if(is_numeric($row->score)) {
+		$score = $pointLabel . strval((int)$row->score) . "'"; // answers may be 5.0 or 5, so first we take out the .
+	} else {
+		continue;
+	}
+
+
+	// Create new label if new category is detected
+	if($categoryIDToIndex[$row->categoryID] || $categoryIDToIndex[$row->categoryID] === 0) { // index 0 should be skipped
+		
+		// nothing
+		
+	} else {
+	
+		// Create new category
+		$dataLabels[] = $row->categoryName;
+		
+		// Store category index for $data array (inside dataset)
+		$categoryIDToIndex[$row->categoryID] = $j;
+		$j++;
+		
+	}
+
+	
+	
+	// Create dataset for corresponding score
+	if($scoreToIndex[$score] || $scoreToIndex[$score] === 0) { // index 0 should be skipped
+	
+		// nothing
+	
+	} else {
+
+		// serves as a tally to check
+		// which scores have been already
+		// processed AND as a map of
+		// score to index of the
+		// $dataset array
+		$scoreToIndex[$score] = $i;
+		$i++;
+
+
+		// Create new dataset for this label
+		$datasets[] = [
+			'label' => $score,
+			'data' => array_fill(0, $countCategories, 0), // array of countCategories 0's
+			'backgroundColor' => '#' . substr(sha1($score), 0, 6),
+// 			'borderWidth' => 3,
+// 			'borderColor' => '#' . substr(sha1($score), 0, 6),
+			'stack' => $score
+// 			'fill' => false
+		];
+		
+	}
+
+
+	// Append data point to corresponding category
+	$datasets[$scoreToIndex[$score]]['data'][$categoryIDToIndex[$row->categoryID]] = (int)$row->count;	
+
+
+}
+
+
+
+
+/*
+	let data = {
+		labels: dataLabels,
+		datasets: [{
+			label: auxiliaries['myChart2'].label,
+			data: dataPoints,
+			backgroundColor: auxiliaries['myChart2'].backgroundColor,
+			borderColor: auxiliaries['myChart2'].borderColor,
+			fill: false
+		}]
+	};
+*/
+
+
+$arr = [
+	'datasets' => $datasets,
+	'dataLabels' => $dataLabels
+];
+
+
+// Spit out response JSON
+echo header("Content-Type: application/json; charset=utf-8");
+echo json_encode($arr);

questionBreakdown.php

@@ -0,0 +1,185 @@
+<?php 
+
+
+// This script fetches how many people, for every question, have answered a given score
+// and spits out a json with an array of question ID, question premise, score and count
+
+// 	require_once 'processes/config.php';
+	require_once 'processes/dbh.inc.php';
+// 	require_once 'processes/checkLogin.php';
+
+
+
+$experienceID = mysqli_real_escape_string($connection, trim($_POST['experienceID'])); // 26
+$momentID = mysqli_real_escape_string($connection, trim($_POST['momentID'])); // 196
+$studentID = mysqli_real_escape_string($connection, trim($_POST['studentID']));
+
+
+// WARNING MAYBE AÑADIR/QUITAR momentID
+// Count the number of questions for the experience
+$sqlCountQuestion = "SELECT DISTINCT Q.id
+						FROM question as Q
+						JOIN subquestionnair_question AS SQ
+						JOIN experience_subquestionnair AS ES
+							WHERE SQ.id_question = Q.id
+							AND SQ.id_subquestionnair = ES.id_subquestionnair
+							AND SQ.id_subquestionnair = '$momentID'
+							AND ES.id_experience = '$experienceID'";
+$resultCountQuestion = mysqli_query($connection, $sqlCountQuestion);
+$countQuestions = $resultCountQuestion->num_rows;
+
+
+
+// Fetch all the results, depending if all students or a specific one
+if($studentID === "all") {
+
+	$sql = "SELECT Q.id AS questionID,
+		   	Q.premise AS questionPremise,
+	       	A.value AS score,
+    	   	COUNT(id_student) AS `count`
+			FROM question AS Q
+			JOIN answer AS A
+    	    JOIN subquestionnair_question AS SQ
+        	JOIN experience_subquestionnair AS ES
+		        WHERE A.id_question = Q.id
+	    	    AND A.id_question = SQ.id_question
+    	    	AND A.id_subquestionnair = SQ.id_subquestionnair
+				AND SQ.id_subquestionnair = ES.id_subquestionnair
+				AND ES.id_experience = '$experienceID'
+    	        AND SQ.id_subquestionnair = '$momentID'
+					GROUP BY score, questionID
+					ORDER BY score, questionID";
+
+} else {
+
+	$sql = "SELECT Q.id AS questionID,
+		   	Q.premise AS questionPremise,
+	       	A.value AS score,
+    	   	COUNT(id_student) AS `count`
+			FROM question AS Q
+			JOIN answer AS A
+    	    JOIN subquestionnair_question AS SQ
+        	JOIN experience_subquestionnair AS ES
+		        WHERE A.id_question = Q.id
+	    	    AND A.id_question = SQ.id_question
+    	    	AND A.id_subquestionnair = SQ.id_subquestionnair
+				AND SQ.id_subquestionnair = ES.id_subquestionnair
+				AND ES.id_experience = '$experienceID'
+    	        AND SQ.id_subquestionnair = '$momentID'
+        	    AND A.id_student = '$studentID'
+					GROUP BY score, questionID
+					ORDER BY score, questionID";
+
+}
+
+$result = mysqli_query($connection, $sql);
+
+
+
+// Initialize Arrays
+$datasets = [];
+$dataLabels = [];
+$scoreToIndex = [];
+$i = 0;
+$questionIDToIndex = [];
+$j = 0;
+
+
+
+// Prepare result
+while($row = mysqli_fetch_object($result)) {
+
+
+	// Parse score (cause if might come from an open question)
+	// or it might be a float, while we should expect an int
+	// then cast it to string to use it as a map key
+	
+	$pointLabel = ($studentID === "all") ? " # of people who answered '" : " # of times student answered '";
+	
+	if(is_numeric($row->score)) {
+		$score = $pointLabel . strval((int)$row->score) . "'"; // answers may be 5.0 or 5, so first we take out the .
+	} else {
+		continue;
+	}
+
+
+	// Create new label if new question is detected
+	if($questionIDToIndex[$row->questionID] || $questionIDToIndex[$row->questionID] === 0) { // index 0 should be skipped
+		
+		// nothing
+		
+	} else {
+	
+		// Create new question
+		$dataLabels[] = $row->questionID; //substr($row->questionPremise, 0, 30);//questionPremise;
+		
+		// Store question index for $data array (inside dataset)
+		$questionIDToIndex[$row->questionID] = $j;
+		$j++;
+		
+	}
+
+	
+	
+	// Create dataset for corresponding score
+	if($scoreToIndex[$score] || $scoreToIndex[$score] === 0) { // index 0 should be skipped
+	
+		// nothing
+	
+	} else {
+
+		// serves as a tally to check
+		// which scores have been already
+		// processed AND as a map of
+		// score to index of the
+		// $dataset array
+		$scoreToIndex[$score] = $i;
+		$i++;
+
+
+		// Create new dataset for this label
+		$datasets[] = [
+			'label' => $score,
+			'data' => array_fill(0, $countQuestions, 0), // array of countQuestions 0's
+			'backgroundColor' => '#' . substr(sha1($score), 0, 6),
+// 			'borderWidth' => 3,
+// 			'borderColor' => '#' . substr(sha1($score), 0, 6),
+			'stack' => $score
+// 			'fill' => false
+		];
+		
+	}
+
+
+	// Append data point to corresponding question
+	$datasets[$scoreToIndex[$score]]['data'][$questionIDToIndex[$row->questionID]] = (int)$row->count;	
+
+
+}
+
+
+
+
+/*
+	let data = {
+		labels: dataLabels,
+		datasets: [{
+			label: auxiliaries['myChart2'].label,
+			data: dataPoints,
+			backgroundColor: auxiliaries['myChart2'].backgroundColor,
+			borderColor: auxiliaries['myChart2'].borderColor,
+			fill: false
+		}]
+	};
+*/
+
+
+$arr = [
+	'datasets' => $datasets,
+	'dataLabels' => $dataLabels
+];
+
+
+// Spit out response JSON
+echo header("Content-Type: application/json; charset=utf-8");
+echo json_encode($arr);

respuestas.php

@@ -4,27 +4,36 @@
 	require_once 'processes/dbh.inc.php';
 	require_once 'processes/checkLogin.php';
 	include_once 'header.php';
-	
-	//include("conection.php");
 	include("funciones.php");
 	
+	
+	
 	//SELECT a.id_question, q.premise, a.id_subquestionnair , q.id_category,q.id_subcategory  FROM `answer` a, question q WHERE a.`id_student` = 1860  and a.id_question=q.id ORDER BY `a`.`id_question` ASC
-	$id_experiencia = mysqli_real_escape_string($connection, trim($_GET['exp']));
+	$experienceID = mysqli_real_escape_string($connection, trim($_GET['exp']));
 	//$id_student = 1860;
 
 	///////Busca cantidad de sub cuestionarios - Empieza////////////////
-	$sqlSelect = sprintf("SELECT  count(*) FROM experience_questionnair eq, subquestionnair qs where eq.id_questionnair=qs.id_questionnair and eq.id_experience = %s",
-		GetSQLValueString($id_experiencia, "int")
+	$sqlSelect = sprintf("SELECT * FROM experience_questionnair AS EQ JOIN subquestionnair AS SQ WHERE EQ.id_questionnair = SQ.id_questionnair AND EQ.id_experience = %s ORDER BY SQ.date_to_administer ASC",
+		GetSQLValueString($experienceID, "int")
 	);
-	$dbresultSel = mysqli_query($connection, $sqlSelect);		
-	$row = mysqli_fetch_array($dbresultSel);
-	$cant_sub_subquestionnair = $row[0];
-	//print($cant_sub_subquestionnair);
+	
+	$dbresultSel = mysqli_query($connection, $sqlSelect);
+	
+	$moments = [];
+	while($row = mysqli_fetch_array($dbresultSel)) {
+		$moments[] = $row; // warning: includes first (pre) and last (post)
+	}
+	
+// 	print("<pre>");
+// 	var_dump($moments);
+// 	exit();
+
+	//print(count($moments));
 	///////Termina - Busca cantidad de sub cuestionarios - ////////////////
 
 	///////Busca Preguntas - Empieza////////////////
-	$sqlSelect = sprintf("SELECT distinct q.* FROM `experience_questionnair` eq, questionnair_question qq, question q WHERE eq.id_questionnair=qq.`id_questionnair` and qq.id_question=q.id  and id_experience = %s order by q.id",
-		GetSQLValueString($id_experiencia, "int")
+	$sqlSelect = sprintf("SELECT DISTINCT Q.* FROM `experience_questionnair` AS EQ JOIN questionnair_question AS QQ JOIN question AS Q WHERE EQ.id_questionnair = QQ.`id_questionnair` AND QQ.id_question = Q.id AND EQ.id_experience = %s ORDER BY Q.id",
+		GetSQLValueString($experienceID, "int")
 	);
 	$dbresultSel = mysqli_query($connection, $sqlSelect);
 	$resultados = array();
@@ -37,7 +46,7 @@
 		$emas[] = "    "; // PRE test
 		
 		// SUBQUESTIONNAIRES
-		for($i = 1; $i <= $cant_sub_subquestionnair-2; $i++) {
+		for($i = 1; $i <= count($moments) - 2; $i++) {
 			$emas[] = "    ";
 		}
 		
@@ -55,12 +64,29 @@
 
 	///////Busca Estudiantes - Empieza////////////////
 	$sqlSelectEst = sprintf("SELECT s.id id_stu FROM student s, student_participate_experience se WHERE s.id=se.id_student and se.id_experience = %s order by id_stu",
-		GetSQLValueString($id_experiencia, "int")
+		GetSQLValueString($experienceID, "int")
 	);
 	$dbresultEst = mysqli_query($connection,$sqlSelectEst);
 	///////Termina - Busca Estudiantes - ////////////////
+	
+	
+	$queryExperience = "SELECT * FROM experience WHERE id = '$experienceID'";
+	$resultExperience = mysqli_query($connection, $queryExperience);
+	$experience = mysqli_fetch_assoc($resultExperience);
 
 ?>
+
+	<style>
+		.table-header {
+			width: 30px;
+			vertical-align: middle;
+			text-align: center;
+		}
+		
+		.table-header.clickable {
+			cursor: pointer;
+		}
+	</style>
 	
 	<!--START OF respuestas.php-->
 	<body>
@@ -71,21 +97,61 @@
             	<img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
         	</a>
         	<div id="account">
+        		<a class="nav-link" style="margin-right: 1rem;" href="<?= $_SERVER['HTTP_REFERER'] ?>"><i class="fas fa-arrow-left"></i> Back</a>
             	<a class="sign-out" href="./processes/logout.php">Sign Out</a>
         	</div>
     	</header>
     	
-    	<?php if($id_experiencia == 1): ?>
-    	<div class="container" style="margin-top: 12vh;"><div class="row"><div class="col"><h4>Warning: Este script no funciona para esta experiencia en particular (la parte de escoger los resultados por cada estudiante).</h4></div></div></div>
+    	<?php if($experienceID === 1): ?>
+    	<div class="container" style="margin-top: 8rem;">
+    		<div class="row">
+    			<div class="col">
+    				<h4>Warning: Este script no funciona para esta experiencia en particular (la parte de escoger los resultados por cada estudiante).</h4>
+  				</div>
+			</div>
+    	</div>
     	<?php endif; ?>
 	
-		<div class="container" style="margin-top: 12vh;">
+		<div class="container" style="margin-top: 8rem;">
+		
+			<!-- CHART -->
+			<div class="row">
+				<div class="col-sm-10">
+					<h2>
+						Results – <span class="text-muted"><?php echo $experience['title'] ?></span>
+						<button type="button" class="btn btn-link btn-lg" data-toggle="popover" title="Table Tips" data-content="Toggle between one student or all students. Also, you can view results with respect to categories and subcategories. Click on each moment to get a breakdown of their details." data-placement="bottom">
+							<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
+						</button>
+					</h2>
+				</div>
+				<div class="col-sm-2">
+					<br>
+					<form id="exportForm" method="POST" action="processes/export.php">
+						<input type="hidden" name="studentID" value="all">
+						<input type="hidden" name="id_exp" value="<?php echo $experienceID; ?>">
+						<input type="hidden" name="res_type" value="0">
+						<button type="submit" name="export" class="btn btn-primary">Export Raw</button>
+					</form>
+				</div>
+			</div>
+
+			<!-- CHART 2 -->
+			<div class="row">
+				<div class="col-md-12">
+					<canvas onclick="alert('holis brodel')" id="myChart2" style="margin: 2rem auto;">
+						<p>Your browser does not support the canvas element.</p>
+					</canvas>
+				</div>
+			</div>		
+		
 			<div class="row">
 				<div class="col">
 				
 				
 				
 				
+		<div class="table-responsive">
+		
 		<table class="table table-bordered">
 			<thead>
 				<tr>
@@ -93,25 +159,43 @@
 					<th scope="col">
 					
 						<form>
-							<select class="form-control" id="id_student" style="text-align-last: center;">
+							<select class="form-control" id="studentID" style="text-align-last: center;">
 								<option disabled selected>Select Student</option>
 								<option selected value="all">All Students</option>
-<?php while($rowEst = mysqli_fetch_array($dbresultEst)): ?>
+								<?php while($rowEst = mysqli_fetch_array($dbresultEst)): ?>
 								<option value='<?php echo $rowEst['id_stu']; ?>'><?php echo $rowEst['id_stu']; ?></option>
-<?php endwhile; ?>
+								<?php endwhile; ?>
 							</select>
-							<input type="hidden" value="<?php echo $id_experiencia;?>" id="id_experiencia">
+							<input type="hidden" value="<?php echo $experienceID;?>" id="experienceID">
 						</form>
 
 					</th>
-					<th scope="col" rowspan="2" style="width:30px; vertical-align: middle; text-align: center;">Pre</th>
-					<th colspan="<?php echo $cant_sub_subquestionnair - 2;?>" style="vertical-align: middle; text-align: center;">Moments</th>
-					<th scope="col" rowspan="2" style="width:30px; vertical-align: middle; text-align: center;">Post</th>
-					<th scope="col" rowspan="2" style="width:30px; vertical-align: middle; text-align: center;">x&#772</th>
-					<th scope="col" rowspan="2" style="width:30px; vertical-align: middle; text-align: center;">&sigma;</th>
-					<th scope="col" rowspan="2" style="width:30px; vertical-align: middle; text-align: center;">% &Delta;<br><small>Ema - Pre</small></th>
-					<th scope="col" rowspan="2" style="width:30px; vertical-align: middle; text-align: center;">% &Delta;<br><small>Post - Ema</small></th>
-					<th scope="col" rowspan="2" style="width:30px; vertical-align: middle; text-align: center;">% &Delta;<br><small>Post - Pre</small></th>
+					<th
+						scope="col"
+						rowspan="2"
+						class="table-header clickable"
+						data-momentid="<?= $moments[0]['id'] ?>"
+						onclick="$('#breakdownModal').modal('show')"
+						data-momentnumber="PRE"
+					>
+						Pre
+					</th>
+					<th colspan="<?php echo count($moments) - 2; ?>" style="vertical-align: middle; text-align: center;">Moments</th>
+					<th
+						scope="col"
+						rowspan="2"
+						class="table-header clickable"
+						data-momentid="<?= $moments[count($moments) - 1]['id'] ?>"
+						onclick="$('#breakdownModal').modal('show')"
+						data-momentnumber="POST"
+					>
+						Post
+					</th>
+					<th scope="col" rowspan="2" class="table-header">&mu;</th><!--x&#772-->
+					<th scope="col" rowspan="2" class="table-header">&sigma;</th>
+					<th scope="col" rowspan="2" class="table-header">%&Delta;<br><small>Moments - Pre</small></th>
+					<th scope="col" rowspan="2" class="table-header">%&Delta;<br><small>Post - Moments</small></th>
+					<th scope="col" rowspan="2" class="table-header">%&Delta;<br><small>Post - Pre</small></th>
 				</tr>
 				<tr>
 					<th>   
@@ -122,80 +206,595 @@
 								<option value="1">Subcategories</option>
 								<option value="2">Categories</option>
 							</select>
-							<input type="hidden" value="<?php echo $id_experiencia;?>" id="id_experiencia">
+							<input type="hidden" value="<?php echo $experienceID;?>" id="experienceID">
 						</form>
 	
 					</th>
-<?php for($i = 1; $i <= $cant_sub_subquestionnair-2; $i++): ?>
-					<th scope="col" style="width:30px vertical-align: middle; text-align: center;""><?php echo $i; ?></th>
-<?php endfor; ?>
+					<?php for($i = 1; $i <= count($moments) - 2; $i++): ?>
+					<th
+						class="table-header clickable"
+						scope="col"
+						data-momentid="<?= $moments[$i]['id'] ?>"
+						onclick="$('#breakdownModal').modal('show')"
+						data-momentnumber="<?= '#' . $i ?>"
+					>
+						<?php echo $i; ?>
+					</th>
+					<?php endfor; ?>
 				</tr>
 			</thead>
 			<tbody id="loqueseve">
-<?php foreach($resultados as $pregunta): ?>
+				<?php foreach($resultados as $pregunta): ?>
 				<tr>
-<?php foreach($pregunta as $item): ?>
+					<?php foreach($pregunta as $item): ?>
 					<td style="vertical-align: middle; text-align: center;"><?php echo $item ?></td>
-<?php endforeach; ?>
+					<?php endforeach; ?>
 				</tr>
-<?php endforeach; ?>
+				<?php endforeach; ?>
 			</tbody>
 		</table>
 		
-				</div><!--col-->
-			</div><!--row-->
 		
-
-			<div class="row">
-				<div class="col">
-					<form id="exportForm" method="POST" action="processes/export.php">
-						<input type="hidden" name="id_student" value="all">
-						<input type="hidden" name="id_exp" value="<?php echo $id_experiencia; ?>">
-						<input type="hidden" name="res_type" value="0">
-						<button type="submit" name="export" class="btn btn-info">Export</button>
-					</form>
+		</div><!--table-responsive-->
+		
+		
 				</div><!--col-->
 			</div><!--row-->
 
 		</div><!--container-->
 		
 		
+		<!-- CATEGORY CHART MODAL -->
+		<div class='modal' id='breakdownModal' tabindex='-1' role='dialog' aria-labelledby='breakdownModalLabel' aria-hidden='true'>
+			<div class='modal-dialog modal-lg' role='document'>
+ 				<div class='modal-content'>	
+						
+					<div class='modal-header'>
+						<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
+							<span aria-hidden='true'>&times;</span>
+						</button>
+				 	  	<h3 class='modal-title' id='breakdownModalLabel'>Breakdown by <span id="breakdown-type">Category</span> <small id="moment-number">(Moment #)</small></h3>
+   					</div>
+ 						
+ 					<div class='modal-body'>
+ 						
+						<div class="row">
+ 							<div class="col-md-12">
+ 								<canvas id="categoryChart">
+									<p>Your browser does not support the canvas element.</p>
+								</canvas>
+ 								<canvas id="subcategoryChart">
+									<p>Your browser does not support the canvas element.</p>
+								</canvas>
+ 								<canvas id="questionChart">
+									<p>Your browser does not support the canvas element.</p>
+								</canvas>
+ 							</div>
+ 						</div>
+
+      				</div><!--modal-body-->
+     					
+     				<div class='modal-footer'>
+       					<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
+      				</div>  					
+    			
+    			</div><!--modal-content-->
+  			</div><!--modal-dialog-->
+		</div><!--modal-->
+		
+		
+		
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
+<!-- 		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script> -->
+		
+		
+		
 <script>
-window.onload = function() {
-$("#tipo_resumen").change(function() {
 
+// Enable popovers
+$(function () {
+  $('[data-toggle="popover"]').popover();
+});
+
+
+// Global Map of charts
+let myCharts = {};
+
+
+function fetchData(elementID = '#studentID') {
+
+	// Define a map from elementID to element index
+	let idToIndex = {
+		'#studentID': 0,
+		'#tipo_resumen': 2
+	};
+	
+	// Fetch corresponding element index
+	let index = idToIndex[elementID];
+	
+	// Manually change the studentID and respuestaType for the export form
 	let inputs = document.querySelector('#exportForm').children;
-	inputs[2].value = $("#tipo_resumen").val();
+	inputs[index].value = $(elementID).val();
+
+	// Fetch data from database
+	$.post('respuestasData.php',
+		{
+			id_student: $('#studentID').val(),
+			id_exp: $('#experienceID').val(),
+			res_type: $('#tipo_resumen').val()
+		},
+		function(data, status) {
+			$('#loqueseve').html(data);
+		}
+	);
 	
-	$.post("respuestasData.php",
+}
+
+function fetchAnswerRate() {
+
+	let experienceID = $("#experienceID").val()
+
+	$.post("special5.php",
 		{
-			id_student: $("#id_student").val(),
-			id_exp: $("#id_experiencia").val(),
-			res_type: $("#tipo_resumen").val()
+			experienceID: experienceID
 		},
 		function(data, status) {
-			$("#loqueseve").html(data);
+		
+			console.log(data);
+		
+			// Fetch Data
+			let payload = JSON.parse(data);
+			let dataSet = payload.data; // array of {count, momentID, date} objects
+			let maxScore = payload.maxScore // the maximum 'count' value from the data array
+			
+			// Initialize Data Containers
+			let dataPoints = []; // [10, 20, 50, 70, 30];
+			let dataLabels = []; // ['1', '2', '3', '4', '5'];
+			
+			// Create momentID -> momentNumber map for styling purposes
+			let momentIDToNumber = {};
+			let number = 1; // start at 1
+			
+			// Fill Data Containers
+			dataSet.forEach(function(point) {
+			
+				// If given ID not in map, create it and increment number by 1
+				if(momentIDToNumber[point.momentID] === undefined) {
+					momentIDToNumber[point.momentID] = number;
+					number++;
+				}
+			
+				dataPoints.push(point.count);
+				dataLabels.push(`${point.momentTitle} (${point.date})`);
+				
+			});
+			
+			// Render Chart
+			renderStaticChart(dataPoints, dataLabels, maxScore);
+			
 		}
 	);
-});
 
-$("#id_student").change(function() {
+}
 
-	let inputs = document.querySelector('#exportForm').children;
-	inputs[0].value = $("#id_student").val();
 
-	$.post("respuestasData.php",
+function fetchBreakdownData(momentID, momentNumber, breakdownType) {
+
+	
+	// Fetch Necessary Data
+	let experienceID = $('#experienceID').val();
+	let studentID = $('#studentID').val();
+	
+	
+	
+	// Set Metadata Maps (breakdownType -> metadata)
+	let breakdownChart = {
+		'0': 'questionChart',
+		'1': 'subcategoryChart',
+		'2': 'categoryChart'
+	};
+	
+	let breakdownText = {
+		'0': 'Questions',
+		'1': 'Subcategories',
+		'2': 'Categories'
+	};
+	
+	let breakdownScripts = {
+		'0': 'questionBreakdown.php',
+		'1': 'subcategoryBreakdown.php',
+		'2': 'categoryBreakdown.php'
+	};
+	
+	
+	
+	// Change Breakdown Type Text
+	$('#breakdownModal #breakdown-type').text(breakdownText[breakdownType]);
+	
+	
+	
+	// Change Moment Number
+	let metaText = momentNumber.includes('#') ? `(Moment  ${momentNumber}` : `(${momentNumber} TEST`;
+	if(studentID !== 'all') {
+		metaText += ` of student ${studentID}`; // if a specific student is selected, say so
+	}
+	metaText += ')';
+	$('#breakdownModal #moment-number').text(metaText);
+	
+	
+	
+	// Set Loading State on modal
+	$('#breakdownModal canvas').hide();
+	let loader = $('<div class="text-center" style="margin: 5rem 0"><h3>Loading Chart...</h3><span class="loader loader-lg"></span></div>').insertAfter('#breakdownModal canvas:last-child');
+	
+	
+	
+	// Make Request & Update Selected Chart
+	$.post(breakdownScripts[breakdownType],
 		{
-			id_student: $("#id_student").val(),
-			id_exp: $("#id_experiencia").val(),
-			res_type: $("#tipo_resumen").val()
+			experienceID: experienceID,
+			momentID: momentID,
+			studentID: studentID
 		},
 		function(data, status) {
-			$("#loqueseve").html(data);
+		
+			console.log(data);
+			
+			// Fetch Data
+			let payload = data; //JSON.parse(data); // aparently already an object
+			let datasets = payload.datasets; // array of objects (datasets)
+			let dataLabels = payload.dataLabels; // array of labels ["ResearchSelfEfficacy", "SourcesSelfEfficacy"]
+
+			// Render Chart
+			updateBreakdownChart(datasets, dataLabels, breakdownChart[breakdownType]);
+			
+			// Stop Loading State and Show Chart
+			$(loader).remove();
+			$('#' + breakdownChart[breakdownType]).show();
+			
+		
 		}
 	);
+
+}
+
+
+
+
+window.addEventListener('load', function() {
+
+	// 1. Fetch Data for when changing select menus
+	fetchData(); // can be "#tipo_resumen" too
+	
+	// 2. Set Event Listeners for menu change
+	$("#studentID").change(function() {
+		fetchData("#studentID");
+	});
+	$("#tipo_resumen").change(function() {
+		fetchData("#tipo_resumen");
+	});
+	
+	// 3. Set Event Listeners for table clicks
+	$("th.table-header.clickable").on("click", function() {
+		let momentID = $(this).data("momentid");
+		let momentNumber = $(this).data("momentnumber");
+		let breakdownType = $("#tipo_resumen").val(); // 0 for questions, 1 for subcategories, 2 for categories
+		fetchBreakdownData(momentID, momentNumber, breakdownType);
+	});
+	
+	// 4. Fetch and Render Answer Rate Chart
+	fetchAnswerRate();
+	
+	// 5. Create Breakdown Charts
+	['categoryChart', 'subcategoryChart', 'questionChart'].forEach(function(chartName) {
+		createBreakdownChart(chartName);
+	});
+	
 });
+
+
+
+function createBreakdownChart(chartName) {
+
+
+	// Set Metadata Maps
+	let auxiliaries = {
+		'categoryChart': {
+			titleText: 'Distribution of Answers per Category',
+			xLabel: 'Category',
+			yLabel: 'Amount of people'
+		},
+		'subcategoryChart': {
+			titleText: 'Distribution of Answers per Subcategory',
+			xLabel: 'Subcategory',
+			yLabel: 'Amount of people'
+		},
+		'questionChart': {
+			titleText: 'Distribution of Answers per Question (not done yet)',
+			xLabel: 'Question',
+			yLabel: 'Amount of people'
+		},
+		
+	};
+
+
+
+	// Initialize Data
+	let data = {
+		labels: [],
+		datasets: []
+	};
+	
+	
+	// Initialize Options
+	let options = {
+		title: {
+			display: true,
+			text: auxiliaries[chartName].titleText
+		},
+		legend: false,
+		tooltips: {
+			position: 'average',
+			mode: 'index',
+			intersect: false
+		},
+		scales: {
+			xAxes: [{
+				stacked: true, // for vertical bars
+				display: true,
+				scaleLabel: {
+					display: true,
+					labelString: auxiliaries[chartName].xLabel
+				}
+			}],
+			yAxes: [{
+				stacked: false, // for vertical bars
+				display: true,
+				scaleLabel: {
+					display: true,
+					labelString: auxiliaries[chartName].yLabel
+				},
+				ticks: {
+					suggestedMin: 0
+				}
+			}]
+		},
+		layout: {
+			padding: 30
+		}
+	};
+	
+	
+	// Set Chart Configuration
+	let config = {
+		type: 'bar',
+		data: data,
+		options: options
+	};
+	
+	
+	// Create Chart
+	let chart = new Chart(chartName, config);
+	
+	
+	// Store Chart Reference in global dict
+	myCharts[chartName] = chart;
+
+}
+
+
+function updateBreakdownChart(datasets, dataLabels, chartName) {
+
+	// Store chart
+	let chart = myCharts[chartName];
+	
+	// Remove all labels
+	while(chart.data.labels.pop());
+	
+	// Insert new labels
+	dataLabels.forEach(function(label) {
+		chart.data.labels.push(label);
+	});
+	
+	// Remove all datasets
+	while(chart.data.datasets.pop());
+	
+	// Insert new datasets (with their respective data points)
+	datasets.forEach(function(dataset) {
+		chart.data.datasets.push(dataset);
+	});
+	
+	// Update chart
+	chart.update();
+	console.log(chart.config);
+
 }
+
+
+
+function renderStaticChart(dataPoints, dataLabels, maxScore, elementID) {
+
+
+	// Map from elementID to corresponding chart metadata
+	let auxiliaries = {
+		'myChart2': {
+			label: ' # of people who answered',
+			backgroundColor: '#A4262C',
+			borderColor: '#A4262C',
+			titleText: 'Answer Rate',
+			xAxisLabel: 'Moment Date & Number',
+			yAxisLabel: 'Answers'
+		}
+	};
+	
+	// Initialize Data
+	let data = {
+		labels: dataLabels,
+		datasets: [{
+			label: auxiliaries['myChart2'].label,
+			data: dataPoints,
+			backgroundColor: auxiliaries['myChart2'].backgroundColor,
+			borderColor: auxiliaries['myChart2'].borderColor,
+			fill: false
+		}]
+	};
+	
+	// Initialize Options
+	let options = {
+		title: {
+			display: true,
+			text: auxiliaries['myChart2'].titleText
+		},
+		legend: false,
+		tooltips: {
+			position: 'average',
+			mode: 'index',
+			intersect: false
+		},
+		scales: {
+			xAxes: [{
+				stacked: true, // for vertical bars
+				display: true,
+				scaleLabel: {
+					display: true,
+					labelString: auxiliaries['myChart2'].xAxisLabel
+				}
+			}],
+			yAxes: [{
+				stacked: false, // for vertical bars
+				display: true,
+				scaleLabel: {
+					display: true,
+					labelString: auxiliaries['myChart2'].yAxisLabel
+				},
+				ticks: {
+					suggestedMin: 0, // substitute with data.min or something
+					suggestedMax: maxScore // substitute with data.max or something
+				}
+			}]
+		}
+	};
+	
+	// Set Chart Configuration
+	let config = {
+		type: 'bar',
+		data: data,
+		options: options
+	};
+	
+	let myBarChart = new Chart('myChart2', config);	
+
+}
+
+
+// Globals for chart timeline
+let pointCount = 1;
+
+function renderMovingChart(dataPoints, dataLabels, maxScore) {
+	
+	// Initialize Data
+	let data = {
+			labels: [], // initially empty, because it will be filled slowly for the timeline
+			datasets: [{
+				label: 'Moments answered per day and moment',
+				data: [], // initially empty, because it will be filled slowly for the timeline
+				backgroundColor: 'red',
+    	        borderColor: 'red',
+// 	            borderWidth: 1,
+	            fill: false
+			}]
+		};
+	
+	// Initialize Options
+	let options = {
+			legend: false,
+			tooltips: {
+				position: 'average',
+				mode: 'index',
+				intersect: false
+			},
+			scales: {
+				xAxes: [{
+					display: true,
+					scaleLabel: {
+						display: true,
+						labelString: 'Moment Date (#ID)'
+					}
+				}],
+				yAxes: [{
+					display: true,
+					scaleLabel: {
+						display: true,
+						labelString: 'Moments Answered'
+					},
+					ticks: {
+						suggestedMin: 0, // substitute with data.min or something
+						suggestedMax: maxScore // substitute with data.max or something
+					}
+				}]
+			}
+		};
+	
+	// Set Chart Configuration
+	let config = {
+		type: 'line',
+		data: data,
+		options: options
+	}
+	
+	// config2
+	let config2 = {
+		type: 'bar',
+		data: data,
+		options: options
+	};
+	
+	// Render Chart
+// 	let myLineChart = new Chart('myChart', config);
+	let myBarChart = new Chart('myChart2', config2);	
+
+
+	// Set Timeline
+	setInterval(function() {
+
+		// Modularly increment 'index'/'counter'
+		pointCount = pointCount % dataPoints.length + 1;
+	
+		if(pointCount !== 1) {
+		
+			// Create the label for that ith point
+			config.data.labels.push(dataLabels[pointCount - 1]);
+	
+			// Overwrite existing
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data.push(dataPoints[pointCount - 1]);
+			});
+	
+		} else {
+	
+			// Remove all labels except the first
+			config.data.labels.splice(0, dataPoints.length);
+		
+			// Remove all data points except the first (for each dataset)
+			config.data.datasets.forEach(function(dataset) {
+				for(let k = 0; k < dataPoints.length; k++) {
+					dataset.data.pop();
+				}
+			});
+		
+		}
+	
+		// Render chart
+// 		myLineChart.update();
+		myBarChart.update();
+	
+
+	}, 1500);
+
+}	
+
+
+
 </script>
 
 

siCategoria.php

@@ -2,7 +2,7 @@
 	$tipo_resumen="Categoria";
 	//print($id_student);
 //////////Busca cantidad de Sub Cuestionarios - Empieza////////////
-	$sqlSelect = sprintf("SELECT qs.* FROM `experience_questionnair` eq, subquestionnair qs where eq.id_questionnair=qs.id_questionnair and eq.id_experience = %s",
+	$sqlSelect = sprintf("SELECT SQ.* FROM `experience_questionnair` AS EQ JOIN subquestionnair AS SQ WHERE EQ.id_questionnair = SQ.id_questionnair AND EQ.id_experience = %s ORDER BY SQ.date_to_administer",
 	GetSQLValueString($id_experiencia, "int")
 	);
 	$dbresultSel = mysqli_query($connection,$sqlSelect);

siPreguntas.php

@@ -2,7 +2,7 @@
 	$tipo_resumen="Preguntas";
 	//print($id_student);
 //////////Busca cantidad de Sub Cuestionarios - Empieza////////////
-	$sqlSelect = sprintf("SELECT qs.* FROM `experience_questionnair` eq, subquestionnair qs where eq.id_questionnair=qs.id_questionnair and eq.id_experience = %s",
+	$sqlSelect = sprintf("SELECT SQ.* FROM `experience_questionnair` AS EQ JOIN subquestionnair AS SQ WHERE EQ.id_questionnair = SQ.id_questionnair AND EQ.id_experience = %s ORDER BY SQ.date_to_administer",
 	GetSQLValueString($id_experiencia, "int")
 	);
 	$dbresultSel = mysqli_query($connection,$sqlSelect);

siSubCategoria.php

@@ -2,7 +2,7 @@
 	$tipo_resumen="Sub Categoria";
 	//print($id_student);
 //////////Busca cantidad de Sub Cuestionarios - Empieza////////////
-	$sqlSelect = sprintf("SELECT qs.* FROM `experience_questionnair` eq, subquestionnair qs where eq.id_questionnair=qs.id_questionnair and eq.id_experience = %s",
+	$sqlSelect = sprintf("SELECT SQ.* FROM `experience_questionnair` AS EQ JOIN subquestionnair AS SQ WHERE EQ.id_questionnair = SQ.id_questionnair AND EQ.id_experience = %s ORDER BY SQ.date_to_administer",
 	GetSQLValueString($id_experiencia, "int")
 	);
 	$dbresultSel = mysqli_query($connection,$sqlSelect);

special5.php

@@ -0,0 +1,87 @@
+<?php
+
+// This script fetches how many people have answered a given moment
+// and spits out a json with an array of people count, moment ID, and date
+
+
+	require_once 'processes/config.php';
+	require_once 'processes/dbh.inc.php';
+	require_once 'processes/checkLogin.php';
+
+
+$experienceID = mysqli_real_escape_string($connection, trim($_POST['experienceID']));
+
+// Old Query
+// (Note: only the tuple (momentID, date) is unique, so same moments yet different dates appear separated from each other)
+/*
+$sql = "SELECT COUNT(id_student) AS `count`, id_subquestionnair AS momentID, DATE(answered_date) AS `date`
+		FROM `student_subquestionnair`
+		WHERE id_subquestionnair IN
+				(SELECT id_subquestionnair
+				 FROM experience_subquestionnair
+				 WHERE id_experience = '$experienceID')
+		GROUP BY id_subquestionnair, DATE(answered_date)
+		ORDER BY DATE(answered_date) ASC";
+*/
+		
+// Fixed Query
+// (Note: used date_to_administer instead of date_answered to avoid splitting (momentID, date) tuples)
+/*
+$sql = "SELECT COUNT(SS.id_student) AS `count`, SS.id_subquestionnair AS momentID, DATE(SQ.date_to_administer) AS `date`
+		FROM `student_subquestionnair` AS SS RIGHT JOIN `subquestionnair` AS SQ
+	    WHERE SS.id_subquestionnair = SQ.id
+		AND SS.id_subquestionnair IN
+				(SELECT id_subquestionnair
+				 FROM experience_subquestionnair
+				 WHERE id_experience = '$experienceID')
+		GROUP BY SS.id_subquestionnair, DATE(SQ.date_to_administer)
+		ORDER BY DATE(SQ.date_to_administer) ASC";
+*/
+
+// Re-fixed Query
+// (Note: display 0 for those moments that haven't been answered as of "today")
+$sql = "SELECT COUNT(SS.id_student) AS `count`, SQ.id AS momentID, DATE(SQ.date_to_administer) AS `date`, SQ.title AS momentTitle
+		FROM `student_subquestionnair` AS SS RIGHT JOIN `subquestionnair` AS SQ
+	    ON SS.id_subquestionnair = SQ.id
+		WHERE SQ.id IN
+				(SELECT id_subquestionnair
+				 FROM experience_subquestionnair
+				 WHERE id_experience = '$experienceID')
+        AND DATE(SQ.date_to_administer) <= CURRENT_DATE
+		GROUP BY SQ.id, DATE(SQ.date_to_administer)
+		ORDER BY DATE(SQ.date_to_administer) ASC";
+
+$result = mysqli_query($connection, $sql);
+
+
+// Prepare Result (fetch max score at once)
+$maxScore = 0;
+while($row = mysqli_fetch_object($result)) {
+	
+	// Fetch Max Score (for formating chart purposes)
+	if($maxScore < $row->count) {
+		$maxScore = $row->count;
+	}
+	
+	// Format Date as "<abbreviated month> <day of the month without leading zero>"
+	$row->date = date('M j', strtotime($row->date));
+	
+	// Append to array	
+	$data[] = $row;
+}
+
+// EXAMPLE:
+// $temp = [
+// 	[
+// 		'count' => 1,
+// 		'momentID' => 133,
+// 		'date' => '2020-03-12'
+// 	]
+// ];
+
+$payload = [
+	'maxScore' => $maxScore,
+	'data' => $data
+];
+
+echo json_encode($payload);

subcategoryBreakdown.php

@@ -0,0 +1,192 @@
+<?php 
+
+
+// This script fetches how many people, for every subcategory, have answered a given score
+// and spits out a json with an array of subcategory ID, subcategory name, score and count
+
+// 	require_once 'processes/config.php';
+	require_once 'processes/dbh.inc.php';
+// 	require_once 'processes/checkLogin.php';
+
+
+
+$experienceID = mysqli_real_escape_string($connection, trim($_POST['experienceID'])); // 26
+$momentID = mysqli_real_escape_string($connection, trim($_POST['momentID'])); // 196
+$studentID = mysqli_real_escape_string($connection, trim($_POST['studentID']));
+
+
+
+// Count the number of subcategories for the experience
+$sqlCountSubcategories = "SELECT DISTINCT S.id
+						FROM subcategory AS S
+						JOIN question as Q
+						JOIN subquestionnair_question AS SQ
+						JOIN experience_subquestionnair AS ES
+							WHERE S.id = Q.id_subcategory
+							AND SQ.id_question = Q.id
+							AND SQ.id_subquestionnair = ES.id_subquestionnair
+							AND ES.id_experience = '$experienceID';";
+$resultCountSubcategories = mysqli_query($connection, $sqlCountSubcategories);
+$countSubcategories = $resultCountSubcategories->num_rows;
+
+
+
+// Fetch all the results, depending if all students or a specific one
+if($studentID === "all") {
+
+	$sql = "SELECT S.id AS subcategoryID,
+		   	S.subcategoria AS subcategoryName,
+	       	A.value AS score,
+    	   	COUNT(id_student) AS `count`
+			FROM subcategory AS S
+    	    LEFT JOIN question AS Q
+        		ON Q.id_subcategory = S.id
+			JOIN answer AS A
+    	    JOIN subquestionnair_question AS SQ
+        	JOIN experience_subquestionnair AS ES
+				-- WHERE Q.id_subcategory = S.id
+		        WHERE A.id_question = Q.id
+	    	    AND A.id_question = SQ.id_question
+    	    	AND A.id_subquestionnair = SQ.id_subquestionnair
+				AND SQ.id_subquestionnair = ES.id_subquestionnair
+				AND ES.id_experience = '$experienceID'
+    	        AND SQ.id_subquestionnair = '$momentID'
+					GROUP BY score, subcategoryID
+					ORDER BY score, subcategoryID";
+
+} else {
+
+	$sql = "SELECT S.id AS subcategoryID,
+		   	S.subcategoria AS subcategoryName,
+	       	A.value AS score,
+    	   	COUNT(id_student) AS `count`
+			FROM subcategory AS S
+    	    LEFT JOIN question AS Q
+        		ON Q.id_subcategory = S.id
+			JOIN answer AS A
+    	    JOIN subquestionnair_question AS SQ
+        	JOIN experience_subquestionnair AS ES
+				-- WHERE Q.id_subcategory = S.id
+		        WHERE A.id_question = Q.id
+	    	    AND A.id_question = SQ.id_question
+    	    	AND A.id_subquestionnair = SQ.id_subquestionnair
+				AND SQ.id_subquestionnair = ES.id_subquestionnair
+				AND ES.id_experience = '$experienceID'
+    	        AND SQ.id_subquestionnair = '$momentID'
+        	    AND A.id_student = '$studentID' -- 118
+					GROUP BY score, subcategoryID
+					ORDER BY score, subcategoryID";
+
+}
+
+$result = mysqli_query($connection, $sql);
+
+
+
+// Initialize Arrays
+$datasets = [];
+$dataLabels = [];
+$scoreToIndex = [];
+$i = 0;
+$subcategoryIDToIndex = [];
+$j = 0;
+
+
+
+// Prepare result
+while($row = mysqli_fetch_object($result)) {
+
+
+	// Parse score (cause if might come from an open question)
+	// or it might be a float, while we should expect an int
+	// then cast it to string to use it as a map key
+	
+	$pointLabel = ($studentID === "all") ? " # of people who answered '" : " # of times student answered '";
+	
+	if(is_numeric($row->score)) {
+		$score = $pointLabel . strval((int)$row->score) . "'"; // answers may be 5.0 or 5, so first we take out the .
+	} else {
+		continue;
+	}
+
+
+	// Create new label if new subcategory is detected
+	if($subcategoryIDToIndex[$row->subcategoryID] || $subcategoryIDToIndex[$row->subcategoryID] === 0) { // index 0 should be skipped
+		
+		// nothing
+		
+	} else {
+	
+		// Create new subcategory
+		$dataLabels[] = $row->subcategoryName;
+		
+		// Store subcategory index for $data array (inside dataset)
+		$subcategoryIDToIndex[$row->subcategoryID] = $j;
+		$j++;
+		
+	}
+
+	
+	
+	// Create dataset for corresponding score
+	if($scoreToIndex[$score] || $scoreToIndex[$score] === 0) { // index 0 should be skipped
+	
+		// nothing
+	
+	} else {
+
+		// serves as a tally to check
+		// which scores have been already
+		// processed AND as a map of
+		// score to index of the
+		// $dataset array
+		$scoreToIndex[$score] = $i;
+		$i++;
+
+
+		// Create new dataset for this label
+		$datasets[] = [
+			'label' => $score,
+			'data' => array_fill(0, $countSubcategories, 0), // array of countSubcategories 0's
+			'backgroundColor' => '#' . substr(sha1($score), 0, 6),
+// 			'borderWidth' => 3,
+// 			'borderColor' => '#' . substr(sha1($score), 0, 6),
+			'stack' => $score
+// 			'fill' => false
+		];
+		
+	}
+
+
+	// Append data point to corresponding subcategory
+	$datasets[$scoreToIndex[$score]]['data'][$subcategoryIDToIndex[$row->subcategoryID]] = (int)$row->count;	
+
+
+}
+
+
+
+
+/*
+	let data = {
+		labels: dataLabels,
+		datasets: [{
+			label: auxiliaries['myChart2'].label,
+			data: dataPoints,
+			backgroundColor: auxiliaries['myChart2'].backgroundColor,
+			borderColor: auxiliaries['myChart2'].borderColor,
+			fill: false
+		}]
+	};
+*/
+
+
+$arr = [
+	'datasets' => $datasets,
+	'dataLabels' => $dataLabels
+];
+
+
+// Spit out response JSON
+echo header("Content-Type: application/json; charset=utf-8");
+echo json_encode($arr);