-1

Eu tenho uma tela que pode ter 1 ou mais gráficos, então eu estou usando Kendo Ui chart, contudo hoje essa tela está síncrono, contudo gostaria de mudar para Assíncrono para ficar mais rápido. Eu criou os Id dos gráficos em HTML, criando um id unico para cada gráfico e após eu faço um for em javascript onde eu chamo a webapi que gera o resultado dos gráficos. Se eu alterar para async true, ele problemas de concorrência pois o ID que é usando para calcular acaba mudando.Então precisaria que essa chamada fosse assíncrona para ficar mais rápido, pois eu posso ter 100 gráficos nessa tela.

    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"
                }
            });

        }
		
}

Exemplo de gráfico que uso: inserir a descrição do link aqui

1 Resposta 1

0

Acredito que o problema esteja no escopo da variável dataSourceestrategicobarra.

Tente fazer da seguinte forma:

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"
            }
        });

    }
}

Além de removê-la do ponto que você declarou inicialmente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .