I'm working with pygal and I want to embed a pygal chart in a flask app.
However, I want to put a top-bar on the flask app. I don't get any errors, but only the top bar is shown. Nothing else is shown. The pygal chart does not even render.
Here's my code for your reference:
import pygal
from flask import Flask
import webbrowser as web
import socket
def test(name=None):
def top_bar():
return('''
<style>
.top_bar {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
}
</style>
<div class="top_bar">
<h1 style="font-size:25px"><p style="font-family:verdana">Test!</p></h1>
</div>
''')
app = Flask(__name__)
def __info__():
hostname = socket.gethostname()
ip = socket.gethostbyname(hostname)
port = int(5969)
all_val = [str(ip),port]
return all_val
all_val = __info__()
@app.route('/')
def __main__():
line_chart = pygal.Line(width=550, height=350,explicit_size=True)
line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
#line_chart.render()
# Mixed
return(f'''
{line_chart.render_response()}
{top_bar()}
'''
)
__main__()
url=(f'http://{all_val[0]}:{all_val[1]}')
web.open(url)
app.run(all_val[0],all_val[1])
test()
See the Output section of the docs.
The render_response
method returns a response object which is designed to be returned directly from a Flask route, not manually added to a template as per your code. To stick with your own approach, you could do this with the render_data_uri
method. For example, by changing the end of your __main__
function to instead:
# Mixed
output = f'''{top_bar()}
<img src="{line_chart.render_data_uri()}" />'''
return output