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}] } ] });
Advertisement
Answer
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}] } ] }); });