Как я могу показать график внутри динамической панели навигации? [закрыто] ⇐ Php

[Anonymous]

У меня проблема с отображением графика на динамической панели навигации. На самом деле никаких ошибок не показывает. Это комбинация HTML, PHP и JavaScript. Я не могу точно определить, в чем проблема, поскольку не получаю никаких ошибок. Просто график не отображается, если я помещу его в динамическую панель навигации. Если я попытаюсь получить реальные данные, они отобразятся, но если я помещу их в динамическую панель навигации, они больше не будут отображаться.
Это то, что они должны показывать

К сожалению, вот что он показывает


Вот мой индекс. PHP-код

Код: Выделить всё

Responsive Sidebar Menu
[*]







Menu

[list]

[url=#]📊[/i]Graph[/url]


[url=#]" class="dropdown-item">[/url]

[/list]

[*][url=#][i]🏠[/i]Dashboard[/url]
[*][url=#][i]⚙️[/i]Option[/url]
[*][url=#][i]➕[/i]Add[/url]
[*][url=#][i]🔑[/i]Log Out[/url]

☰
🌙



Responsive Sidebar



Welcome! Select a year from the Graph menu to view the chart.




document.addEventListener('DOMContentLoaded', function () {
// Load default content (first year graph if available)
const defaultYear = ;
if (defaultYear) {
loadPage(`add_graph.php?year=${defaultYear}`);
}

// Handle sidebar and dropdown clicks
document.querySelectorAll('.nav-item, .dropdown-item').forEach(item => {
item.addEventListener('click', function (e) {
e.preventDefault();
const page = this.getAttribute('data-page');
loadPage(page);
});
});

// Function to load a page dynamically
function loadPage(page) {
fetch(page)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(html =>  {
document.getElementById('content-container').innerHTML = html;

// Reinitialize any page-specific scripts if required
if (typeof initializeGraph === 'function' && typeof graphData !== 'undefined') {
initializeGraph(graphData); // For add_graph.php
}
})
.catch(error => {
console.error('Failed to load page:', error);
document.getElementById('content-container').innerHTML = '
Error loading content.
';
});
}
});

а вот мой add_graph.php

Код: Выделить всё

Re-enlistment Status





Re-enlistment Status for CY 








Re-enlistment Data Table for CY 



Month
Total NR
Re-enlisted
Reprimand
Not Yet Re-enlisted














// Prepare data for the chart
const months = ;
const totalNR = ;
const reEnlisted = ;
const reprimand = ;
const notYetReEnlisted = ;

// Render the chart
const ctx = document.getElementById('reenlistmentChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: months,
datasets: [
{
label: 'Total NR for Re-enlistment',
data: totalNR,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Re-enlisted Personnel',
data: reEnlisted,
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: 'Re-enlisted with Reprimand',
data: reprimand,
backgroundColor: 'rgba(255, 206, 86, 0.6)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: 'Not Yet Re-enlisted',
data: notYetReEnlisted,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});

document.addEventListener("keydown", (event) => {
// Disable F12
if (event.key === "F12") {
event.preventDefault();
}

// Disable Ctrl+Shift+I or Ctrl+Shift+J
if (event.ctrlKey && event.shiftKey && (event.key === "I" || event.key === "J")) {
event.preventDefault();
}

// Disable Ctrl+U
if (event.ctrlKey && event.key === "U") {
event.preventDefault();
}
});
document.addEventListener("contextmenu", (event) =>  event.preventDefault());

а вот мой Graph.js

Код: Выделить всё

function initializeGraph(data) {
const ctx = document.getElementById('reenlistmentChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: data.months,
datasets: [
{
label: 'Total NR',
data: data.totalNr,
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
},
{
label: 'Re-enlisted Personnel',
data: data.reEnlistedPersonnel,
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
{
label: 'Reprimand',
data: data.reprimand,
backgroundColor: 'rgba(255, 206, 86, 0.5)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1,
},
{
label: 'Not Yet Re-enlisted',
data: data.notYetReEnlisted,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
},
],
},
options: {
responsive: true,
plugins: {
legend: { position: 'top' },
title: { display: true, text: `Re-enlistment Status for CY ${data.year}` },
},
scales: {
x: { title: { display: true, text: 'Month' } },
y: { title: { display: true, text: 'Number' }, beginAtZero: true },
},
},
});
}

Я пробовал другой подход, но он все тот же. Я уже исчерпал все, что знаю. Я пытался изменить местоположение файла и даже то, как он должен работать. График, похоже, тоже не работает. Возможно, у вас есть что-то, чем вы могли бы поделиться, потому что я не знаю, что еще можно попробовать, чтобы решить проблему. Кажется, чего-то не хватает или, возможно, не хватает подхода, чтобы это произошло. Кажется, что-то не так с вызовомchart.js, а может быть, что-то не так.

Подробнее здесь: https://stackoverflow.com/questions/792 ... mic-navbar