TradingPal / react-native-highcharts

📈 Add Highcharts charts to react-native app for IOS and Android
https://github.com/TradingPal/react-native-highcharts
256 stars 158 forks source link

React-native: How to access Highchart <ChartView> object for showloading and updating server response data #82

Open rsoni0809 opened 6 years ago

rsoni0809 commented 6 years ago

Hi,

I am implementing Highchart in react-native and onPinchzoom i want to show loading.. status and update chart series object by ajax response.

I tried to access chart object by setting ref but it is not accessible.

Please suggest any other way to access server data.

render() {

var Highcharts='Highcharts';
 **let chart1 = this.refs.chart;**It is not working

var self = this;

var chartOptions = {
      chart: {
            renderTo: 'app',
            zoomType: 'x',
            events: {
                selection: function(event) {
                    if (event.resetSelection) {

                    } else {
                        try {
                            var startDt = null,
                                endDt = null;

                            if (event.xAxis[0]) {
                                startDt = event.xAxis[0].min;
                                endDt = event.xAxis[0].max;
                            }
                            onChartZoom(startDt, endDt);
                            function  onChartZoom(startDt, endDt) {
                              dateStartZoom = startDt;
                              dateEndZoom = endDt;
                              isChartZoomed = true;

                            }
                        }
                        catch (e) {
                            alert(e);
                        }
                    }
                }
            }
        },
       xAxis: {
              minRange: 3600 * 1000 // one hour
          },
          yAxis: {
              title: {
                text: 'Voltage (V)'
              }
          },
      series: [{
        name: 'Captured Time',
        data: values, //Values is updated on each ajax call
      }]
};

    return (
        <View>

            {this.state && this.state.data &&
                <ScrollView>
                 <ChartView style={{height:300}} config={chartOptions}  ref="chart"></ChartView>

                </ScrollView>

            }

      </View>
    );
}

}

San10694 commented 4 years ago

Can somebody please help with this, I want to access the chart object via ref, I am getting all the props via ref but not able to update the points live using series.addPoint outside the scope

canberkardic commented 3 years ago

Same here