highcharts / highcharts-react-native

Other
103 stars 79 forks source link

How can I update the graph with fetched data? #17

Closed ms042087 closed 5 years ago

ms042087 commented 5 years ago

I use the following code and it doesn't work for me.

              setInterval(function() {
                y = 0
                fetch("**url**", {
                  method: "GET",
                  headers: {
                  'Content-Type': 'application/json; charset=utf-8',
                  "Connection": "close",  
                  }
                })
                  .then(respone => respone.json())
                  .then(res => {
                      y = parseFloat(res[0].Value)
                    })
                  .catch(error => {
                    y = 0
                  });
                series.addPoint(y, true, true);
              }, 2000);

The fetch process seems to be ignored and only gives y = 0.

ms042087 commented 5 years ago

More information here. I finally can update the chart with fetched data. The chart shows 1 minute data which consists of 1200 points. I update the chart by putting the function in setInterval in componentDidMount().

Result: The chart can be updated as usual, but stop updating around 1.5 minute later. It gives no error message.

  componentDidMount(){
    setInterval(this._loadChartData,updateInterval);
  }
 _loadChartData() {
    result = {};
    url = "xxx";
    fetch(url, {
      method: "GET",
      headers: {
      'Content-Type': 'application/json; charset=utf-8',
      "Connection": "close",  
      }
    })
      .then(respone => respone.json())
      .then(res => {
          result = res[0].minute
          this.setState({
            chartOptions: {
              series: [
                {
                  data: result.slice(Math.max(result.length - numberOfPoint, 0)),
                  type: "area",
                  pointStart: new Date - 60000,
                  pointInterval: 1000*60/1200 
                }
              ]
            }
        });

          return (result)
        })
      .catch(error => {
        console.log(error);
        return (0)
      });
  }
sebastianbochan commented 5 years ago

Regarding to update, in the wrapper I used webkit.postmessage and event to cache it. At this moment it was removed from webview and is still developed / reorganized.

Ref: