Previously i asked about how to properly render a pygal in a flask app;How to embedding a pygal chart on a flask app? . now i am asking how would you properly position it? this is what i mean by positioning it, i want to place the chart in the middle of my screen or any screen.
My code:
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>
<head>
<title>Tkboard</title>
</head>
<div class="top_bar">
<h1 style="font-size:25px"><p style="font-family:verdana">Tkboard</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
output = f'''{top_bar()}
<img src="{line_chart.render_data_uri()}" />
'''
return output
__main__()
url=(f'http://{all_val[0]}:{all_val[1]}')
web.open(url)
app.run(all_val[0],all_val[1])
test()
It is HTML/CSS problem.
Add <div> to wrap <img> and add text-align: center CSS atribute to wrapper <div>.
import socket
import webbrowser as web
import pygal
from flask import Flask
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;
height: 100px;
}
.image_wrapper {
text-align: center;
margin-top: 100px;
}
</style>
<head>
<title>Tkboard</title>
</head>
<div class="top_bar">
<h1 style="font-size:25px"><p style="font-family:verdana">Tkboard</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
output = f"""{top_bar()}
<div class="image_wrapper">
<img src="{line_chart.render_data_uri()}" />
</div>
"""
return output
__main__()
url = f"http://{all_val[0]}:{all_val[1]}"
web.open(url)
app.run(all_val[0], all_val[1])
test()