React native real time chart

-

I am facing some performance issues when trying to draw real-time chart using various libraries for data visualization in react native based mobile app. I tried multiple libraries like react native chart2, react-native-pathjs-charts, arty-charty etc. but all in vain. Is it React Native issue or just simple i could find right library ?

PS: I get data every 500 ms, 1000 ms, 2000 ms in my mobile app.

For example using, react-native-chart2 

//In Render function, i have below source  

<RNChart style={styles.rnchart}
chartData={chartData}
verticalGridStep={50}
gridColor={'white'}
labelTextColor={"white"}
showYAxisLabels={false}
xLabels={xAxisTime}/>

//In data receive event callback, i have below source

let newArr1 = yAxisDataArr.slice(sliceFrom);
newArr1.push(currntMa);
newArr1.push(currntMa/4);
yAxisDataArr = newArr1;

chartData = [
{
name:'LineChart',
//color:'gray',
lineWidth:2,
showDataPoint:false,
data:yAxisDataArr
}

];
this._tick()

Comments

Post a Comment

Popular posts from this blog

Meaning of `{}` for return expression

-
15 1 I found by accident that the following compiles: #include <string> #include <iostream> class A{ int i{}; std::string s{}; public: A(int _i, const std::string& _s) : i(_i), s(_s) { puts("Called A(int, const std::string)"); } }; A foo(int k, const char* cstr){ return {k, cstr}; // (*) } int main(){ auto a = foo(10, "Hi!"); return 0; } The line of interest is (*). I guess the function foo is equivalent to: A foo(int k, const char* str){ return A(k, cstr); } However, is there a special name for this mechanism in (*)? Or is it just the simple fact that the compiler knows which constructor to call due to the return type? ...
Read more

Get current scroll position of ScrollView in React Native

-
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native? So something like: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> Try. <ScrollView onScroll={this.handleScroll} /> And then: handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, Disclaimer: what follows is primarily the result of my own experimentation in React Native 0.50. The ScrollView documentation is currently missing a lot of the information covered below; for instance onScrollEndDrag is completely undocumented. Since everything here relies upon undocumented behaviour, I can unfortunately make no promises that this information will remain correct a ...
Read more

Chart JS +ng2-charts not working on Angular+2

-
16 1 Hello developers i have been literally the whole day trying to implement charts on my proyect , but following the official docs there is not way i could rid off this error : ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21 "export 'pluginService' was not found in 'chart.js' node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartPoint'. 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~ n...
Read more