I'm trying to get my chart to update dynamically as new data comes. I have already updated the values, but the graph does not update the change in data dynamically. What is the equivalent function of the React function chart.update() for react-native to enable the graph to update?
`import {Chart,LineChart,BarChart,PieChart,ProgressChart,ContributionGraph} from 'react-native-chart-kit'
import React, { Component } from 'react';
import { View, Text, StyleSheet, ImageBackground, Icon, FlatList, Button, TextInput, Dimensions } from 'react-native';
import CheckBox from 'react-native-check-box'
export default class FocusScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isChecked: false,
}
this.dates =['January', 'February', 'March', 'April', 'May', 'June']
this.values = [20, 30,40,50,60,70]
this.shouldRedraw = true
this.chart = new LineChart();
}
componentDidMount(){
this.timer = setInterval(()=> this.returnLabels(), 1000)
this.timer = setInterval(()=> this.returnData(), 1000)
}
updateShouldRedraw = () => {
this.shouldRedraw = true;
}
returnLabels = () => {
this.dates.push(parseInt(Math.random()*100).toString())
console.log(this.dates)
return this.dates
}
returnData = () => {
this.values.push(parseInt(Math.random()*100))
console.log(this.values)
return this.values
}
render() {
return (
Bezier Line Chart
<LineChart
data={{
labels: this.returnLabels(),
datasets: [{
data: this.returnData()
}]
}}
redraw
width={Dimensions.get('window').width /2} // from react-native
height={400}
yAxisLabel={'$'}
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#fb8c00',
backgroundGradientTo: '#ffa726',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: '100%',
height: '100%',
},
imageBackground: {
height: '100%',
width: '100%',
},
wrapper: {
borderWidth: 3,
borderColor: 'green',
flex: 1,
margin: '10%',
marginTop: '20%',
height: 40,
justifyContent: 'flex-end',
alignItems: 'stretch',
},
leftText: {
fontSize: 28,
}
})`
I'm trying to get my chart to update dynamically as new data comes. I have already updated the values, but the graph does not update the change in data dynamically. What is the equivalent function of the React function chart.update() for react-native to enable the graph to update?
`import {Chart,LineChart,BarChart,PieChart,ProgressChart,ContributionGraph} from 'react-native-chart-kit'
import React, { Component } from 'react';
import { View, Text, StyleSheet, ImageBackground, Icon, FlatList, Button, TextInput, Dimensions } from 'react-native';
import CheckBox from 'react-native-check-box'
export default class FocusScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isChecked: false,
}
this.dates =['January', 'February', 'March', 'April', 'May', 'June']
this.values = [20, 30,40,50,60,70]
this.shouldRedraw = true
this.chart = new LineChart();
}
componentDidMount(){
this.timer = setInterval(()=> this.returnLabels(), 1000)
this.timer = setInterval(()=> this.returnData(), 1000)
}
updateShouldRedraw = () => {
this.shouldRedraw = true;
}
returnLabels = () => {
this.dates.push(parseInt(Math.random()*100).toString())
console.log(this.dates)
return this.dates
}
returnData = () => {
this.values.push(parseInt(Math.random()*100))
console.log(this.values)
return this.values
}
render() {
return (
Bezier Line Chart
<LineChart
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
imageBackground: {
height: '100%',
width: '100%',
},
wrapper: {
borderWidth: 3,
borderColor: 'green',
flex: 1,
margin: '10%',
marginTop: '20%',
height: 40,
justifyContent: 'flex-end',
alignItems: 'stretch',
},
leftText: {
fontSize: 28,
}
})`