-2

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Grafox
  • 13
  • 2
  • the link is: http://plnkr.co/edit/K3DZu7g3gC2PLxbox96p?p=preview – Grafox Aug 31 '15 at 20:42
  • 1
    Welcome to StackOverflow. Please update your question to include the relevant parts of your code. – StephenKing Aug 31 '15 at 20:42
  • possible duplicate of [Asynchronous access to an array in Firebase](http://stackoverflow.com/questions/27049342/asynchronous-access-to-an-array-in-firebase) – Kato Sep 01 '15 at 18:08
  • See also: https://www.firebase.com/docs/web/libraries/angular/guide/intro-to-angularfire.html#section-async-intro – Kato Sep 01 '15 at 18:08
  • Another reminder to add your code to this question - would you tidy it up please? It may be useful for future readers. – halfer Sep 20 '15 at 21:49

1 Answers1

2

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.

HankScorpio
  • 3,612
  • 15
  • 27
  • Thanks ... yes ... The map() is the problem. I just change the chart type from linePlusBarWithFocusChart to historicalBarChart which is don't have map() function. – Grafox Sep 01 '15 at 12:42