Why aren't my data points getting placed in the corresponding locations in my chart? - firebase

Question

I have a Nuxt component that loads a chart using chart.js, filled with data from a Firestore database. The data points are loading as a flat line at the bottom of my chart. However, the data has different value ranges when hovered.
How do I get the data points to render in the correct locations to produce an actual graph?
I've tried using a loaded variable to load the chart after the Firestore data is retrieved. I end up with the exact same issue.
I've tried adding some static weight array data before the data is pushed to it. When doing that, it showed those points accurately, but the rest laid flat on the bottom (still showing valid data point values on hover).
<template>
<div id="container">
<canvas ref="chart"></canvas>
</div>
</template>
<script>
import { firebase, db } from '#/plugins/firebase'
import Chart from 'chart.js'
const color = ['#3AC', '#D91D63', '#5F6982', '#F4B651', '#3F4952']
export default {
data() {
return {
laoded: false,
weightData: [],
}
},
async mounted() {
// retrieve weight data from firebase
this.getWeightData()
const ctx = this.$refs.chart
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
data: this.weightData,
backgroundColor: color[0],
borderColor: color[0],
borderWidth: 1,
fill: false,
label: 'weight',
responsive: true
}]
},
options: {
legend: {
usePointStyle: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 10
}
}]
},
tooltips: {
callbacks: {
afterBody(tooltip, dataset) {
let data = 'goal: goal here'
return data
}
}
}
}
})
},
methods: {
getWeightData() {
firebase.auth().onAuthStateChanged(async user => {
if (user) {
const data = await db.collection('users').doc(user.uid).collection('weight').get()
.then(querySnapshot => {
if (!querySnapshot.empty) {
querySnapshot.forEach(doc => {
this.weightData.push(doc.data().weight)
})
}
})
}
})
this.loaded = true
}
}
}
</script>
I expect a line graph with the data points from the weightData array. All I'm getting is a flat line with different values in the tooltips.
Also, the chart's range is 0 to 1, even though weightData values go up as far as 200.

Answer 1

getWeightData() populates weightData asynchronously, so you'd have to await the function call before proceeding with setting up the chart.
First, wrap getWeightData() in a Promise 1️⃣so that you could return the fetched weight data 2️⃣(instead of setting this.weightData inside the Promise):
methods: {
getWeightData() {
return new Promise((resolve, reject) => { /* 1 */
firebase.auth().onAuthStateChanged(user => {
if (user) {
db.collection('users')
.doc(user.uid)
.collection('weight')
.get()
.then(querySnapshot => {
const weightData = []
if (!querySnapshot.empty) {
querySnapshot.forEach(doc => {
weightData.push(doc.data().weight)
})
}
resolve(weightData) /* 2 */
})
.catch(reject)
} else {
reject()
}
})
})
}
}
Then in mounted(), store the awaited result of getWeightData() in this.weightData 3️⃣:
async mounted() {
this.weightData = await this.getWeightData() /* 3 */
/* now, setup chart with `this.weightData` */
}