I am trying to loop on this request AJAX . In the first event success , I make a second AJAX call that will return - in this case - 3 JSON objects.
My question is how to create, in the second event success , 3 dataPoints that will generate and popular 3 graphics made on canvas?
jQuery code:
$.ajax({
type: 'get',
url: 'dadosPS.php?ps=getGerencialPergunta&pesquisa='+slct_ps+'&datainicio='+dtin+'&datafim='+dtf,
dataType: 'json',
async: true,
beforeSend: function () {
},
success: function (data, textStatus, jqXHR) {
var dataPoints = [];
var dataPoints2 = [];
var tt = 0;
var count = $.map(data.data, function(n, i) { return i; }).length;//conta qtd de perguntas
$.each(data.data, function (key, val) {
id = val.id;
dataPoints.push({y:parseInt(val.qtd),label:val.pergunta});
if(val.nr_pergunta == '1'){
tt = val.qtd++;
}
$.ajax({
type: 'get',
url: 'dadosPS.php?ps=getGerencialResposta&id='+id+'&pesquisa='+slct_ps+'&datainicio='+dtin+'&datafim='+dtf,
dataType: 'json',
async: false,
beforeSend: function () {
},
success: function (data, textStatus, jqXHR) {
console.log(data);
},
complete: function () {
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
});
//grafico das perguntas
var chart = new CanvasJS.Chart("teste0", {
//colorSet: "customColorSet1",
title: {
text: tt,
//horizontalAlign: "left"
verticalAlign: "center",
dockInsidePlotArea: true
},
animationEnabled: true,
exportEnabled: true,
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [{
type: "doughnut",
indexLabel: "{label} {y}",
//startAngle: 240,
//showInLegend: true,
//legendText: "{label}",
dataPoints: dataPoints
}]
});
chart.render();
},
complete: function () {
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
Return of second success
