React native pure chart dynamic data problem - react-native

Question

I'm trying to load some data to a chart using https://github.com/oksktank/react-native-pure-chart
Trying to load Json data from api but seem to get undefined only, what might be the problem?
constructor(props){
super(props);
this.state = { isLoading: true}
}
componentDidMount(){
return fetch('https://api.mockaroo.com/api/12a7ead0?count=20&key=8ba88000')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.Weight,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render() {
return (
<SafeAreaView style={{flex:1}}>
<PureChart data={this.state.dataSource} type='line' />
</SafeAreaView>
);
}
}

Answer 1

The data you are providing to PureChart is not correct.
Here is the working example: https://snack.expo.io/#msbot01/moody-orange
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import PureChart from 'react-native-pure-chart';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { isLoading: true };
}
componentDidMount() {
return fetch('https://api.mockaroo.com/api/12a7ead0?count=20&key=8ba88000')
.then(response => response.json())
.then(responseJson => {
console.log(JSON.stringify(responseJson))
var temp = [];
for (var i = 0; i < responseJson.length; i++) {
console.log(responseJson[i].Weight)
temp.push(responseJson[i].Weight)
}
this.setState({
dataSource:temp
})
})
.catch(error => {
console.error(error);
});
}
render() {
return (
<View style={styles.container}>
<PureChart data={this.state.dataSource} type="line" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});