Obtengo datos de mi base de datos de Firebase cada diez segundos. Quiero trazar un gráfico con highcharts.js, pero cuando accedo a la página web, obtengo todos los datos antes del momento en que se carga la página. En este punto, mi página web se congela y falla después de unos minutos mientras se recuperan los datos. (También tengo una segunda pieza de código que recupera los nuevos datos cada vez que se agregan a la base de datos, pero la página web falla antes).

Creo que es mi función plotvalue la que bloquea la página. Cuando suprimo plotValue (...) puedo leer mis datos en unos segundos, incluso si hay más de 15k. De hecho, puede deberse a que vuelvo a dibujar el gráfico cada vez que recibo datos en lugar de esperar a recuperarlos todos.

Me gustaría saber cómo dibujar el gráfico una vez que todos mis datos se recuperen de mi base de datos.

Les agradezco de antemano sus respuestas.

Aquí está el código:

 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 }