utilizando la librería Chart.js, intento realizar un grafico trayendo los datos de una base de datos por medio de una consulta sql en php, trate de empezar con algo simple, en la base de datos tengo una tabla 'provincia' con dos columnas 'ID_PROVINCIA' y 'NOMBRE' por medio de una consulta sql obtengo los nombres de las provincias, pero al intentar volcarlos sobre el eje 'X' del grafico, el mismo no interpreta los datos recibidos y por ende no puedo realizar el grafico, mi pregunta es ¿Hay alguna forma de que los datos obtenidos sean interpretados por el grafico utilizando php?
El código es el siguiente:
<?php
require_once("conexion.php");
$Consulta = "SELECT * FROM provincia";
$Ejecutar =mysqli_query(conectar(),$Consulta);
while($row = mysqli_fetch_array($Ejecutar))
{
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grafico</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
const labels = [<?php echo "'".$row['NOMBRE']."',"; } ?>];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'bar',
data: data,
options: {}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
</html>
En consola aparece el siguiente error: grafico.php:370 Uncaught SyntaxError: Unexpected token '<'