title: How do I make a simple d3 chart with Firebase data?
body: <p>I'm trying to query how many entries a specific song has been recorded in firebase. In other words, I'm trying to get the total play count of the songs and plot them on a graph. </p>
  
  <p>I'm tried to get the length of the firebase array but I know I have to use $loaded.then(function()). How would I use it here? My controller:</p>
  
  <pre><code>(function () {
  function MetricsCtrl($scope,$firebaseArray, Metric) {
      var firebaseRef = new Firebase("https://bloc-jams.firebaseio.com/");
  
      $scope.options = {...};
  
      var blue = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Blue"))
      var green = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Green"))
      var red = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Red"))
      var pink = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Pink"))
      var magenta = $firebaseArray(firebaseRef.child('Songs').orderByChild('name').equalTo("Magenta"))
  
      $scope.data = [
          {
              values: [
                  {
                      "label" : "Blue" ,
                      "value" :  blue.length
                  } ,
                  {
                      "label" : "Green" ,
                      "value" : green.length
                  } ,
                  {
                      "label" : "Red" ,
                      "value" : red.length
                  } ,
                  {
                      "label" : "Pink" ,
                      "value" : pink.length
                  } ,
                  {
                      "label" : "Magenta" ,
                      "value" : magenta.length
                  }
              ]
          }
      ]
  }
  
  angular
      .module('blocJams')
      .controller('MetricsCtrl', ['$scope','$firebaseArray','Metric', MetricsCtrl]);
  })();
  </code></pre>