0

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

codebot
  • 517
  • 8
  • 29
  • 55

0 Answers0