2

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 '<'

2 respuestas 2

2

Deberías añadir previamente los datos en un string separado por comas, luego asignas esos datos al script:

<?php 
require_once("conexion.php");

$consulta = "SELECT * FROM provincia";
$ejecutar = mysqli_query(conectar(), $consulta);

$etiquetas = '[';
$datos = '[';
while($row = mysqli_fetch_array($ejecutar)) {
  if (!$empty($etiquetas)= {
    $etiquetas .= ',' . "'" . $row['NOMBRE'] . "'";
    $datos .= ',' . "'" . $row['DATO'] . "'";
  }
  else {
    $etiquetas .= ',' . "'" . $row['NOMBRE'] . "'";
    $datos .= ',' . "'" . $row['DATO'] . "'";
  }
}
$etiquetas .= ']';
$datos .= ']';

?>

<!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 $etiquetas ?>;

    const data = {
      labels: labels,
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: <?php echo $datos ?>,
      }]
    };

    const config = {
      type: 'bar',
      data: data,
      options: {}
    };

    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
  </script>
</body>

</html>

1
  • Si funcionó, muchas gracias! Commented el 17 mar. 2022 a las 11:49
0

la forma mas sencilla es que concatenes el javascript con php pero debes arreglar el script de php porque tal cual esta diseñado debes conocer que esta mal `

<?php 
        require_once('conexion.php');
        $Consulta = "SELECT * FROM provincia";
        $Ejecutar =mysqli_query(conectar(),$Consulta);            
          ?>
        
        <!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>       
        
    <?php
    while($row = mysqli_fetch_array($Ejecutar))
             {     
          ?>
            <script> const labels = [</script><?php echo "'".$row['NOMBRE']."',"; ?><script>];</script>
    }
`

Ejemplo de BD MAPS, PHP

$sentencia3->execute();
 $listaUbicacion = $sentencia3->fetchAll(PDO::FETCH_ASSOC);
 ?> 
      <?php if($listaUbicacion > 0){ ?>
      <?php foreach ($listaUbicacion as $ubicacion) { ?>    
  L.marker([<?php echo $ubicacion['Latc']; ?>, <?php echo $ubicacion['Lonc']; ?>]).bindPopup('<?php echo $ubicacion['Comercio']  ?> , <?php echo $ubicacion['Direccionc']; ?>').addTo(cities),
  L.marker([<?php echo $ubicacion['Lat']; ?>, <?php echo $ubicacion['Lon']; ?>]).bindPopup('<?php echo $ubicacion['Cliente'] ?>,Pedido : <?php echo $ubicacion['Pedido']  ?>,<?php echo $ubicacion['Direccion'] ?>').addTo(cities)<?php if(current($ubicacion) < count($listaUbicacion)){echo ",";}else{echo ";";}
  }  
  } ?>
6
  • Disculpa, no me compila Commented el 16 mar. 2022 a las 14:56
  • el ejemplo es de concatenado pero debes analizar las comas y puntos coma llaves etc. no deben estar mesclados los de php y los del script.
    – pperez
    Commented el 16 mar. 2022 a las 14:59
  • <script> const labels = [</script><?php echo "'".$row['NOMBRE']."';" ?><script>];</script> <?php } ?> <script> no puedo probartelo pero mas o menos arreglalo de esta forma
    – pperez
    Commented el 16 mar. 2022 a las 15:03
  • ok gracias por tu respuesta, no voy a mezclar ambos, pero necesito pasar los datos de la base de datos al grafico, ¿Como puedo hacerlo? desde ya muchas gracias Commented el 16 mar. 2022 a las 15:04
  • por cantidad de codigo te proporcinare un modulo en conde concatene maps, php y consultas
    – pperez
    Commented el 16 mar. 2022 a las 15:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.