Hi,
I want to deploy multiple Bokeh scatter plots using a Flask app. A Flask app will receive a .csv file and after applying my ML functions, it produces two tsne scatter plots.
Although my app can display them individually when I used the following code to display them together on a same page (something like Row Layout Creating layouts — Bokeh 2.4.2 Documentation) I am receiving this error: "jinja2.exceptions.UndefinedError: 'div' is undefined"
On my app.py and inside my @app.route(’/’, methods=[‘POST’]), I have the following code:
p_true = figure(title="Data with True Labels",plot_width=300, plot_height=300,)
true_df = pd.DataFrame(data=tsne_value, columns=["v1", "v2"])
colormap = {1: 'red', 0: 'green'}
true_df['label'] = gold_label
true_df["color"] = true_df['label'].map(lambda x: colormap[x])
p_true.scatter(true_df['v1'], true_df['v2'], color=true_df['color'], fill_alpha=0.8, size=5)
p = figure(title="PRAD Predicted results",plot_width=300, plot_height=300)
tsne_df = pd.DataFrame(data=tsne_value, columns=["v1", "v2"])
tsne_df["p"] = [1 if x > 0.115 else 0 for x in y_p]
colormap = {1: 'red', 0: 'green'}
print(y_prad)
tsne_df['color'] = tsne_df['p'].map(lambda x: colormap[x])
print(tsne_df['color'].values)
p.scatter(tsne_df['v1'], tsne_df['v2'], color=tsne_df['color'], fill_alpha=0.8, size=7)
plots = {"true":p_true, "pred":p}
script, div = components(plots)
return render_template("home.html", the_div=div, the_script=script)
and in my home.html I have:
<!doctype html>
Python Flask File Upload ExampleSelect a file to upload
{% with messages = get_flashed_messages() %} {% if messages %}
-
{% for message in messages %}
- {{ message }} {% endfor %}
<head>
<meta charset="utf-8">
<title>Bokeh Scatter Plots</title>
<style> div{float: left;} </style>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.0.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.0.min.js"></script>
{{ script }}
</head>
<body>
{% for key in div.keys() %}
{{ div[key] }}
{% endfor %}
</body>
</html>
I have checked the code multiple times but could not find the issue. Any thoughts on this error? Am I missing something?
Thanks!
