I get data from my Firebase database every ten seconds. I want to plot a graph with highcharts.js, but when I access the web page, I get all the data prior to the moment the page is loaded. At this point, my web page freezes and crashes after a few minutes while the data is being recovered. (I also have a second piece of code that retrieves the new data each time it is added to the database but the web page crashes before).

I think it's my plotvalue function that is crashing the page. When I suppress plotValue(...) I can read my data in a few seconds even if there's 15k+. Indeed, it may be because i'm redrawing the chart each time I receive a data instead of waiting to retrieve it all.

I would like to know how to draw the chart once all of my data is retrieved from my database.

I thank you in advance for your answers.

Here is the code:

setInterval(test, 10000);
function test() {
 if (it === 0) {
  console.log("it=", it);
  dbRef.orderByKey().once('value', snapshot => { //"value" to have all existing data
    var jsonData = snapshot.toJSON();
    //console.log(jsonData); // Test purpose
    var coco = Object.values(jsonData); //Extract the numerical values of the object
    // Save values on variables
    //console.log(Défaut_communication_automate); //Test purpose
    coco.forEach(elt => { //Choose in coco for each element 
            var Puissance_batterie = elt.Puissance_batterie; //Choose all the values 
           of the element named "Puissance_batterie"
            var Puissance_AC_Onduleurs = elt.Puissance_AC_Onduleurs;
            var Tension_réseau = elt.Tension_réseau;
            var timestamp = elt.timestamp;
            //console.log(Puissance_batterie);
            plotValues(chartALM, timestamp, Puissance_batterie, 0);
            plotValues(chartALM, timestamp, Puissance_AC_Onduleurs, 1);
            plotValues(chartALM, timestamp, Tension_réseau, 2);
        })
        ++it;
    console.log("it=", it);
})
}
//function to plot values on charts
function plotValues(chart, timestamp, value, series) {
  var x = epochToJsDate(timestamp).getTime();
  var y = Number(value);
  chart.series[series].addPoint([x, y], false, false);
  chart.redraw();
}

 // Create the charts when the web page loads
 window.addEventListener('load', onload);

 function onload(event) {
   chartALM = createALMChart();
   barALM = createALMBar();
 }

 // Create Chart
 function createALMChart() {

  var chart = new Highcharts.Chart({
   chart: {
      renderTo: 'chart-ALM',
      type: 'spline'
   }
   //The following is only about the visual aspect
  }