I am trying to simply load my /plot/ webpage from the code below, however, the bokeh plot is not being embedded in the webpage. Note, in newer versions of bokeh, it does not require a css file (from the CDN_css).
When using the output_file and show methods, I can easily get a separate webpage to spawn a html of the bokeh plot. However, when attempting to embed it, I merely get the html code from index, without the embedded chart.
Any help would be greatly appreciated!
'''python code: app.py'''
app = Flask(__name__)
def create_plot(ticker):
global p
ts = TimeSeries(key="**********", output_format='pandas')
data, meta_data = ts.get_intraday(symbol=ticker,interval='1min', outputsize='full')
data = data.iloc[::-1]
#gets the #tsla data from the API and orders it in reverese (5 days from most recent entry to furthest)
data["datetime"] = data.index #adds a datetime column of the index strings (need to convert to datetime objects)
datetime_list = []
for i in data["datetime"]:
datetime_list.append(datetime.strptime(i, "%Y-%m-%d %H:%M:%S"))
data["datetime"] = datetime_list #converts the datetime column from a str to a datetime object column
my_data = pd.DataFrame()
my_data["datetime"] = data["datetime"]
my_data["stock_price"] = data["1. open"]
last_time = my_data["datetime"][0]
one_day_ago = last_time - relativedelta(days=1)
daily_data = my_data[my_data["datetime"] > one_day_ago]
#bokeh chart
p = figure(x_axis_type="datetime",plot_width=1000, plot_height=400)
p.sizing_mode="scale_width"
p.title.text="# " + ticker + " Stock Price"
p.title.text_color="navy"
p.title.text_font="times"
p.title.text_font_style="bold"
p.title.text_font_size="28pt"
p.title.vertical_align="top"
p.title.align="center"
p.xaxis.minor_tick_line_color=None
p.yaxis.minor_tick_line_color=None
p.xaxis.axis_label="Time"
p.yaxis.axis_label="Price USD"
p.xaxis.axis_label_text_color="navy"
p.yaxis.axis_label_text_color="navy"
p.xaxis.axis_label_text_font_style="bold"
p.yaxis.axis_label_text_font_style="bold"
p.xaxis.axis_label_text_font="times"
p.yaxis.axis_label_text_font="times"
p.xaxis.axis_label_text_font_size = "16pt"
p.yaxis.axis_label_text_font_size = "16pt"
p.ygrid.band_fill_alpha = 0.1
p.ygrid.band_fill_color = "navy"
p.xgrid.grid_line_color = None
p.line(daily_data["datetime"], daily_data["stock_price"], line_width=2, color="blue")
#app.route("/")
def home():
return render_template("home.html")
#app.route("/plot/")
def plot():
create_plot("TSLA")
script1,div1 = components(p) # script_1 is the js source code, div_1 is the html source code
cdn_js = CDN.js_files[0] #need first element of this list
return render_template("plot.html",script1=script1, div1=div1, cdn_js=cdn_js)
if __name__ == "__main__":
app.run(debug = True)
'''home.html code'''
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/css/main.css">
<title>Daniel's #tsla chart webapp</title>
</head>
<body>
<h1>Daniel's #TSLA chart webapp</h1>
<h2>Hi, welcome to my stock market webapp which gives an analysis of #TSLA</h2>
<p>To proceed, please press the button below</p>
<form class="input" action="plot.html" method="post">
Please enter your email address below to access the #TSLA market data! <br>
<input type="submit" name="name_submission" value="submit">
</form>
</body>
</html>
'''plot.html code'''
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/css/main.css">
<script type="text/javascript" src={{CDN_js | safe}}></script>
<title>Daniel's #tsla chart webapp</title>
</head>
<body>
<h1>Daniel's #TSLA chart webapp</h1>
<h2>Hi, welcome to my stock market webapp which gives an analysis of #TSLA</h2>
{{ script1|safe }}
{{ div1|safe }}
</body>
</html>
Related
How can I put the first value of the list in function make progress(i)? list is the value returned from flask!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Changing the Value of Bootstrap 4 Progress Bar Dynamically</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Progress bar HTML -->
<div class="progress">
{{rist}}
<div class="progress-bar progress-bar-striped" style="min-width: 20px;"></div>
</div>
<form action="/list" method="POST">
<input type="hidden" name="ID" value="">
<input type="hidden" name="path" value="{{path}}">
</form>
<!-- jQuery Script -->
<script>
var i = rist;
function makeProgress(){
if(i < 100){
i = i + 1;
$(".progress-bar").css("width", i + "%").text(i + " %");
setTimeout("makeProgress()", 100);
}
// Wait for sometime before running this script again
else { document.forms[0].submit(); }
$.ajax({
type:'post',
async:'true',
url:'http://127.0.0.1:5000/ ',
data:{rist},
dataType: 'json',
success: function(data){rist
}
});
};
</script>
</div>
</body>
</html>
this is print(rist) // .py
list = [(h, e, dictionary[e]) for h, e in zip(category_name, category_id)]
x = []
for j in list:
x.append(j)
rist = str(100*(len(x) / len(list)))
print(rist)
1.1235955056179776
2.247191011235955
3.3707865168539324
4.49438202247191
5.617977528089887
6.741573033707865
7.865168539325842
8.98876404494382
10.112359550561797
11.235955056179774
12.359550561797752
13.48314606741573
14.606741573033707
15.730337078651685
16.853932584269664
17.97752808988764
19.101123595505616
20.224719101123593
21.34831460674157
22.47191011235955
23.595505617977526
24.719101123595504
25.842696629213485
26.96629213483146
28.08988764044944
29.213483146067414
30.337078651685395
31.46067415730337
32.58426966292135
33.70786516853933
34.831460674157306
35.95505617977528
37.07865168539326
38.20224719101123
39.325842696629216
40.44943820224719
41.57303370786517
42.69662921348314
43.82022471910113
44.9438202247191
46.06741573033708
47.19101123595505
48.31460674157304
49.43820224719101
50.56179775280899
51.68539325842697
52.80898876404494
53.93258426966292
55.0561797752809
56.17977528089888
57.30337078651685
58.42696629213483
59.55056179775281
60.67415730337079
61.79775280898876
62.92134831460674
64.04494382022472
65.1685393258427
66.29213483146067
67.41573033707866
68.53932584269663
69.66292134831461
70.78651685393258
71.91011235955057
73.03370786516854
74.15730337078652
75.28089887640449
76.40449438202246
77.52808988764045
78.65168539325843
79.7752808988764
80.89887640449437
82.02247191011236
83.14606741573034
84.26966292134831
85.39325842696628
86.51685393258427
87.64044943820225
88.76404494382022
89.8876404494382
91.01123595505618
92.13483146067416
93.25842696629213
94.3820224719101
95.50561797752809
96.62921348314607
97.75280898876404
98.87640449438202
100.0
and it is my flask code
from flask import Flask, render_template, request
from maratang import search
app = Flask(__name__)
#app.route('/')
def test():
return render_template('post.html')
#app.route('/progress', methods=['POST', 'GET'])
def loding():
global result, path, list, error
if request.method == 'POST':
result = request.form
path = request.form['path']
list, error, rist = search(path)
return render_template('progress.html', rist = rist)
#app.route('/list', methods=['POST'])
def post():
if request.method == 'POST':
print(list)
return render_template("result.html", result = result, list = list, error = error)
if __name__ == '__main__':
app.run()
I thought it was right, but there was an error, so I don't know what to do.
I'm trying to integrate a Bokeh chart in my Flask Web Application (which I succeeded), the slider works also perfectly. But I get some extra code around my chart as you can see on the pic below. Can anyone tell me why I get this extra text and how to get rid of it?
Thank you
Here is an excerpt of the code:
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.plotting import figure, output_file, show
#app.route('/graph')
def graph():
x = [x*0.005 for x in range(0, 200)]
y = x
source = ColumnDataSource(data=dict(x=x, y=y))
plot = figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
callback = CustomJS(args=dict(source=source), code="""
var data = source.data;
var f = cb_obj.value
var x = data['x']
var y = data['y']
for (var i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], f)
}
source.change.emit();
""")
slider = Slider(start=0.1, end=4, value=1, step=.1, title="power")
slider.js_on_change('value', callback)
layout = column(slider, plot)
script, div = components({"plot": plot,"slider":column(slider)})
kwargs = {'script': script, 'div': div}
kwargs['title'] = 'bokeh-with-flask'
return render_template('graph.html', **kwargs)
Here is the HTML:
{% extends "base.html" %}
{% block content %}
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh.min.css"
rel="stylesheet" type="text/css">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-widgets.css"
rel="stylesheet" type="text/css">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-tables.css"
rel="stylesheet" type="text/css">
</head>
<body>
<h1>Chart</h1>
{{ div|safe }}
{{ script|safe }}
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-widgets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.2.0/bokeh-tables.js"></script>
</html>
{% endblock %}
I get the following result:
Try replacing
script, div = components({"plot": plot,"slider":column(slider)})
kwargs = {'script': script, 'div': div}
with
script, (plot_div, slider_div) = components((plot, column(slider)))
kwargs = {'script': script, 'plot_div': plot_div, 'slider_div': slider_div}
and
{{ div|safe }}
{{ script|safe }}
with
{{ plot_div|safe }}
{{ slider_div|safe }}
{{ script|safe }}
Alternatively, since you embed them directly one after another, just wrap them together in a column and pass it to components instead of passing multiple roots separately.
EDIT: I tested Eugene's solution, and it works perfectly also!
Ok, I found a solution (even though not very elegant I think) thanks to AKS' response:
There was indeed an issue with "div" as he said.
So I printed it out and I got this:
{'plot': '\n<div class="bk-root" id="8cb7e626-f766-451b-86c9-2a4b0e22fdab" data-root-id="2881"></div>', 'slider': '\n<div class="bk-root" id="37b8cf2e-8889-4c9e-804d-9b6d65fedf0f" data-root-id="2921"></div>'}
I added this to my initial code to modify "div". It was expecting a html type string, and not a dic type string:
a = div['plot']
b = div['slider']
div = a+b
Followed by my previous code:
kwargs = {'script': script, 'div': div}
kwargs['title'] = 'bokeh-with-flask'
I'm using bottle to create a simple retirement calculator of sorts, but I'm having trouble with the template file's handling of python code. For example, I have this code
<%
import statistics, numpy
medianStockReturn = []
def stockReturn():
global medianStockReturn
yearStockReturn = numpy.random.normal(11.4, 19.7, 1000)
yearMedianStockReturn = statistics.median(yearStockReturn)
yearMedianStockReturn = yearMedianStockReturn / 100 + 1
medianStockReturn.append(yearMedianStockReturn)
stockReturn()
end
%>
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Retirement Calculator</title>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="../static/retirementStyle.css">
</head>
<body>
<h2> this is a test; your stock return is {{medianStockReturn}}</h2>
</body>
</html>
However, this code results in an output of: "this is a test; your stock return is []"
As written, the function should append medianStockReturn with a generated value, but it does not, and I am not exactly sure why.
You need to move the end to after the end of function definition above stockReturn()
<%
import statistics, numpy
medianStockReturn = []
def stockReturn():
global medianStockReturn
yearStockReturn = numpy.random.normal(11.4, 19.7, 1000)
yearMedianStockReturn = statistics.median(yearStockReturn)
yearMedianStockReturn = yearMedianStockReturn / 100 + 1
medianStockReturn.append(yearMedianStockReturn)
end
stockReturn()
%>
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Retirement Calculator</title>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="../static/retirementStyle.css">
</head>
<body>
<h2> this is a test; your stock return is {{medianStockReturn}}</h2>
</body>
</html>
My Flask app does calculations based on user form inputs. These calculation take about 10 seconds to complete. The output of those calculations need to be displayed in a div on the same page, next to the form (in a chart / table etc).
I have tried two aproaches. The first, using normal just Flask, reloads the whole page, which is far from ideal. The second approach, using Sijax, updates just the div. But in this case, i don't know how to access the form inputs.
I'm confused how to get this working. Would appreciate any directions!
Approach 1: just flask (downside: whole page reloads)
form_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testpage</title>
</head>
<body>
<form action="{{ url_for('do_the_math') }}" method="post">
A = <input type="number" name="input_A">
B = <input type="number" name="input_B">
<input type="submit" value="Submit">
</form>
<div id="destination_div">A + B = {{ result }}</div>
</body>
</html>
app_normal.py:
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route("/")
def show_home():
return render_template("form_test.html", result='unknown yet')
#app.route("/do_the_math", methods=['POST'])
def do_the_math():
A = request.form.get('input_A')
B = request.form.get('input_B')
sum = float(A) + float(B)
# reloads whole page
return render_template("form_test.html", result=sum)
# what i want: reload just update destination_div with new HTML
# return render_template("#destination_div", "A + B = " + str(sum))
if __name__ == '__main__':
app.run(debug=True)
Approach 2: use Sijax (updates div, but how to access form inputs?)
form_test_sijax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testpage with sijax</title>
<script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</head>
<body>
<form method="post">
A = <input type="number" name="input_A">
B = <input type="number" name="input_B">
<button type="button" onclick="Sijax.request('submit_form');">calc</button>
</form>
<div id="destination_div">A + B = unknown</div>
</body>
</html>
app_sijax.py
from flask import Flask, render_template, g
import flask_sijax
import os
app = Flask(__name__)
# init sijax
app.config["SIJAX_STATIC_PATH"] = os.path.join('.', os.path.dirname(__file__), 'static/js/sijax/')
app.config["SIJAX_JSON_URI"] = '/static/js/sijax/json2.js'
flask_sijax.Sijax(app)
def submit_form_handler(obj_response):
A = 5 # how do get to the values entered in the form?
B = 3
sum = A + B
obj_response.html("#destination_div", "A + B = " + str(sum))
#flask_sijax.route(app, "/")
def show_home():
result = 'unknown'
if g.sijax.is_sijax_request:
g.sijax.register_callback('submit_form', submit_form_handler)
return g.sijax.process_request()
return render_template("form_test_sijax.html")
if __name__ == '__main__':
app.run(debug=True)
You can use ajax with jquery to dynamically update the page with the computed result without having to refresh the page:
In the html file:
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</header>
<body>
<div class='wrapper'>
A = <input type="number" id="input_A">
B = <input type="number" id="input_B">
<button class='get_result'>Calculate</button>
<div class='result'></div>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('click', '.get_result', function(){
var val1 = $("#input_A").val();
var val2 = $("#input_B").val();
$.ajax({
url: "/calculate_result",
type: "get",
data: {val1: val1, val2:val2},
success: function(response) {
$(".result").html('<p>'+response.result.toString()+'</p>');
},
});
});
});
</script>
</html>
Then, in the main app file, create the route to calculate the final result:
#app.route('/calculate_result')
def calculate_result():
a = int(flask.request.args.get('val1'))
b = int(flask.request.args.get('val2'))
return flask.jsonify({"result":a+b})
I have a small flask app I am using it to:
Make an HTML page with a leaflet map
Take user input from the HTML page...
Run calculations on that input using certain python modules
Return those variable to JS functions in the page to populate the map
I cannot get ANYTHING but lat and lng to return into my HTML {{}} flask variables.
Here is my HTML page:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin="">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<title>Page Title</title>
<meta charset="utf-8"/>
<style>
#mapid { height: 300px; }
</style>
<body>
<form method="POST">
Latitude to PY: <input name="lat" id="lat"/>
<br/>
Longitude to PY: <input name="lng" id="lng"/>
<br/>
<button>Get data</button>
</form>
{% if lat1 != None and lng1 != None %}
{{lat1}},{{lng1}}
<script>
var lat1 = {{lat1}}
var lng1 = {{lng1}}
</script>
{% endif %}
{% if point != None %}
<p>{{point}}</p>
{% endif %}
{% if GeJ != None %}
{{GeJ}}
<script>
var GeJ = {{GeJ}}
</script>
{% endif %}
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.high-contrast',
accessToken: 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ'
}).addTo(mymap);
function zoomTo() {
mymap.panTo(new L.LatLng(lat1, lng1));
}
function addGJ(){
var myLayer = L.geoJson(GeJ).addTo(mymap);
}
window.onload = zoomTo();
window.onload = addGJ();
</script>
</body>
</html>
Here is my Flask Python code:
from flask import Flask, render_template, request, flash, redirect, url_for,jsonify
from forms import RegistrationForm
import json
import osmnx as ox
import networkx as nx
import matplotlib.pyplot as plt
from networkx.readwrite import json_graph
import pandas as pd
import mplleaflet
app = Flask(__name__)
app.config.update(dict(
SECRET_KEY="powerful secretkey",
WTF_CSRF_SECRET_KEY="a csrf secret key"
))
#app.route('/')
def my_form():
return render_template('map.html')
#app.route('/', methods=['GET', 'POST'])
def my_form_post():
lat = (request.form['lat'])
lng = (request.form['lng'])
lat = lat
lng = lng
point = (lat,lng)
G = ox.core.graph_from_point(point, distance = 500, network_type='walk')
fig, ax = ox.plot_graph(G)
GJ = mplleaflet.fig_to_geojson(fig=ax.figure)
#return lat, ",", lng
return render_template('map.html', lat1=lat, lng1=lng, GeJ=GJ, point="test_string")`
if __name__ == "__main__":
app.run(host='0.0.0.0',port=5000,debug=True)
The Flask app is working fine so the file structure is not a concern. I just cannot get any other variables to return into my HTML. I even tried making little string dummy variables other that the real ones. No Dice.
Thanks
You could try using the builtin none value http://jinja.pocoo.org/docs/templates/#none
Then do something like:
{% if lat1 is not none and lng1 is not none %}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin="">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<title>Page Title</title>
<meta charset="utf-8"/>
<style>
#mapid { height: 300px; }
</style>
<body>
<form method="POST">
Latitude to PY: <input name="lat" id="lat"/>
<br/>
Longitude to PY: <input name="lng" id="lng"/>
<br/>
<button>Get data</button>
</form>
{% if lat1 is not Null and lng1 is not Null %}
{{lat1}},{{lng1}}
<script>
var lat1 = {{lat1}}
var lng1 = {{lng1}}
</script>
{% endif %}
{% if point != None %}
<p>{{point}}</p>
{% endif %}
{% if GeJ != None %}
{{GeJ}}
<script>
var GeJ = {{GeJ}}
</script>
{% endif %}
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.high-contrast',
accessToken: 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ'
}).addTo(mymap);
function zoomTo() {
mymap.panTo(new L.LatLng(lat1, lng1));
}
function addGJ(){
var myLayer = L.geoJson(GeJ).addTo(mymap);
}
window.onload = zoomTo();
window.onload = addGJ();
</script>
</body>
</html>
It would help if you provided an example of what exactly happens when you pass all the values.
Otherwise, what according to me, could be causing the problem is that the 'Null' object in python is the singleton None. The best way to check things for "Noneness" is to use is not None or better still, something as simple as:
{%if lat%} {{lat}} {% endif %}
Also, can't you assign GeJ to the var GeJ within the div instead of putting a line of JS in an abrupt manner up there?
P.S. I wanted to add this as a comment, but don't have enough reputation. Apologies.