Timeline on Y axis, with chart.js

Question

I am having trouble locating a time scale on the Y axis of my graph.

The objective of this graph is to compare, between different machine operators, the time (minutes and seconds) that were necessary to manufacture the same piece.

When wanting to graph only an empty graph is observed, showing me only the names of the operators on the X axis.

Using a sql query that I do in my controller I get this information:

{
"pieces": [
{
"id": 2,
"name": "Miguel",
"time": "00:02:00",
"denomination": "Eje 340 d19",
"quantity": 60,
"rol": 2
},
{
"id": 4,
"name": "Luis",
"time": "00:04:00",
"denomination": "Eje 340 d19",
"quantity": 30,
"rol": 2
}
]
}

As you can see in the query for the same part manufactured by different operators, there is a different machining time, just that is what I want to dump on my graph and I do not know how to spend the minutes ("time": "00:02:00","time": "00:04:00",) on the Y axis

In this getChartDataPiece () function I use ajax to receive my array pieces. I am also stating time as an array and just there my machining times are stored, this is how I run it:

function getChartDataPiece(name) {   
    $.ajax({
        url: '/admin/dashboard/getChartPiece/' + name,  
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        dataType: 'json',
        success: function (response) {             
            console.log(response);
            var time = [];           
            var operator = [];                    

            for (var i in response.pieces) {
                time.push(response.pieces[i].time);              
                operator.push(response.pieces[i].name);                                
            }       
            renderChartPiece(operator, time);           
        },       
        error: function (response) {       
            console.log(response.time);
            console.log(response.operator);
        }
    });
}

I'm not sure if those machining times (minutes and seconds) are recognizable by chart.js

This is how I'm trying to graph with function renderChartPiece(operator, time):

function renderChartPiece(operator, time) {
    var ctx1 = document.getElementById("times").getContext('2d');
    var myChart1 = new Chart(ctx1, {  
        type: 'bar',    
        data: {                       
            labels: operator,
            datasets: [{
                label: 'Partida',
                data: time,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                yAxisID: 'Tiempos',
                xAxisID: 'Operarios',
            }],
        },
        options: {
            scales: {
                yAxes: [{
                    id: "Tiempos",
                    ticks: {
                        beginAtZero: true                       
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Tiempos'
                    }
                }],
                xAxes: [{
                    id: "Operarios",                   
                    scaleLabel: {
                        display: true,
                        labelString: 'Operarios'
                    }
                }],
            },
            title: {
                display: true,
                text: "Ordenes de trabajo"
            },
            legend: {
                display: true,
                position: 'bottom',
                labels: {
                  fontColor: "#17202A",                
                }
            },
        }        
    });  
}

Please I NEED your help

tata.leona · Accepted Answer · 2020-04-18T19:02:58.290

I'd use values in seconds for Y-axis.

function timeToSeconds(time) {
  var parts = time.split(":");
  var valueInSeconds = 0;
  var secondsInTimeUnit = [3600, 60, 1];
  for (j = 0; j < parts.length; j++) {
    valueInSeconds = valueInSeconds + secondsInTimeUnit[j] * parseInt(parts[j]);
  }
  return valueInSeconds;
}

than in your code:

function getChartDataPiece(name) { 
//.....
            var time = [];           
            var operator = [];                    

            for (i = 0; i <  response.pieces.length; i++) {
                time.push(timeToSeconds(response.pieces[i].time));              
                operator.push(response.pieces[i].name);                                
            }

Demo

However the Y axis values are in seconds.

Here and here some tips how to change it. Don't forget to upvote these two;)

Here is what you need to change:

function renderChartPiece(operator, time) {
//...
        options: {
            scales: {
                yAxes: [{
//...
                   ticks: {
                     beginAtZero:true,
                     stepSize: 30, //step every 30 seconds
                     callback: function(label, index, labels) {
                       if (parseInt(label) % 30 == 0) {
                         //convert seconds to mm:ss format
                         var mins = parseInt(parseInt(label)/60);
                         var seconds = parseInt(label) - mins*60;
                         return mins+":"+(seconds < 10 ? "0" : "") +seconds;
                       } else {
                         return "";
                       }
                     }
                   },

And here is final solution

EDIT 2020/04/18:

Tooltip values in previous solution had values is seconds.

You can find more here

  //...
  options: {

        //add this for tooltips
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';
                    if (label) {
                        label += ': ';
                    }
                  var mins = parseInt(parseInt(tooltipItem.yLabel)/60);
                  var seconds = parseInt(tooltipItem.yLabel) - mins*60;
                  mins =  mins+":"+(seconds < 10 ? "0" : "") +seconds;                  
                  return label + mins;
                }
            }
        },
        scales: {
        //....

Corrected version here

Great, I'm just seeing your answer, at this moment I can't try the solution. I can hardly verify your answer, I give you my vote, thank you — Rodrigo Ruiz, Apr 17 '20 at 22:40
Thanks for your answer, you have given me a quick solution. Could you check your final snippet? I run the snippet, and look over label something like this: ```Miguel tiempo: 120 ``` ```Luis tiempo: 240 ``` So how could this appear to me: ```Miguel tiempo: 2:00 ``` ```Luis tiempo: 4:00 ``` — Rodrigo Ruiz, Apr 18 '20 at 13:22
Again thank you very much for your answer, difficult for me to solve alone!! — Rodrigo Ruiz, Apr 19 '20 at 01:36

Timeline on Y axis, with chart.js

1 Answers1