84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
HTML
{% extends "admin/base_site.html" %}
|
|
{% block content %}
|
|
<h2 class="col-12">Dashboard</h2>
|
|
<p class="col-12">Welcome</p>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<div class="row g-4 col-12">
|
|
<div class="col-12 col-md-6 col-lg-3">
|
|
<div class="card text-center p-3">
|
|
<h5>Course</h5>
|
|
<p class="fs-2">DCOM</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-3">
|
|
<div class="card text-center p-3">
|
|
<h5>Current Semester</h5>
|
|
<p class="fs-2">5</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-3">
|
|
<div class="card text-center p-3">
|
|
<h5>Total Subject</h5>
|
|
<p class="fs-2">12</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Subject Attendance Bar Chart -->
|
|
<div class="row col-12 col-lg-6 chart-container">
|
|
<canvas id="attendanceBarChart"></canvas>
|
|
</div>
|
|
<!-- Subject Results Bar Chart -->
|
|
<div class="row col-12 col-lg-6 chart-container">
|
|
<canvas id="resultBarChart"></canvas>
|
|
</div>
|
|
<script>
|
|
// Bar Chart for Subject Attendance
|
|
const attendanceCtx = document.getElementById("attendanceBarChart").getContext("2d");
|
|
new Chart(attendanceCtx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Math", "Science", "English", "History", "Geography"], // Example subject names
|
|
datasets: [
|
|
{
|
|
label: "Attendance Percentage",
|
|
data: [90, 80, 85, 75, 95], // Example attendance percentages for each subject
|
|
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4CAF50", "#FF8C00"],
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100, // Percentage scale
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
// Bar Chart for Subject Results (Example)
|
|
const resultCtx = document.getElementById("resultBarChart").getContext("2d");
|
|
new Chart(resultCtx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Math", "Science", "English", "History", "Geography"], // Example subject names
|
|
datasets: [
|
|
{
|
|
label: "Results (Percentage)",
|
|
data: [88, 75, 80, 70, 92], // Example result percentages for each subject
|
|
backgroundColor: ["#FF5733", "#33FF57", "#3357FF", "#FF5733", "#FF8C00"],
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100, // Percentage scale
|
|
},
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
{% endblock %}
|