1

Actualmente estoy desarrollando un gráfico para un ERP, en el cual se muestran a los largo de los días la hora a la que han entrado los empleados. aparentemente me esta fallando el formato de la hora y muestra el gráfico en blanco, en la base de datos la hora se guarda en formato texto ("08:15") y no consigo que google charts entienda el formato. Aquí os dejo el código:


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<div class="col-lg-12">
 <canvas id="myChart" height="400"></canvas>
  <script>
   <?php
    $sqlx=mysqli_query($con,"SELECT * FROM g_tareas where Usuario='empleadoX'");
    $sqly=mysqli_query($con,"SELECT * FROM g_tareas where Usuario='empleadoX'");
   ?>
   var ctx=document.getElementById("myChart").getContext("2d");
   var myChart=new Chart(ctx,{
    type:"line",
    data:{
     labels:[
      <?php 
       while($row=mysqli_fetch_array($sqlx)){
        $dia= date("Y-m-d",strtotime( $row["Dia"]));
        echo "'".$dia."', "; /*Imprimo los dias en los que ha trabado (la línea de tiempo inferior)*/
       }
      ?>
     ],
     datasets:[{
      label:'Historico horas entrada y salida',
      data:[
       <?php 
        while($row2=mysqli_fetch_array($sqly)){
         $comienzo= explode(":",$row2["Comienzo"]);
         $hora=$comienzo[0];
         $minuto=$comienzo[1];
         $entrada = date("H:i",strtotime("$hora:$minuto"));/*doy formato de hora a las horas de inicio de jornada*/
         echo "'".$entrada ."',";/*si las imprimo como texto deja el grafico en blanco*/
         echo $entrada.",";/*y si las imprimo como hora no aparece el grafico*/
        }
       ?>
      ],
     }]
    }
   });
  </script>
</div>

Actualización: He modificado el código en base a la primera respuesta que he recibido con un enlace a una respuesta anterior creo que estoy cerca pero sigue sin funcionar:

<canvas id="myChart" height="400"></canvas>
<script>
    <?php
        $sqlx=mysqli_query($con,"SELECT * FROM g_tareas where Usuario='empleadoX'");
    ?>
    var ctx=document.getElementById("myChart").getContext("2d");
    var result = [
        <?php
            while($row=mysqli_fetch_array($sqlx)){
                $dia= date("Y-m-d",strtotime( $row["Dia"]));
                $entrada = date("H:i",strtotime($row2["Comienzo"]));
                echo "{ x:'".$dia."', y:".$entrada."},";
            }
        ?>
    ];
    var labels = result.map(e => moment(e.x, 'H:i'));
    var data = result.map(e => +e.y);
    var myChart=new Chart(ctx,{
        type:"line",
        data:{
            labels:labels,
            datasets:[{
                label:'Historico horas entrada y salida',
                data:data,
                bordeWidth:1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'time',
                    time: {
                        unit: 'hour',
                        displayFormats: {
                            hour: 'H:i'
                        }
                    }
                }]
            },
        }
    });
</script>

1 respuesta 1

0

Necesitas indicar que el eje y es una medida de tiempo, esto se hace cambiando las escalas con options, para ello añade después de data

,
   options: {
      scales: {
         yAxes: [{
            type: 'time',
            time: {
               unit: 'hour',
               displayFormats: {
                  hour: 'HH:mm'
               }
            }
         }]
      },
   }

Adaptado de aquí.

Por otro lado, esta parte del código

$comienzo= explode(":",$row2["Comienzo"]);
 $hora=$comienzo[0];
 $minuto=$comienzo[1];
 $entrada = date("H:i",strtotime("$hora:$minuto"));

se puede reducir a

$entrada = date("H:i",strtotime($row2["Comienzo"]));
1
  • gracias por la respuesta pero sigue sin funcionar el 12 may. 2020 a las 6:31

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.