it does not show chart but if you create it

[Daniel Mendez]

Hi I am tryning, display a pie chart by call ajax. The call ajax works, when I inspect page I see the div with many somethings, namely, It is not empty.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {'packages': ['corechart', 'bar', 'table'], 'language': 'es', callback: function(){
            $("#formDiarioango").submit(drawChart);
        }           
    });



 function drawChart(event) {
        event.preventDefault();
              
        // viene la petición ajax
        $.ajax({
             url: $(this).attr('action'),
             type: 'post',
             data: $(this).serialize(),
             dataType: "json",
             success: function(rta){
                                                  
                // material en el mes
                var data = google.visualization.arrayToDataTable([
                    ['Material', 'cantidad'],
                    ['Organico', rta.tipoMateriales["organico"]],
                    ['Reciclable', rta.tipoMateriales["reciclable"]],
                    ['No aprovechable', rta.tipoMateriales["noAprovechable"]]
                ]);

                var options = {
                    title: 'Tipo de materiales recolectados (Kg) en el mes'
                };
                var chart = new google.visualization.PieChart(document.getElementById('tipo_material_mes'));
                chart.draw(data, options); 
             }
        });
}

The div is empty  before of call with ajax, it has content later of the call, but does not show anything apart from the title of the graph and inspecting the code has something inside [as seen in the attached image].



Alguna idea, sugerencia para resolver mi problema estaré muy agradecido. Lo siento por mi inglés