Problem in AJAX query in a loop

Navigation
0

I have a view that has several pie charts, using the D3 plugin. Each chart should display different data.

With PHP I make a foreach on the screen, creating the div where the graph will be displayed, each with a specific id . Then with Javascript I get all these id , and from that, in each of the div I make a request AJAX in a query, and the results I bring, I set each graph.

The problem is that because AJAX is an asynchronous query, the order of graph display changes constantly, which should not happen.

How can I resolve this? 

$(document).ready(function () {
		
    $(".panel-pergunta").each(function () {

        var id = $(this).attr('pergunta');
        
        $.ajax({
            method: "GET",
            url: "/relatorios/chart/" + id,
            dataType: "json",
            success: function (r) {
                //console.log(r);
                pieChartData = [];
                total = 0;

                for (var i in r.pesquisas) {
                
                    pieChartData.push({
                        "label": r.pesquisas[i].resposta,
                        "value": r.pesquisas[i].total
                    });
                    total += r.pesquisas[i].total;
                }

                if (total > 0) {
                    nv.addGraph(function () {
                        var chart = nv.models.pieChart()
                                .x(function (d) {
                                    return d.label;
                                })
                                .y(function (d) {
                                    return d.value;
                                })
                                .valueFormat(d3.format(".0f"))
                                .showLabels(true)
                                .showLegend(true)
                                .legendPosition("right")
                                .labelThreshold(0.05)
                                .labelsOutside(true)
                                .labelType("percent")
                                .donut(false)
                                .color(['#EF5350', '#FFA726', '#4DB446'])
                                .donutRatio(0.35);

                        d3.select("#chartp" + id + " svg")
                                .datum(pieChartData)
                                .transition()
                                .duration(350)
                                .call(chart);

                        d3.selectAll('.nv-label text')
                                .each(function (d, i) {
                                    d3.select(this).style('font-weight', 700)
                                })

                        var positionX = 0;
                        var positionY = 0;
                        var verticalOffset = 20;

                        d3.selectAll('#chartp' + id + ' .nv-legend .nv-series')[0].forEach(function (d) {
                            positionY += verticalOffset;
                            d3.select(d).attr('transform', 'translate(' + positionX + ',' + positionY + ')');
                        });

                        return chart;
                    });
                } else {
                    $("#chartp" + id).html("<i class='fa fa-exclamation-triangle'></i> Não há dados suficientes para montar esse gráfico.");
                }
            },
            error: function (r) {
                console.log(r.responseText);
            }
        });
    });
});
    
asked by anonymous 12.09.2017 / 16:10

1 answer

0

I believe that working with promisses solves your problem: 

var deferred = new $.Deferred();
var pipe = deferred;
$(".panel-pergunta").each(function () {
  pipe = pipe.then(function () {
    ...seu código...
  });
});
deferred.resolve();
    
12.09.2017 / 16:59
How to determine a fixed size for fancybox image gallery? Angular + Angular Material even without error does not look like anything