react-native-highcharts
react-native-highcharts copied to clipboard
TradingPal
How to pass point coordinates to ChartView in real time?
Hi there, I'm trying to use your library for real time data plotting, however I'm having some troubles with figuring out how to pass data points to ChartView element in real time. Can you explain how to pass point coordinates to ChartView from react-native body?
For example, consider adding a function XYgenerator() which updates two variables this.X and this.Y to your react-native-highcharts code in readme:
import ChartView from 'react-native-highcharts';
...
constructor(props){
super(props);
this.state = {
};
this.X = (new Date()).getTime();
this.Y = 10;
}
...
XYgenerator() {
setInterval(function () {
this.X = (new Date()).getTime(), // current time
this.Y = 10 + 2 * Math.random();
}, 500);
}
...
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
...
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} config={conf} options={options}></ChartView>
);
}
How is it possible to pass this.X and this.Y to ChartView each time I update this variables instead of events: { load: function () {...}}?
Maybe there is a way of passing a callback to ChartView? If this is the case, then how to pass a callback to it? Or would you suggest something else?
I went over some similar issues as #62, #40 and #33, but they don't seem to be helpful
See a working example: https://github.com/fkhosrow/RealTimeChart (of interest are App.js and Chart.js). Note that my chart does not work like the example shown for this library. I do NOT think it's possible to feed points in the chart load event. I fiddled with this endlessly and gave up in the end. Instead, I re-render the chart after n number of points. The chart is still animated when each point is rendered on the chart. To add add points to the Chart, I just set the state of the Chart component in the App component every 2 seconds.
