I have a screen that can have 1 or more graphics, so I'm using Kendo Ui chart, however today this screen is synchronous, however I'd like to switch to Asynchronous to get faster. I created the Graphics Id in HTML, creating a unique id for each graphic and after I do a for in javascript where I call the webapi which generates the graphics result. If I change to async true, it competing problems because the ID it is using to calculate ends up changing. So I would need this call to be asynchronous to get faster as I can have 100 graphics on that screen.
function createDataSourceGraficoBarra(idbarra) {
dataSourceestrategicobarra = new kendo.data.DataSource({
transport: {
read: {
async: false,
url: function () {
return "/api/IndicadorResultadobarra?id=" + idbarra
+ "&dataDe=" + dataDe + "&dataAte=" + dataAte;
},
dataType: "json"
}
}
});
dataSourceestrategicobarra.fetch(function () {
if (dataSourceestrategicobarra._data.length > 0) {
var arrayestrategicocoluna = new Array();
var arrayestrategicocolunameta = [];
for (var i = 0; i < dataSourceestrategicobarra._data.length; i++) {
arrayestrategicocoluna[i] = new Array(dataSourceestrategicobarra._data[i].realizado, dataSourceestrategicobarra._data[i].resultadoId);
arrayestrategicocolunameta.push(dataSourceestrategicobarra._data[i].meta);
}
alimentartabelaResultadoComplanoDeacao("Resultado", arrayestrategicocoluna, "tableestrategiacoluna" + idbarra, idbarra, true, null, null, null, null, null, 4);
alimentartabela("Meta", arrayestrategicocolunameta, "tableestrategiacoluna" + idbarra, idbarra);
}
});
}
for (i = 0; i < arrayestrategico.length; i++) {
if (document.getElementById("coluna" + arrayestrategico[i].id) !== null) {
var percentual = "";
if (arrayestrategico[i].unidademedida == "Percentual") {
percentual = "%";
}
createDataSourceGraficoBarra(arrayestrategico[i].id);
$("#coluna" + arrayestrategico[i].id).kendoChart({
title: {
position: "top",
text: arrayestrategico[i].descricao,
font: "44px Arial,Helvetica,sans-serif"
},
legend: {
position: "top"
},
chartArea: {
background: ""
},
dataSource: dataSourceestrategicobarra,
seriesColors: ["red", "blue"],
seriesDefaults: {
type: "column"
,labels: {
visible: true,
rotation: -90,
background: "transparent",
template: "#= name # #= value#",
font: "15px Segoe UI, Arial"
},
},
valueAxis: {
labels: {
format: "{0}"+percentual
},
line: {
visible: false
},
axisCrossingValue: 0
},
autoBind: true,
categoryAxis: {
field: "year",
majorGridLines: {
visible: false
}
},
series:
[{
field: "meta",
name: "Meta"
}, {
field: "realizado",
name: "Realizado"
}],
tooltip: {
visible: true,
color: "white",
font: "15px Segoe UI, Arial"
}
});
}
}Example graph that I use: insert the link description here