I need some pointing in the right direction. I have a python flask script that opens up a form on my web browser at http://localhost:8000. When I enter a number into the field and press submit, it renders a dummy figure. It works works great when I’m connected to the internet but when I’m on a server that restricts internet access, it wont render the figure.
There are 3 files/links it accesses from within the HTML files:
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
https://cdn.plot.ly/plotly-latest.min.js
How can I get these files onto my local and have the HTML files access them? I am new to HTML and the javascript world.
Here is my app.py, and two template HTML files.
app.py
from flask import Flask, render_template, request
import pandas as pd
import json
import plotly
import plotly.graph_objects as go
import plotly.io as pio
pio.renderers.default = 'browser' # or 'colab' or 'iframe' or 'iframe_connected' or 'sphinx_gallery'
app = Flask(__name__)
app.secret_key = b"my_secret_key"
@app.route('/', methods=['GET', 'POST'])
def home():
if request.method == 'POST' and 'auto_number' in request.form:
graphJSON = gm()
return render_template('plot_fig.html', graphJSON=graphJSON)
return render_template("home.html")
def gm():
fig = go.Figure(data=go.Scatter(x=[1,2,3,4,5], y=[0,1,2,1,0], mode='markers'))
fig.update_layout(title="Test Figure")
fig.update_traces(marker={'size': 15})
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
return graphJSON
if __name__ == '__main__':
app.run(host='localhost', port=8000, debug=False)
home.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<h1 class="text-center py-5">Figure Generator</h1>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<form class="pure-form" method="POST">
<label for="LocoNum" class="form-label">Enter any number here:</label>
<input type="text" name="auto_number" placeholder="1234" class="form-control">
<p></p>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-4"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>plot_fig.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous">
</head>
<body>
<div id='chart' class='chart'></div>
</body>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script type='text/javascript'>
var graphs = {{graphJSON | safe}};
Plotly.plot('chart',graphs,{});
</script>
</html>