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>