Morris js time as Y value always zero

I am trying to show a Time per id on my graph . I get the values from my mysql Db but it always shows value "0" on my graph

    <!DOCTYPE html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">Morris.js chart with PHP & Mysql</h2>
   <h3 align="center">wachttijd</h3>   
   <br /><br />
   <div id="chart"></div>
  </div>
 </body>
</html>

<script>
Morris.Line({
 element : 'chart',
 data :[{ id:'3', wachttijd :'00:01:04'}, { id:'4', wachttijd :'00:00:53'}, { id:'5', wachttijd :'00:01:09'}, { id:'6', wachttijd :'00:00:53'}, { id:'7', wachttijd :'00:01:09'}, { id:'8', wachttijd :'00:00:12'}],
 xkey :'id',
 parseTime: false ,
 ykeys :['wachttijd'/*,'totaaltijd'*/],
 labels :['wachttijd'/*,'totaaltijd'*/],
 hideHover :'auto',
 stacked :true
});
</script>

this is code i get when i look trough sources on the browser so i can see that i am getting values from my database

data :[{ id:'3', wachttijd :'00:01:04'}, ..... like here

graph i get

i want it to show me the values like 00:01:04 is it possible ?

Solution

don't think you can use strings for the y values

you could convert to number of seconds,
see following working snippet...

window.addEventListener('load', function () { 
  var yLabels = [];
  var rawData = [{ id:'3', wachttijd :'00:01:04'}, { id:'4', wachttijd :'00:00:53'}, { id:'5', wachttijd :'00:01:09'}, { id:'6', wachttijd :'00:00:53'}, { id:'7', wachttijd :'00:01:09'}, { id:'8', wachttijd :'00:00:12'}];
  var data = rawData.map(function (row) {
    yLabels.push('');
    return {
      id: row.id,
      yValue: ((new Date('01/01/2018 ' + row.wachttijd).getTime()) - (new Date('01/01/2018 00:00:00').getTime())) / 1000
    };
  });

  Morris.Line({
   element : 'chart',
   data :data,
   xkey :'id',
   parseTime: false ,
   ykeys :['yValue'],
   yLabelFormat: function (y) {
    var date = new Date(new Date('01/01/2018').getTime() + (y * 1000));
    var hour = '00' + date.getHours().toString();
    hour = hour.substr(hour.length - 2);
    var min = '00' + date.getMinutes().toString();
    min = min.substr(min.length - 2);
    var second = '00' + date.getSeconds().toString();
    second = second.substr(second.length - 2);
    return hour + ':' + min + ':' + second;
  },
   labels :yLabels,
   hideHover :'auto',
   stacked :true
  });
})

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">Morris.js chart with PHP & Mysql</h2>
   <h3 align="center">wachttijd</h3>   
   <br /><br />
   <div id="chart"></div>
  </div>
 </body>
</html>