score:0

Accepted answer
//start of component
const GraphComp = () => {
  
  //states
  const [valx, setValx] = React.useState();
  const [valy, setValy] = React.useState();
  const  [xarr , setArrX] = React.useState([]);   //[2,4,6,8]
  const  [yarr , setArrY] = React.useState([0]);  //[60,20,40,120,-40]

  // labels are x axis
  // data are y axis
  let x = 10;
  let y = 10;
setInterval(addData(x+=10,y+=10), 15000);

  const addData = (x ,y) =>{
    xarr.push(x);
    setArrX(arrx =>[...xarr]);
    yarr.push(y);
    setArrY(arry => [...yarr]);
    Axios.post("http://localhost:3001/insert", {x,y});
  }
//func to run map
const showArrayItem = (item) => {
}
  
  // settings graph attribs
  const data = {
    labels: [xarr],
    datasets: [
      {
        data: [],
        color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, // optional
        strokeWidth:5 // optional
      }
    ],
  };

// getting screen width to draw graph
const screenWidth = Dimensions.get("window").width;


// inserting data into graph
data.datasets[0].data = yarr.map(value => value);  
  

  return (
    <View>
    
     {/* getting x input*/}
      <TextInput
        style={styles.input}
        onChangeText={(valx) => setValx(valx)}
        placeholder="enter x here..."
        value={valx}
        keyboardType="numeric"
      />

      {/* getting y input*/}
      <TextInput
        style={styles.input}
        onChangeText={(valy) => setValy(valy)}
        placeholder="enter y here..."
        value={valy}
        keyboardType="numeric"
      />
      {/* inserting x and y into arrays*/}
      <Button
        title="Draw"
       onPress={() =>addData(valx,valy)}
      />


      {/* display of graph*/}
    <Text>
    {"\n\n"}
      </Text>
      <LineChart
          data={data}
          width={screenWidth}
          height={200}
          chartConfig={{
      backgroundGradientFrom: "#ffffff",
      backgroundGradientTo: "#ffffff",
      decimalPlaces: 0, // optional, defaults to 2dp
      color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
      style: {
        borderRadius: 16
      },
      propsForDots: {
        r: "5",
      }
    }}
      />

      <Text>
      <ScrollView>
          {
            xarr.map((item, key) => (

              <Text key={key} onPress={showArrayItem.bind(this)}>
                <Text > {item} </Text>
              </Text>

            ))
          }
        </ScrollView>
        {"\n\n"}
           <ScrollView>
          {
            yarr.map((item, key) => (

              <Text key={key} onPress={showArrayItem.bind(this)}>
                <Text > {item} </Text>
              </Text>

            ))
          }
        </ScrollView>
        </Text>
    </View>
    
  );
};

{/* css to style input fields*/}
const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});


export default GraphComp

Related Query

More Query from same tag