I have three graphs I want to show on one page on a flask webserver. For each graph I have a script tag containing the script for that specific graph. I am using plotly.js to display and create the graphs. I have already made sure the code to display the graph works, but I had it redirecting me to different pages and I just want all the graphs on one. The code I have below is a sample of my flask and html code for one graph, I have more or less the same format for the other two graphs on the same html page. Any help on this will be greatly appreciated!
FLASK CODE
@app.route('/graph_select', methods=["GET", "POST"])
def graph_select():
return render_template('datapage.html')
@app.route('/read_ph', methods=["GET", "POST"])
def ph_plot():
if request.method == "POST":
a = request.form.get('read_ph')
ph_plot = all_plots.get_ph_data(a)
time.sleep(2)
return render_template('datapage.html', ph_plot=ph_plot)
HTML
<html>
<body>
<h1>Data Monitoring Station</h1>
<h2>PH</h2>
<form method="POST" action="read_ph" >
<input name="read_ph" placeholder="Instances" type="text">
</form>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var trace1 = {
x: ,
y: ,
type: 'scatter',
name: 'Example'
};
var layout = {
title: "PH Values",
titlefont: {
family: 'Poppins',
size: 18,
color: '#7f7f7f'
},
xaxis: {
title: 'Time',
},
yaxis: {
title: 'PH',
range: [0,14]
},
margin: {
l: 70,
r: 40,
b: 50,
t: 50,
pad: 4
}
};
var data = [trace1];
Plotly.newPlot("ph_div", data, layout);
</script>
<hr>
<h5> Return to main page <a href="/"class="button">RETURN</a></h5>
<hr>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire