Chartjs-Rest api / json error while using it with react chartjs

by

0👍

Do NOT modify state directly. Always use setState.

// BAD
results.forEach(packet => {
  this.state.labels.push(new Date(packet.updated).formatMMDDYYYY());
  this.state.data.push(parseFloat(packet.users));
});

// GOOD
const labels = [];
const data = [];

results.forEach(packet => {
  labels.push(new Date(packet.updated).formatMMDDYYYY());
  data.push(parseFloat(packet.users));
});

this.setState({ data, labels });

When you modify state directly the component never re-renders, meaning Chart never re-renders with the updated data.

0👍

First: If you want to modify the state of a component, you must do it using the this.setState({...}) React function, if you do not do it in this way, react will not fire again the render function. So you need to change how you load data: 

    const labels = [];
    const data = [];
    results.forEach(packet => {
      labels.push(new Date(packet.updated).formatMMDDYYYY());
      data.push(parseFloat(packet.users));
    });
    this.setState({
     labels,
     data
    })

Now remember the constructor just is fired once the component is going to be mounted so if you set the state of chart.js with the values in the props, when the parent component fired the setState function your data is not going to be updated. So here we need to remove the following from the constructor:

chartData: {
    labels: props.labels,
    datasets: [
                {
                  data: props.data,
                  backgroundColor: 'rgba(255, 99, 132, 0.6)',
                 }
              ]
 }

and added to the render function like: 

const chartData = {
        labels: props.labels,
        datasets: [
                    {
                      data: props.data,
                      backgroundColor: 'rgba(255, 99, 132, 0.6)',
                     }
                  ]
     }

Finally send the data you recently created 

<Bar 
  data={chartData}
  options={{
      title: {
          display: true,
          text: 'Largest cities in Delhi',
          fontSize: 25
      },
      legend: {
          display: true,
          position: 'right'
      }
  }}
/>

Besides, as you are using React, you should not use jQuery. If you just use it for loading data you can use other alternatives like axios or fetch to fetch the data 🙂

EDIT

Date prototype is readonly so you should create a new function to format it in App.js: 

getFormatDate = (date) => {
    return (
      date.getDate() + 1 + "/" + date.getMonth() + "/" + date.getFullYear()
    );
  }

Modify your getChartData with the following code to solve the issue:

getChartData() {
   axios.get('https://cors-anywhere.herokuapp.com/https://api.myjson.com/bins/zfpa2') 
     .then(({ data }) => {
       const labels = [];
       const dataArray = [];
       data.forEach(packet => {
        labels.push(this.getFormatDate(new Date(packet.updated)));
        dataArray.push(parseFloat(packet.users));
      });
       this.setState({ data : dataArray, labels })
    })
     .catch(error => {
      console.log(error);
    })
  }

Leave a comment