1

I am trying to display data for certain dates that the user inputs. In my react form, I am sending the input dates data to my flask server. My flask server then retrieves the data from these dates from a database. Now, I want to send this data back to my React frontend and plot it. Here is my code so far:

My React class component for graphing and form:

import React, { Component } from 'react';
import Plot from 'react-plotly.js';

class LineChart extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Plot
                    data={[
                        {
                            x: this.props.allData[0],
                            y: this.props.allData[1],
                            type: 'scatter'
                        }
                    ]}
                    layout={{ width: 1000, height: 500, title: 'Google Stock Data' }}
                />,

                <form method='post' action='/acceptDates'>
                    <input type="text" id='startDate' name='startDate' />
                    <input type='submit' value='submit' />
                </form>
            </div>
        );
    }
}
export default LineChart;

My React App.js that can take in data from the flask /data function:

import logo from './logo.svg';
import './App.css';
import LineChart from './linechart'
import React, { useState, useEffect } from 'react'

function App() {

  const [data, setData] = useState([{}])

// retrieve data from flask

  useEffect(() => {
    fetch("/data").then(
      res => res.json()).then(
        data => {
          setData(data)
          console.log(data)
        })
  }, [])

  
  //this sends the received data from the parent to child class component for it to graph
  
return (
    <div className="App">
      <LineChart allData={[data['dates'], data['open_price']]} />
    </div>
  );
}

export default App;

My flask app:

from flask import Flask, request, render_template
from flask_sqlalchemy import SQLAlchemy
from connect_db import *


app = Flask(__name__)


# gets the input dates from the React form and sends them to /data to get the data
@app.route('/acceptDates', methods=['GET', 'POST'])
def get_dates():
    sd = request.form.get('startDate')
    return get_data(sd)

# retrieves data from postgresql db and returns json object
@app.route('/data')
def get_data(startD):
    data = retrieve_data(startD)
    return {"dates": data[0], "open_price": data[1]}


@app.route('/')
def index():
    return "<h1 > Home page </h1>"


if __name__ == '__main__':
    app.run(debug=True)

I am able to:

  • send the form input from react to flask and retrieve the data needed to be graphed
  • have react take my data from my /data function and send it to the class component for graphing

What I need help on:

  • after retrieving the data from flask, tell React to graph it. Essentially, how do I tell my flask app to go back to React after it finds the data and have React graph it for me
2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.