Как включить второй файл PHP в мою панель управления ChartJS [закрыто] ⇐ Php

[Anonymous]

Извините. Я здесь новичок.
Я использую бесплатную панель управления и вставляю таблицы MySQL в файлы PHP. У меня есть две карточки с одинаковыми стилями, и я хочу включить две разные диаграммы из двух разных файлов php. Но когда я добавляю второй (ASGchart), он не отображается. Если я удалю первый (MSGchart), второй появится в нужном месте. Два PHP-файла диаграмм идентичны, за исключением идентификаторов холста и SQL-запросов.
Это часть кода в моем файле index.php:
enter code here

























И мой MSGchart.php. Моя ASGchart похожа, просто другой запрос.
enter code here








// Calculate the percentage of total sales compared to the goal
var dataValue = ;
var goal = 450000; // $450,000 goal
var remaining = goal - dataValue;
if (remaining < 0) {
remaining = 0; // Calculate percentage based on the adjusted goal
}
var percentage = (dataValue / goal) * 100;
if (percentage > 100) {
percentage = 100; // Calculate percentage based on the adjusted goal
}

var remainingSales = "Remaining: " + remaining.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
var issuedSales = "Sales: " + dataValue.toLocaleString('en-US', { style: 'currency', currency: 'USD' });

// Calculate the percentage of the month that is left
var today = new Date();
var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
var remainingDays = lastDayOfMonth - today.getDate();
var remainingPercentage = (remainingDays / lastDayOfMonth) * 100;

// Determine background color for Progress segment
var progressBackgroundColor = 'rgba(255, 206, 86, 1)'; // Default yellow color
if (percentage < 100) {
progressBackgroundColor = 'rgba(196, 2, 28, 1)'; // Red color if is not met
} else if (percentage >= 100) {
progressBackgroundColor = 'rgba(12, 130, 77, 1)'; // Green color if goal met
}

const data = {
labels: [issuedSales, remainingSales],
datasets: [{
label: 'Percentage',
data: [percentage, 100 - percentage],
backgroundColor: [
progressBackgroundColor, // Background color for Progress
'rgba(255, 206, 86, .3)' // Lighter color for Remaining progress
],
borderColor: [
'rgba(255, 206, 86, .5)',
'rgba(255, 206, 86, .5)'
],
borderWidth: 0,
circumference: 180,
rotation: 270,
weight: 8

}]
};

const doughnutPointer = {
id: 'doughnutPointer',
afterDatasetsDraw(chart, args, plugins) {
const {ctx, data} = chart;
ctx.save();

const xCenter = chart.getDatasetMeta(0).data[0].x;
const yCenter = chart.getDatasetMeta(0).data[0].y;
innerRadius = chart.getDatasetMeta(0).data[0].innerRadius;
outerRadius = chart.getDatasetMeta(0).data[0].outerRadius;
const doughnutThickness = outerRadius - innerRadius;

const pointerColor = plugins.pointerColor || 'black';
const pointerValue = plugins.pointerValue || 1;
const pointerRadius = plugins.pointRadius || 0;
const angle = Math.PI / 180;

//total value
function sumArray(arr) {
return arr.reduce((acc, current) => acc + current, 0);
}

const dataPointArray = data.datasets[0].data.map((datapoint) => {
return datapoint;
})

const totalSum = sumArray(dataPointArray);
const targetPointerRotation = pointerValue / totalSum * 360;
console.log(targetPointerRotation);
console.log(totalSum);

//text
ctx.font = '10px sans-serif';
ctx.fillStyle = 'pointerColor';
ctx.textAlign = 'center';
baseline: 'middle';
ctx.fillText(remainingDays + ' Days Remaining', xCenter, yCenter)

//pointer
ctx.translate(xCenter, yCenter);
ctx.rotate(angle * targetPointerRotation);
ctx.beginPath();
ctx.fillStyle = pointerColor;
ctx.roundRect(0 - 2.5, -outerRadius - 5, 5, doughnutThickness + 10, 50);
ctx.fill();

ctx.restore();
}
}

//config
const config = {
type: 'doughnut',
data,
options: {
plugins: {
tooltip: {
callbacks: {
label: (context) => {
const parsedValue = parseFloat(context.parsed).toFixed(2);
return `${parsedValue}%`;

}
}
},
doughnutPointer: {
pointerValue: remainingPercentage,
pointerColor: 'black'

},
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true,
}

},
plugins: [doughnutPointer]

};

//render init block
const myMSGChart = new Chart(
document.getElementById('myMSGChart'),
config
);

//Instantly assign Chart.js version
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;





Подробнее здесь: https://stackoverflow.com/questions/783 ... -dashboard