I making a page for teachers where they can see a score their students' score and for that there are charts to show the amount of students got correct on each question. I tried to just put two charts, but it only shows one of the charts and the other chart has been as a blank. I thought the problem if happening because both charts has the same name, but after I changed one of the names of the chart, but it still only shows one of the charts. Here this is my php/html/js code:
<?php
if (isset($_GET['question'])) {
$con = mysqli_connect("localhost", "root", "", "testing");
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
$sql = "SELECT * FROM `chapter 7 vocabulary test` WHERE `score".$_GET["question"]."`='1'";
$result = mysqli_query($con, $sql);
$full = mysqli_num_rows($result);
mysqli_free_result($result);
$sql = "SELECT * FROM `chapter 7 vocabulary test` WHERE `score".$_GET["question"]."`='0'";
$result = mysqli_query($con, $sql);
$none = mysqli_num_rows($result);
mysqli_free_result($result);
?>
<script src="jquery-3.3.1.min.js"></script>
<script src="Chart.js"></script>
<div id="canvas"><canvas id="questioncan1" style="height: 25vh; width: 25vh;"></canvas></div>
<script type="text/javascript">
let myChart = document.getElementById('questioncan1').getContext("2d");
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = "black";
let questioncan1 = new Chart(myChart, {
type: "doughnut",
data: {
labels: [
"Full Credit",
"No Credit"
],
datasets: [
{
data: [
5,
15
],
backgroundColor: [
"#11FF00",
"#F7301E"
],
borderWidth: 0
}
]
},
options: {
scaleShowLabels: false,
responsive: false,
legend: {
display: false
}
}
});
</script>
<br><br>
<table>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<?php
$sql = "SELECT * FROM `chapter 7 vocabulary test`";
$result = $con->query($sql);
while ($row = $result->fetch_assoc()) {
$sql2 = "SELECT * FROM `users` WHERE `snumber`='".$row["snumber"]."'";
$result2 = $con->query($sql2);
while ($row2 = $result2->fetch_assoc()) {
echo "<tr><td>".$row2['name']."</td><td>".$row["score".$_GET['question']]."</td></tr>";
}
}
?>
</table>
<script src="jquery-3.3.1.min.js"></script>
<div id="canvas"><canvas id="questioncan" style="height: 25vh; width: 25vh;"></canvas></div>
<script type="text/javascript">
let myChart = document.getElementById('questioncan').getContext("2d");
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = "black";
let questioncan = new Chart(myChart, {
type: "doughnut",
data: {
labels: [
"Full Credit",
"No Credit"
],
datasets: [
{
data: [
<?php echo $full; ?>,
<?php echo $none; ?>
],
backgroundColor: [
"#11FF00",
"#F7301E"
],
borderWidth: 0
}
]
},
options: {
scaleShowLabels: false,
responsive: false,
legend: {
display: false
}
}
});
</script>
<br><br>
<table>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<?php
$sql = "SELECT * FROM `chapter 7 vocabulary test`";
$result = $con->query($sql);
while ($row = $result->fetch_assoc()) {
$sql2 = "SELECT * FROM `users` WHERE `snumber`='".$row["snumber"]."'";
$result2 = $con->query($sql2);
while ($row2 = $result2->fetch_assoc()) {
echo "<tr><td>".$row2['name']."</td><td>".$row["score".$_GET['question']]."</td></tr>";
}
}
?>
</table>
<?php
}
?>
