How can I fetch data from API url into my reactgoogle pie chart in reactjs

Question

Here I want to fetch data from a REST API URL which will be fed into the pie chart rather than manually entering data as given in the piechart below.

The API URL will have a JSON response.

ex:
[{"Development stage:1,"no.of.project:60},{"Development stage:2,"no.of.project:50}]

I want to display the data on the basis of JSON .

                     <Chart
                                  width={'450px'}
                                  height={'310px'}
                                  chartType="PieChart"
                                  loader={<div>Loading Chart</div>}
                                  data={[
                                    ['Development Stages', 'Number of Project'],
                                    ['Stage 1', 60 ],
                                    ['Stage 2',40],
                                    ['Stage 3',20 ],
                                    ['Stage 4',10],
                                    ['Stage 5', 30],
                                  ]}
                                  options={{
                                    title: 'Projects',
                                  }}
                                  rootProps={{ 'data-testid': '1' }}
                    />

How can I use async axios for the same???? and pass it into Chart.

                const [stage,setStage]=useState([]);
                const getStageData = async() => {
              try{

            const data=await axios.get(APIurl
           );

        setStage(data.data)
        }
        catch(e){


        }
    };

    useEffect(()=> {
        getStageData();
    },[]);

please console log "stage" and let me know what do you, see? share that output here. — ksa
– ksa, Commented Mar 31, 2021 at 9:00
are you sure it is empty? if yes, then make sure the stage has the JSON response that you have mentioned above. what do u see when you console log "data.data"? is it empty? if it is not empty then do setStage(...stage , data.data) and then in your chart component do this data = {[stage]}. Not sure if this helps you but give it a try. — ksa
– ksa, Commented Mar 31, 2021 at 9:56
Please correct me if I am wrong. From your code, I can see that you have set the axios response first (setStage(data1.data)), and then you are converting to arrays using stage. map(Object. values). Try to map first and then set state and see. something like this const res = data1.data.map(obejct.values) and then setStage(res). — ksa
– ksa, Commented Mar 31, 2021 at 10:52

yakohere · Accepted Answer · 2021-03-30 12:33:19Z

1

So, the data which you should pass to the pie chart should be array of arrays(depending on the library you are using). Your response data looks like an array of objects.

Convert your data to array of arrays.

    setStage(reponse.data.map(Object.values));

Pass that data to the pie chart.

    <Chart
       ...otherProps
       data={[
         ['Development Stages', 'Number of Project'], 
         ...data
       ]}
    />

answered Mar 30, 2021 at 12:33

yakohere

564 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amit Over a year ago

Here the stage is getting converted into array of array but using spread operator it is not display in the chart

ksa · Accepted Answer · 2021-03-31 11:22:20Z

1

From your code, I can see that you have set the axios response first (setStage(data1.data)), and then you are converting to arrays using stage.map(Object. values). Try to map first and then set state and see. something like this const res = data1.data.map(obejct.values) and then setStage(res).

answered Mar 31, 2021 at 11:22

ksa

3311 gold badge11 silver badges30 bronze badges

Comments

A.Missourisql · Accepted Answer · 2021-03-30 10:38:40Z

0

answered Mar 30, 2021 at 10:38

A.Missourisql

611 silver badge3 bronze badges

1 Comment

Amit Over a year ago

After this also the piechart is coming blank

Amit · Accepted Answer · 2021-03-31 11:57:00Z

The Complete working code to use react-google Piechart along with rest api data call

         const [stage,setStage]=useState([]);
         const getStageData = async() => 
        {
             try{

                 const data1=await axios.get("REST_API");

                //converting array of objects into array
                 const res=data1.data.map(Object.values);

                //setting it to stage variable
                setStage(res);  
        }
               catch(e){}  

         }; 
          useEffect(()=> {
                         getStageData();
                            },[]);

    <Chart
         width={'500px'}
         height={'310px'}
         chartType="PieChart"
        loader={<div>Loading Chart</div>}
        data={[
               ["COLUMN_NAME_1","COLUMN_NAME_2"],
               ...stage
            ]}
       options={{ 
                 title: 'Ongoing Projects Development Stage',                                                                               
               }}
        rootProps={{ 'data-testid': '1'}} 
     />

Collectives™ on Stack Overflow

How can I fetch data from API url into my reactgoogle pie chart in reactjs

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related