react-native-highcharts icon indicating copy to clipboard operation
react-native-highcharts copied to clipboard

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

Open rsoni0809 opened this issue 7 years ago • 2 comments

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>
    );
}

}

rsoni0809 avatar Jun 20 '18 12:06 rsoni0809

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

San10694 avatar Dec 02 '19 11:12 San10694

Same here

canberkardic avatar Mar 27 '21 09:03 canberkardic