react-native-highcharts
react-native-highcharts copied to clipboard
React-native: How to access Highchart <ChartView> object for showloading and updating server response data
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>
);
}
}
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
Same here