Null data in Chart.js with JSON

I hope someone can find a solution to my mistake. I'm trying to fill out my chart with data taken from the database, but my chart is undefined I have done tests, and if it brings me the data correctly from the BD, but when passing it with PUSH they become null. I do not know what could be failing

I leave the JS code because it is only where I believe the error is displayed. JS code

baseurl = "http://localhost/proyecto/";
$(document).ready(function(){
$("#btnGraficar").click(function(){
prog = $('#nomb_prog').val();
$.ajax({
    type: "POST",
    url : baseurl + "ayuntamiento/graficaEstadistica",   
    data:{nomb_prog:prog},
    datatype:"json",
    success: function(respuesta){
        var proyecto = [];
        var cantidad = [];
      //alert(respuesta);
        for(var i in respuesta) {
            proyecto.push(respuesta[i].nomb_proy);
            cantidad.push(respuesta[i].CANTIDAD);
        }
        /*$.each(respuesta,function(value){
            proy = value.nomb_proy;
            proyecto.push(proy);
            cant = value.CANTIDAD;
            cantidad.push(cant);
        });*/

        grafica(proyecto,cantidad);
        //alert(proyecto);
    },
    error: function(respuesta){
        alert("Error");
    }


})

 });
 });
//ChartJS

function grafica(proyecto,cantidad){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: proyecto,
    datasets: [{
        label: 'Cantidad De Proyectos',
        data: cantidad,
        backgroundColor: [
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
 }
});
}