Variable in JavaScript with firebase

Question

I am creating a simple polling website using HTML & JavaScript (through Glitch) and also Firebase, I followed a tutorial to do it. I have it all working and the voting works fine and displays the results as intended. I now want to take the results and use them to display a chart on my HTML page. I understand how this works, just not how to get the voting results variable into the JS code for the chart. I am using charts.js and the code for this is towards the bottom. The y values should be a variable reading the total votes, but it isn't working. Any suggestions?

Thanks

var myStates = [];
var myTimes = [];

// Variables to hold the count for each state
var TrumpCount = 0;
var BidenCount = 0;

// Define database connection to correct child branch, MyTemperature
var myDBConn = firebase.database().ref("USvote");

// Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
myDBConn.on("child_added", function(data, prevChildKey) {
  TrumpCount = 0;
  BidenCount = 0;

  // The data returned from the branch is put into a variable, dataPoint
  var dataPoint = data.val();

  // Populate the lists with the various data from the database
  myStates.push(dataPoint.USvote);
  myTimes.push(dataPoint.Time);

  // add 1 to the appropriate counter
  for (i = 0; i < myStates.length; i++) {
    if (myStates[i] == "Trump") {
      TrumpCount = TrumpCount + 1;
    }
    if (myStates[i] == "Biden") {
      BidenCount = BidenCount + 1;
    }
  }

  // Update the page elements with the results of each count
  document.getElementById("TrumpCount").innerHTML = TrumpCount;
  document.getElementById("BidenCount").innerHTML = BidenCount;
});


// JS code for using charts
JSC.Chart("chartDiv", {
  type: "column",
  series: [
    {
      points: [{ x: "Biden", y: BidenCount}, { x: "Trump", y: TrumpCount}]
    }
  ]
});

Answer 1

Try placing the chart.js code only when firebase has loaded and performed its needed actions.

Try this:

var myStates = [];
var myTimes = [];

// Variables to hold the count for each state
var TrumpCount = 0;
var BidenCount = 0;

// Define database connection to correct child branch, MyTemperature
var myDBConn = firebase.database().ref("USvote");

// Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
myDBConn.on("child_added", function(data, prevChildKey) {
  TrumpCount = 0;
  BidenCount = 0;

  // The data returned from the branch is put into a variable, dataPoint
  var dataPoint = data.val();

  // Populate the lists with the various data from the database
  myStates.push(dataPoint.USvote);
  myTimes.push(dataPoint.Time);

  // add 1 to the appropriate counter
  for (i = 0; i < myStates.length; i++) {
    if (myStates[i] == "Trump") {
      TrumpCount = TrumpCount + 1;
    }
    if (myStates[i] == "Biden") {
      BidenCount = BidenCount + 1;
    }
  }

  // Update the page elements with the results of each count
  document.getElementById("TrumpCount").innerHTML = TrumpCount;
  document.getElementById("BidenCount").innerHTML = BidenCount;
  
  
// JS code for using charts
JSC.Chart("chartDiv", {
  type: "column",
  series: [
    {
      points: [{ x: "Biden", y: BidenCount}, { x: "Trump", y: TrumpCount}]
    }
  ]
});
});