137 lines
5.0 KiB
Plaintext
137 lines
5.0 KiB
Plaintext
<script>
|
|
window.onload = function () {
|
|
fetchUserData();
|
|
};
|
|
|
|
function fetchUserData() {
|
|
$.ajax({
|
|
url: "/IFSS/TicketServlet",
|
|
method: "GET",
|
|
dataType: "json",
|
|
success: function (data) {
|
|
console.log(data);
|
|
populateUserDropdown(data);
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error("Error fetching data: " + error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function populateUserDropdown(users) {
|
|
let dropdown = document.getElementById("userDropdown");
|
|
users.forEach(user => {
|
|
let option = document.createElement("option");
|
|
option.value = user.user_id;
|
|
option.textContent = "User_" + user.user_id;
|
|
dropdown.appendChild(option);
|
|
});
|
|
|
|
// Add event listener for dropdown change
|
|
dropdown.addEventListener("change", function () {
|
|
let selectedUserId = this.value;
|
|
let selectedUser = users.find(user => user.user_id == selectedUserId);
|
|
displayUserCharts(selectedUser);
|
|
});
|
|
}
|
|
|
|
function displayUserCharts(user) {
|
|
let container = document.getElementById("userDashboard");
|
|
container.innerHTML = ""; // Clear previous charts
|
|
|
|
// Create doughnut chart container
|
|
let doughnutChartContainer = document.createElement("div");
|
|
doughnutChartContainer.classList.add("chart-container");
|
|
|
|
let doughnutTitle = document.createElement("h3");
|
|
doughnutTitle.textContent = "User_" + user.user_id + " - Doughnut Chart";
|
|
|
|
let doughnutCanvas = document.createElement("canvas");
|
|
doughnutCanvas.id = "doughnut_chart_" + user.user_id;
|
|
|
|
// Append elements for doughnut chart
|
|
doughnutChartContainer.appendChild(doughnutTitle);
|
|
doughnutChartContainer.appendChild(doughnutCanvas);
|
|
container.appendChild(doughnutChartContainer);
|
|
|
|
// Create bar chart container
|
|
let barChartContainer = document.createElement("div");
|
|
barChartContainer.classList.add("chart-container");
|
|
|
|
let barTitle = document.createElement("h3");
|
|
barTitle.textContent = "User_" + user.user_id + " - Bar Chart";
|
|
|
|
let barCanvas = document.createElement("canvas");
|
|
barCanvas.id = "bar_chart_" + user.user_id;
|
|
|
|
// Append elements for bar chart
|
|
barChartContainer.appendChild(barTitle);
|
|
barChartContainer.appendChild(barCanvas);
|
|
container.appendChild(barChartContainer);
|
|
|
|
setTimeout(() => {
|
|
// Doughnut chart
|
|
let doughnutCtx = doughnutCanvas.getContext("2d");
|
|
if (!doughnutCtx) {
|
|
console.error(`Failed to get 2D context for canvas '${doughnutCanvas.id}'`);
|
|
return;
|
|
}
|
|
|
|
new Chart(doughnutCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ["unclaimed", "Overdue", "kyc", "SI"],
|
|
datasets: [{
|
|
data: [user.unclaimed, user.Loan_overdue, user.kyc_status, user.si_status],
|
|
backgroundColor: ["#36A2EB", "#FF6384", "#4BC0C0", "#FFCE56"],
|
|
hoverOffset: 8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
cutout: '70%', // Inner empty circle
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'right'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Bar chart
|
|
let barCtx = barCanvas.getContext("2d");
|
|
if (!barCtx) {
|
|
console.error(`Failed to get 2D context for canvas '${barCanvas.id}'`);
|
|
return;
|
|
}
|
|
|
|
new Chart(barCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["unclaimed", "Overdue", "kyc", "SI"],
|
|
datasets: [{
|
|
label: 'User Data',
|
|
data: [user.unclaimed, user.Loan_overdue, user.kyc_status, user.si_status],
|
|
backgroundColor: ["#36A2EB", "#FF6384", "#4BC0C0", "#FFCE56"]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}, 100);
|
|
}
|
|
</script>
|