react-google-charts: Table has no columns and Cannot draw chart: no data specified

Question

I have a project, and this project contains several interfaces, and among these interfaces, I have an interface for displaying statistics.

In order to display the statistics, I used a library:

react-google-charts

But I got this problem:

Table has no columns

Cannot draw chart: no data specified

how can i solve it?,

Note that the print function returns:

This file contains pie chart,

import { Button, Card, Col, Row, Space } from 'antd';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import ReactChart from '../../common/chart';
import { typeChart } from '../../common/chart/bar-chart/data/enum';
import '../../../styles/dashboard/index.scss';
import { AuthContext, IAuthContext } from '../../../contexts/auth-context';
import colors from '../../../constants/colors';
import calendar1 from '../../../assets/icons/calendar1-icon.svg';
import calendar2 from '../../../assets/icons/calendar2-icon.svg';
import calendar3 from '../../../assets/icons/calendar3-icon.svg';
import thermometer from '../../../assets/icons/thermometer-icon.svg';
import waving from '../../../assets/icons/waving-hand-icon.svg';
import { useNavigate } from 'react-router';
import { FormattedMessage } from 'react-intl';
import { useQuery } from 'react-query';
import statisticCharts from '../../../api/nuclearMedicineApi/services/Statistic';
import { BsFillSquareFill } from 'react-icons/bs';
import { Chart } from "react-google-charts";



interface DashboardProps { }
const Dashboard: FunctionComponent<DashboardProps> = () => {
    const auth = useContext<IAuthContext>(AuthContext);

    // **************************************************************

    const chartsQueryCityData = useQuery(['chartsQueryCityData'], () =>
        statisticCharts.GetTopographyStatistic({ FilterType: 2 }),
    ).data;

    var cityTopography: any[] = [];

    const [xyCitytotalTopography, setxyCitytotalTopography] = useState<any[]>([])

    useEffect(() => {
        // trying for City
        chartsQueryCityData?.resultList.map((xy: any, index: any) => {
            console.log('mmmm: ', xy);

            if (xy?.x !== undefined && xy?.yPercent !== undefined) {
                if (xy?.yPercent !== 0) {
                    let xyData: any[] = [xy?.x, xy?.yPercent];
                    cityTopography.push(xyData);
                    setxyCitytotalTopography(cityTopography);

                    console.log('xxxx: ', xyCitytotalTopography);

                    return cityTopography;
                }
            }
        })
    }, [chartsQueryTopographyData, chartsQueryCityData, chartsQueryAgeData]);

    console.log('xxxx: ', xyCitytotalTopography);

    const data: any[] = xyCitytotalTopography;
    console.log('datadatadata: ', data);

    const options = {
        is3D: true,
    };

    // **************************************************************
    const current = new Date();
    const date = `${current.getFullYear()}/${current.getMonth() + 1
        }/${current.getDate()}`;
    const navigate = useNavigate();
    return (
        <>
            <div className='dashdoard-donutData'>
                            <Row>
                                <Col className='mt-8' >
                                    <Chart
                                        chartType="PieChart"
                                        data={data}
                                        options={options}
                                        width={"100%"}
                                        height={"400px"}
                                    />
                                </Col>
                             </Row>
                        </Card>
                    </Col>

                </Row>
            </div>
        </>
    );
};

export default Dashboard;

Answer 1

the data must be as this form:

export const data = [
  ["Task", "Hours per Day"],
  ["Work", 11],
  ["Eat", 2],
  ["Commute", 2],
  ["Watch TV", 2],
  ["Sleep", 7],
];

that means the header ["Task", "Hours per Day"] must be string and must be found,

for that add an empty array, with empty string ['', ''],

the updates that i do:

const [xyCitytotalTopography, setxyCitytotalTopography] = useState<any[]>([['', '']])

// trying for City with ypercent  ****pie chart 
        chartsQueryCityData?.resultList.map((xy: any, index: any) => {
            if (xy?.x !== undefined && xy?.yPercent !== undefined) {
                if (xy?.yPercent !== 0) {
                    let xyData: any[] = [xy?.x, xy?.yPercent];
                    cityPercent.push(xyData);
                    setxyCitytotalTopography(cityPercent);
                    return cityPercent;
                }
            }
        })
              <Col className='mt-4'>
                        <br />
                        <br />
                        <Chart
                           chartType="PieChart"
                           data={xyTopographyPercent}
                           options={options}
                           width={"130%"}
                           height={"500%"}
                         />
               </Col>