I created a web application that shows reports using amChart and followed the ReactJS amChart implementation, now i am trying to pass the firebase query result into ReactJS state, but cannot feature out why i cannot get the state data value to appear.
My idea is to sum all expense data and profit data then setState each of it and then pass it to amChart chart.data array
My code so far.
componentDidMount () {
am4core.useTheme(am4themes_animated);
let chart = am4core.create("chartdiv", am4charts.XYChart);
let expense = 0;
let profit = 0;
const citiesRef = db.collection('transactions');
// Create a query against the collection
const queryRef = citiesRef.where('category', '==', 'Expense').get();
const queryProf = citiesRef.where('category', '==', 'Profit').get();
queryRef.then(ref=> {
ref.docs.forEach(doc => {
expense += parseInt(doc.data().amount)
})
return this.setState( { totalExpense: expense } )
})
queryProf.then(ref=> {
ref.docs.forEach(doc => {
profit += parseInt(doc.data().amount)
})
return this.setState( { totalProfit: profit } )
})
chart.data = [
{
"year": "2003",
"expense": this.state.totalExpense,
"profit": this.state.totalProfit,
}
];
// Rest of the chart code..
}
