I use 18.2.0 and react-google-charts 4.0.0
in my useEffect I do
const [zooChart, setZooChart] = useState({data : '', sum:'' });
useEffect(() => {
//if no data, set data to false and return
if (!data.info.data || data.info.data === undefined || data.info.data === 'undefined') {
setCountChart(prevState => ({
...prevState,
data: false
}))
setZooChart(prevState => ({
...prevState,
data: false
}))
return
}
//if data, but empty , set data to false
if (
data.info.data.zoo.chart.data === null || data.info.data.zoo.chart.data ==='' || !data.info.data.zoo.chart.data
) {
console.log('NO DATA - - ');
setZooChart(prevState => ({
...prevState,
data: false
}))
}
else{//else set data
console.log('DATA - - ');
console.log('data ', typeof(data.info.data.zoo.chart.data), data.info.data.zoo.chart.data);
setZooChart(prevState => ({
...prevState,
data: data.info.data.zoo.chart.data,
sum:data.info.data.zoo.chart.sum
}))
}
}, [data.info.data])
and then to show the pie chart
//check if there are data
{zooChart.data === false ?
<Box>
No sufficient data
</Box>
:
<span>
{console.log('zooChart.data on line ', typeof(zooChart.data) , zooChart.data)}
<Chart
chartType="PieChart"
data={zooChart.data}
width={"200px"}
height={"200px"}
/>
</span>
the console log says zooChart.data on line object (12) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
the array has the following structure
0 : (2) ['Categories', 'Count']
1 : (2) ['aa', '29']
2 : (2) ['bb', ' 2']
3 : (2) ['cc', ' 4']
4 : (2) ['ca', ' 3']
5 : (2) ['da', ' 1']
6 : (2) ['dd', ' 1']
7 : (2) ['gg', ' 6']
8 : (2) ['ga', ' 2']
9 : (2) ['hh', ' 8']
10 : (2) ['ja', ' 7']
11 : (2) ['jb', ' 1']
length : 12
[[Prototype]] : Array(0)
There is no chart generated. No errors in console, no messages in the span that contains the chart. Just blank. Nothing
I cannot find the error or bug. Please advise
Thanks
EDIT there are 2 other react-google-charts pie charts in the same component, written with the same logic, that work perfectly