Kendo ui Chart with multiple graphics - Assincrono

Question

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 would like to switch to Asynchronous to get faster. I created the Id of the HTML graphics, creating a unique id for each chart and after I do a for in javascript where I call the webapi that generates the result of the graphics. If I change it to async true, it’s concurrency issues because the ID that I’m using to calculate will change.Then I’d need this call to be asynchronous to get faster, because I can have 100 charts 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 of chart I use: insert link description here

Answer 1

I believe the problem lies in the scope of the variable dataSourceestrategicobarra.

Try to do it this way:

function createDataSourceGraficoBarra(idbarra) {

    var dataSourceestrategicobarra = new kendo.data.DataSource({
        transport: {
            read: {
                async: true,
                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);

        }
    });

    return dataSourceestrategicobarra;

}

for (i = 0; i < arrayestrategico.length; i++) {

    var dataSourceestrategicobarra;

    if (document.getElementById("coluna" + arrayestrategico[i].id) !== null) {

        var percentual = "";
        if (arrayestrategico[i].unidademedida == "Percentual") {
            percentual = "%";
        }
        dataSourceestrategicobarra = 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"
            }
        });

    }
}

In addition to removing it from the point you initially stated.