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>