I am trying to reload a plotly graph every time the user submits another input form. The input form tells my graph how much % of the data from the two arrays, stock_dates
and stock_data
it should graph. However, when I enter anything inside the form, the plotly graph breaks and this is what I see:
import React, { Component } from 'react';
import Plot from 'react-plotly.js';
class LineChart extends Component {
stock_dates = [1, 2, 3, 4]
stock_data = [1, 2, 3, 4]
constructor(props) {
super(props);
this.state = {
visible: false,
value: 100
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value })
}
handleSubmit(event) {
this.setState({ visible: true })
event.preventDefault();
}
getDateData() {
return this.stock_dates;
}
getStockData() {
return this.stock_data;
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label> Number:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type='submit' value='SUBMIT' />
</form>,
<Plot
data={[
{
x: this.getDateData().splice(this.state.value),
y: this.getStockData().splice(this.state.value),
type: 'scatter'
}
]}
layout={{ width: 1000, height: 500, title: 'Stock Data' }}
/>
</div>
);
}
}
export default LineChart;