1

Preciso pegar a distância percorrida por um veiculo nos últimos 3 dias e exibir no gráfico. Para isso, faço um for e vou calculando a distancia percorrida e salvando em um array (arrayKmDayData):

 arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));

Depois de preencher esse array com a distancia dos 3 dias, os exibo no gráfico:

      $scope.labels = arrayKmDayLabel,
      $scope.data = [
        arrayKmDayData
      ];

O problema é que antes mesmo de terminar o for, meu script já está chamando a parte de exibir o gráfico, ou seja, ele executa o for pela primeira vez e já exibe o gráfico, depois executa o for pela segunda vez e reexibe o gráfico e por ultimo, executa o for pela 3ª vez e exibe o gráfico novamente.

Como fazer para exibir o gráfico somente após terminar o for?

Segue o código:

for(var i = -2; i <= 0; i ++){
    day = getKmDate(i);
    date = new Date(day[0]);
    arrayKmDayLabel.push(date.toLocaleDateString("pt-BR"));

    var query = new $kinvey.Query();   
    query.equalTo('idColetor', arraySelectedItem[0]);   
    query.greaterThanOrEqualTo('tsmilliseconds', day[0]);  
    query.lessThan('tsmilliseconds', day[1]);  
    query.descending('tsmilliseconds');            
    var promise = $kinvey.DataStore.find('myCollection', query); 
    promise.then(function(response) {  
      arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));

    });

  }

      $scope.labels = arrayKmDayLabel,
      $scope.data = [
        arrayKmDayData
      ];

Agradeço qualquer ajuda.

4
  • Qual a parte do seu código que exibe o gráfico? 6/12/2015 às 20:45
  • @SamirBraga no HTML tem: <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas> e no javascript $scope.labels = arrayKmDayLabel, $scope.data = [ arrayKmDayData ];
    – S_A
    6/12/2015 às 22:14
  • @SamirBraga estou usando o chart.js
    – S_A
    6/12/2015 às 22:20
  • Você poderia colocar o $scope.labels = arrayKmDayLabel, $scope.data = [ arrayKmDayData ]; para ser executado em um if (i == 0) dentro do for, já que este é o fim do loop. O que você acha? 6/12/2015 às 22:28

1 Resposta 1

0

O problema é que você está alimentando o gráfico antes dos dados serem recuperados. O correto seria alimentar os dados no gráfico apenas quando os promises fossem resolvidos. Caso você esteja usando uma biblioteca de promises, você pode fazer da seguinte maneira:

var proms = [];
for(var i = -2; i <= 0; i ++){
    day = getKmDate(i);
    date = new Date(day[0]);
    arrayKmDayLabel.push(date.toLocaleDateString("pt-BR"));

    var query = new $kinvey.Query();   
    query.equalTo('idColetor', arraySelectedItem[0]);   
    query.greaterThanOrEqualTo('tsmilliseconds', day[0]);  
    query.lessThan('tsmilliseconds', day[1]);  
    query.descending('tsmilliseconds');            
    var promise = $kinvey.DataStore.find('myCollection', query); 
    promise.then(function(response) {  
       arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));
    });

    proms.push(promise);
}

Promise.all(proms)
.then(function() {
  // valores são lançados apenas quando todos os promises são resolvidos
  $scope.labels = arrayKmDayLabel,
  $scope.data = [
    arrayKmDayData
  ];
});

caso você não esteja usando uma biblioteca de promises, então o melhor é usar um contador.

var counter = 0;
for(var i = -2; i <= 0; i ++){
    day = getKmDate(i);
    date = new Date(day[0]);
    arrayKmDayLabel.push(date.toLocaleDateString("pt-BR"));

    var query = new $kinvey.Query();   
    query.equalTo('idColetor', arraySelectedItem[0]);   
    query.greaterThanOrEqualTo('tsmilliseconds', day[0]);  
    query.lessThan('tsmilliseconds', day[1]);  
    query.descending('tsmilliseconds');            
    var promise = $kinvey.DataStore.find('myCollection', query); 
    promise.then(function(response) {  
        arrayKmDayData.push(Math.abs((response[response.length - 1].distanceTraveled - response[0].distanceTraveled)/1000));
        counter++;
        if (counter===3) {
           $scope.labels = arrayKmDayLabel,
           $scope.data = [
             arrayKmDayData
           ];
        }
    });

  }

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 .