0

I'm trying to make a chart using chart.js and for that I'm retrieving data from Firebase Realtime Database. I'm able to get the data and put on the chart, the problem is the chart is showing on the screen just after resize the window or alt+tab. I'm using this code for that:

var rent_data = [];

auth.onAuthStateChanged(function(user) {
      if (user != null) {
        const db1 = ...;
        db1.once('value').then(function (snapshot) {
            snapshot.forEach(function(childSnaphot){
                rent_data.push(childSnaphot.val())
            })
         })

        var ctx = document.getElementById('chart');
        var labelms = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
        var config = {   
            type: 'line',
            data: {
                labels: labelms,
                datasets: [{
                    label: '# of Votes',
                    data: rent_data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            }
           }

        var chart2 = new Chart (ctx, config);

}})

The code is missing some parts, like authentication in firebase but I don't think it's crucial since it's working after resize.

I tried to put chart.update() after var chart but it doesn't do nothing.

Some images just to show the output:

First chart

Chart after resize

I'm new on the javascript and maybe I missing something simple that I don't know yet. On another questions I saw something related to async functions but I didn't figure it out where do I need to use then.

Thanks in advance!

Mauricio S
  • 1
  • 1
  • Most likely you're rendering the chart before the data is loaded, but it's impossible to be certain of that without seeing how the two code fragments you've shared are related. But either way, the code that triggers the chart rendering needs to be inside the `then(` callback, right after the loop. Also see https://stackoverflow.com/questions/40688268/why-does-firebase-lose-reference-outside-the-once-function/40688890#40688890 – Frank van Puffelen Sep 09 '21 at 13:30
  • @FrankvanPuffelen I edited the question to be more clear but your answer is right, it's just to put chart part after the loop. Thanks for your help. (Now, I'm new here too and don't know how to mark your comment as a valid answer haha) – Mauricio S Sep 09 '21 at 14:11
  • Good to hear that explained what you were seeing Mauricio Comments can't be accepted, but I marked your question as a duplicate of the one I linked to provide closure for the system too. – Frank van Puffelen Sep 09 '21 at 14:26

0 Answers0