Populating plotly graph with firebase database array

How can I populate the plotly Bar chart based on data from Firebase back end. If I put the graph code and array variables inside the for each array only one value is added to the graph but if I place the plotly graph code and array variable array and array2 outside the for each loop, then the value of the array is undefined outside the for each loop. How can I populate the x and y with values from the database //example array[John, Kevin, Mel] //example array2 [45,56,67]

var array= [];
var array2 = [];
firebase.database().ref("Scores").child('gameOneScores').on('value', function(snap){

   snap.forEach(function(childNodes){

    array.push(childNodes.val().finalScore);
    array2.push(childNodes.val().nameOfPlayer);

    var data = [{
    type: 'bar',
    x: [array],
    y: [array2],
    orientation: 'h'
  }];
  Plotly.newPlot('graphDiv', data);


      console.log(array);
      console.log(array2);

  });
  console.log("New array "+this.array);

The console log here is undefined as I can't access the array values inside the for each loop. I tried and tried but still no luck. Thanks for your time guys.