React native pure chart dynamic data problem

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>
    );
  }
}

Pramod · Accepted Answer · 2020-03-18 07:11:31Z

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,
  },
});

answered Mar 18, 2020 at 7:11

Pramod

1,96810 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SO27 Over a year ago

Thanks a lot, and I have another question, will it work if I'll get live updating data from api, let's say once in 1-2 seconds?

Pramod Over a year ago

Definitely.....as new data is pulled and updated the state value it will get updated

Collectives™ on Stack Overflow

React native pure chart dynamic data problem

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related