get data from API to React Chart Canvasjs

Question

I need to get data from my API in Front and put in in ReactChart module. This is my API in Front :

 componentDidMount(){
        const head =  localStorage.getItem('head');
        const payload =  localStorage.getItem('payload');
        const signature =  localStorage.getItem('signature');
        var tok = head + "." + payload + "." + signature;

        fetch(`${API}/api/accounts/getstataccounts` 
        ,{
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'authorization': `Bearer ${tok}`
            }
        })
        .then(results => {
            return results.json();
          })
          .then(res => {
            var statsaccount = res.result;
              if(res.success === true){
                for (var i =0; i< statsaccount.length; i++){
                    if(statsaccount._id == true){
                        this.setState({ account_active: statsaccount.total }) 
                    }
                    else{
                        this.setState({ account_nonactive: statsaccount.total }) 
                    }
                }
              }
          })
    }

And this if how i get data in Chat in the render():

 render(){
        var { account_active, account_nonactive } = this.state;
        const options = {
            title: {
              text: "Basic Column Chart in React"
            },
            data: [{                
                      type: "pie",
                      dataPoints: [
                          { label: "activés",  y: account_active  },
                          { label: "non activés", y: account_nonactive  }
                      ]
             }]
         }
         console.log("chart ",options.data.dataPoints);

        return (
            <section id="Stats">
                <Header />
                <CanvasJSChart options = {options}
            /* onRef = {ref => this.chart = ref} */
        />
            </section>
        )
    }

with the concole.log() in the render, i got : chart undefined This is the chart link : https://canvasjs.com/react-charts/animated-chart/

Thank you

score 0 · Answer 1 · answered Dec 06 '19 at 22:12

i resolved it, i just forgot to add [i] in for loop


 for (var i =0; i< statsaccount.length; i++){
                    if(statsaccount[i]._id == true){
                        this.setState({ account_active: statsaccount[i].total }) 
                        console.log("activé : ", statsaccount[i].total)
                    }
                    else{
                        this.setState({ account_nonactive: statsaccount[i].total }) 
                        console.log("non activé : ", statsaccount[i].total)
                    }
                }
              }

get data from API to React Chart Canvasjs

1 Answers1