1

Buenos días, Estoy intentando hacer un gráfico que muestre las horas y minutos totales de clases que da un profesor al mes. Tan solo he logrado que muestre en la linea las horas pero me gustaría que saliesen los minutos también. La consulta la hago en PHP y luego paso las variables a JS. Gracias:

<div class="panel-body">Taught hours chart
                        <div class="canvas-wrapper">
                            <canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>
                        </div>
                    </div>    
<script>
    var horas_mes1 = '<?php echo $horas2_mes1 ?>';
    var min_mes1 = '<?php echo $min2_mes1 ?>';
    var horas_mes2 = '<?php echo $horas2_mes2 ?>';
    var min_mes2 = '<?php echo $min2_mes2 ?>';
    var horas_mes3 = '<?php echo $horas2_mes3 ?>';
    var min_mes3 = '<?php echo $min2_mes3 ?>';
    var horas_mes4 = '<?php echo $horas2_mes4 ?>';
    var min_mes4 = '<?php echo $min2_mes4 ?>';
    var horas_mes5 = '<?php echo $horas2_mes5 ?>';
    var min_mes5 = '<?php echo $min2_mes5 ?>';
    var mes1letra = '<?php echo $mes1letra ?>';
    var mes2letra = '<?php echo $mes2letra ?>';
    var mes3letra = '<?php echo $mes3letra ?>';
    var mes4letra = '<?php echo $mes4letra ?>';
    var mes5letra = '<?php echo $mes5letra ?>';

    var lineChartData = {
        labels :[mes1letra,mes2letra,mes3letra,mes4letra,mes5letra],
        datasets : [
            {
                label: "My First dataset",
                fillColor : "rgba(48, 164, 255, 0.2)",
                strokeColor : "rgba(48, 164, 255, 1)",
                pointColor : "rgba(48, 164, 255, 1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(48, 164, 255, 1)",
                data : [horas_mes1,horas_mes2,horas_mes3,horas_mes4,horas_mes5]
            }
        ]
    }
    window.onload = function(){
    var chart1 = document.getElementById("line-chart").getContext("2d");
    window.myLine = new Chart(chart1).Line(lineChartData, {
        responsive: true,
        scaleLineColor: "rgba(255,255,255,.2)", 
        scaleGridLineColor: "rgba(255,255,255,.05)", 
        scaleFontColor: "#ffffff"
    });
    }
    </script>
6
  • 3
    Sería interesante que subieras un jsfiddle para ver cómo sale actualmente.
    – fedorqui
    Commented el 10 ene. 2017 a las 10:00
  • Podría poner una imagen...
    – Vieira
    Commented el 10 ene. 2017 a las 10:08
  • La idea es publicar un ejemplo mínimo verificable que ayude a entender el problema, no se vaya por las ramas y permita replicarlo localmente para poder ofrecer una solución.
    – fedorqui
    Commented el 10 ene. 2017 a las 10:11
  • 2
    No haria falta ni un jsfiddle, usando la opcion de fragmentos de codigo de JS/HTML/CSS en el editor de la pregunta es suficiente
    – lois6b
    Commented el 10 ene. 2017 a las 10:31
  • Gracias por contestar... he editado la pregunta poniendo el CANVAS... perdonad pero es que soy algo novato en estos temas y me sabe mal molestar pero cuando llego a un punto que me atasco pregunto... Saludos
    – Vieira
    Commented el 10 ene. 2017 a las 10:37

1 respuesta 1

2

Para empezar, creo sería mejor:

  • Anexar las horas con los minutos para tener un total de horas decimal, por ejemplo: 49.50 horas, donde la parte fraccionaria equivale a los minutos.
  • Obtener los datos por ajax, porque la Chart.js es una librería que necesita los datos disponibles en JavaScript.

En este punto supongo que se tiene en la base de datos los minutos extra de clases, ya que, tener la cantidad de horas y la misma cantidad en minutos (h * 60) no tendría ningún sentido.

Digamos que traes de la base de datos las horas y minutos de clase por cada mes:

$monthHours = array(
  "mes1" => 75,
  "mes2" => 80,
  "mes3" => 83
  "mes4" => 78
);

$monthMinutes = array(
  "mes1" => 25,
  "mes2" => 37,
  "mes3" => 18,
  "mes4" => 29
);

En el cliente, lo que podemos hacer es saber el porcentaje de 1h de cada minuto. Matemática básica: si 1h = 60m = 100% | Xm = %?.

const totalHours = [];
for (let key in monthHours) {
  const val = monthHours[key];
  const minute = monthMinutes[key] / 100;
  totalHours.push(val + minute);
}

En caso envíes las horas desde el backend en un array simple (no asociativo) como $monthHours = array(75, 80, 83, 78), entonces lo anterior se puede realizar usando Array#map.

const totalHours = hours.map(function (hour, i) {
  const minute = minutes[i] / 100;
  return hour += minute;
});

Tooltips personalizados en Chart.js

Chart.js nos permite personalizar los tooltips para mostrar información personalizada. Ésta funcionalidad es útil por ejemplo cuando trabajamos con monedas. Para personalizar los tooltips, basta con crear un objeto con la llave tooltips.callbacks.label. Ésta llave acepta una función que recibe dos parámetros: tooltip actual y objeto data (nuestros datasets).

const options = {
  tooltips: {
    callbacks: {
        label: function (tooltip, data) {
        const index = tooltip.index;
        let hours = data.datasets[0].data[index];
        let minutes = (hours % 1).toFixed(2);
        hours = parseInt(hours);
        minutes = minutes.substring(minutes.indexOf('.') + 1);
        return `${hours} horas y ${minutes} minutos`;
      }
    }
  }
};

En el código de arriba solo extraemos la hora del label sobre el cual se ha hecho hover. Posteriormente, extraemos los minutos de las horas y le damos el formato siguiente:

X horas y Y minutos

Una vez que ya tenemos todo, lo juntamos y obtenemos el resultado deseado.

Puedes ver código en funcionamiento a continuación (o también en éste fiddle):

document.addEventListener('DOMContentLoaded', function () {
	const ctx = document.getElementById('draw').getContext('2d');

  let monthHours = {
    mes1: 78,
    mes2: 80,
    mes3: 83,
    mes4: 78,
    mes5: 79
  };
  let monthMinutes = {
    mes1: 25,
    mes2: 37,
    mes3: 18,
    mes4: 29,
    mes5: 32
  };
  const totalHours = [];

  for (let key in monthHours) {
    const val = monthHours[key];
    const minute = monthMinutes[key];
    totalHours.push(val + (minute / 100));
  }
  const labels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'];
  const datasets = [
    {
      label: 'Horas de clases',
      backgroundColor: 'rgba(0, 150, 255, .13)',
      borderColor: 'rgba(0, 150, 255, .35)',
      pointColor: '#3498db',
      pointBorderColor: 'rgba(0, 150, 255, .55)',
      pointBackgroundColor: '#fff',
      data: totalHours
    }
  ];
  const options = {
    tooltips: {
      callbacks: {
        label: function (tooltip, data) {
          const index = tooltip.index;
          let hours = data.datasets[0].data[index];
          let minutes = (hours % 1).toFixed(2);
          hours = parseInt(hours);
          minutes = minutes.substring(minutes.indexOf('.') + 1);
          return `${hours} horas y ${minutes} minutos`;
        }
      }
    }
  };

  new Chart.Line(ctx, {
    data: { labels, datasets },
    options
  });
});
<!-- Chart.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<!-- HTML (canvas) -->
<section class="chart">
  <canvas id="draw" height="300" width="700"></canvas>
</section>

19
  • 1
    Perfectísimo @guzgarcia. Funciona a la perfección. Te agradezco mucho este esfuerzo!
    – Vieira
    Commented el 10 ene. 2017 a las 15:31
  • Una última pregunta.. a veces no me lo carga... debería ponerle window.onload = function(){ ????
    – Vieira
    Commented el 10 ene. 2017 a las 16:25
  • Claro, la gráfica debe ser cargado una vez el documento ha sido renderizado. En window#onload o document#DOMContentLoaded sirve.
    – gugadev
    Commented el 10 ene. 2017 a las 16:31
  • Gracias, y en el fiddle lo podrías poner? es que a mi me funcionaba así: window.onload = function(){ window.myLine = new Chart(chart1).Line(lineChartData, { responsive: true, scaleLineColor: "rgba(255,255,255,.2)", scaleGridLineColor: "rgba(255,255,255,.05)", scaleFontColor: "#ffffff" }); }
    – Vieira
    Commented el 10 ene. 2017 a las 16:34
  • Ya está, en lugar /4 al final de la URL del fiddle, ponle /5.
    – gugadev
    Commented el 10 ene. 2017 a las 16:53

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.