1

I am trying to use Google chart in React. I read the data from the database and use hook(useState) to save the data. But I can't load the google chart when I fetch the data. I guess it is Ajax problem. I have tried to copy the data that I read from console.log and paste it, it works, so it is not the data format issue.

//inistialise
 const [v1, setV1] = useState(['x','sensor'],[0,0])

//define data value
 const data =  v1;

//define option for Chart
const options = {

    title: "Box Office Earnings in First Two Weeks of Opening",
    subtitle: "in millions of dollars (USD）",
    interpolateNulls: true


  };




//fetch data from database and change the data format
  async function getAllSensorProfile(sensorIdList, sensorSubId, starttime, endtime) {

    sensorIdList = JSON.stringify(sensorIdList)


    await deviceService.GetTimeSeriesListBySensorIdListTimeRange(sensorIdList, sensorSubId, starttime, endtime).then(
      (result) => {
        var time = []
        var _v1 = [['x', 'dogs']]

        result.map((str) => (

          str[1] = parseFloat(str[1])
        ))
        _v1 = _v1.concat(result)

        setV1(JSON.stringify(_v1))
        console.log(v1)


      },
      error => {
        console.log(error)
      }
    )
  }



 
                             <Chart
                                  chartType="LineChart"
                                  data={this.state.data}
                                  options={options}
                                  width={"70%"}
                                  height={"400px"}
                                />
Caitlin Cen
  • 11
  • 1

1 Answers1

0

I have fixed it! OMG I had this issue for a few days but could not fix it. Now I find the problem! So the problem is, setV1(JSON.stringfy(_v1)) is converting v1 to be a string, however, in <Chart>, data={data} only accept object, not a string. So, I simply just change it to setV1(_v1) then it works!

Caitlin Cen
  • 11
  • 1