Как мне получить данные из базы данных реального времени Firebase и поместить их в мой Chart.js?

Question

Я пытаюсь создать диаграмму, используя данные из базы данных реального времени Firebase.

Я создал гистограмму. Коды ниже - моя гистограмма. Я жестко закодировал имена и данные, но так они должны выглядеть.

    this.BarChart = new Chart('barChart', {
      type: 'bar',
    data: {
     labels: ["Tommy","John"],
     datasets: [{
         label: '# of times reported for bullying',
         data: [2,1],
         backgroundColor: 'rgba(255, 99, 132, 0.2)',
         borderWidth: 1
     }]
    }, 
    options: {
     title:{
         text:"Bar Chart",
         display:true
     },
     scales: {
         yAxes: [{
             ticks: {
                 beginAtZero:true
             }
         }]
     }
    }
    });

Я ожидаю, что диаграмма будет динамически изменяться при сохранении новых данных в базе данных. Поэтому, если в базе данных есть новое имя, оно создаст для него еще один столбец и покажет, сколько раз его / ее имя находится в базе данных.

Например: в моей базе данных в настоящее время Томми дважды сохранялся в разделе «Запугивание» в «BullyName», а имя Джона появлялось только один раз. Таким образом, в таблице должно быть 2 Имена: Томми и Джон и их соответствующее количество раз, которые появляются в БД.