Firebase Angularfire and Angular-nvD3

Question

I used firebase as a backend data store. the front end is Angular. I try to draw chart by Angular-nvD3.js. when I try to read the data from firebase it is take time. So, the array come empty Array[]. Then the data come but no update to the chart.

Answer 1

You're running map() on the empty array, but not again after the data arrives. Add a $watch for your incoming data, so you can process it into x,y coordinates (firebase may have a better method for processing incoming data, I'm not familiar with it).

$scope.$watchCollection('newValues', function(newValues, oldValues){
  angular.forEach(newValues, function(value, index){
    if(!(x in value)){
      newValues[index] = {x: value[0], y: value[1]};
    }
  });
});

Also, don't use map at all in this case, it's actually replacing the firebase array in $scope.data with a new instance of a regular array.