Menu
I would like to show a pandas dataframe as a boostrap-html table with flask, thus I tried the following:
The data (.csv table):
Name Birth Month Origin Age Gender
Carly Jan Uk 10 F
Rachel Sep UK 20 F
Nicky Sep MEX 30 F
Wendy Oct UK 40 F
Judith Nov MEX 39 F
The python code (python_script.py):
from flask import *
import pandas as pd
app = Flask(__name__)
@app.route("/tables")
def show_tables():
data = pd.read_csv('table.csv')
data.set_index(['Name'], inplace=True)
data.index.name=None
females = data.loc[data.Gender=='f']
return render_template('view.html',tables=[females.to_html(classes='female')],
titles = ['na', 'Female surfers'])
if __name__ == "__main__":
app.run(debug=True)
The templates directory (view.html):
<!doctype html>
<title>Simple tables</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Surfer groups</h1>
{% for table in tables %}
<h2>{{titles[loop.index]}}</h2>
{{ table|safe }}
{% endfor %}
</div>
The boostrap style.css:
body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
a, h1, h2 { color: #377ba8; }
h1, h2 { margin: 0; }
h1 { border-bottom: 2px solid #eee; }
h2 { font-size: 1.2em; }
table.dataframe, .dataframe th, .dataframe td {
border: none;
border-bottom: 1px solid #C8C8C8;
border-collapse: collapse;
text-align:left;
padding: 10px;
margin-bottom: 40px;
font-size: 0.9em;
}
.male th {
background-color: #add8e6;
color: white;
}
.female th {
background-color: #77dd77;
color: white;
}
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
tr:hover { background-color: #ffff99;}
So far, when I run my python_script.py:
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger pin code: 123-221-151
I got two issues: a Not Found error and when I go to http://127.0.0.1:5000/tables I got an builtins.KeyError KeyError: 'Name'. Any idea of how to show a pandas dataframe as a table with pandas and flask?.
200
The problem here is with the data.csv file. When you do read_csv() on it:
In [45]: pd.read_csv("/tmp/a.csv")
Out[45]:
Name Birth Month Origin Age Gender
0 Carly Jan Uk 10 F
1 Rachel Sep UK 20 F
2 Nicky Sep MEX 30 F
3 Wendy Oct UK 40 F
4 Judith Nov MEX 39 F
In [46]: df = pd.read_csv("/tmp/a.csv")
In [47]: df.columns
Out[47]: Index([u'Name Birth Month Origin Age Gender'], dtype='object')
As you can see, there is only one column, instead of four, because it can't understand that 'Birth Month' is supposed to be one column. To fix this, you can open the file and change the first line to:
"Name" "Birth Month" "Origin" "Age" "Gender"
And, then while reading the csv:
In [62]: pd.read_csv("/tmp/a.csv", sep='\s+', quotechar='"')
Out[62]:
Name Birth Month Origin Age Gender
0 Carly Jan Uk 10 F
1 Rachel Sep UK 20 F
2 Nicky Sep MEX 30 F
3 Wendy Oct UK 40 F
4 Judith Nov MEX 39 F
Or you could have also just changed Birth Month to Birth_Month
For the '404 Not Found' error, the problem is that you have not defined any route for '/'. So, (after editing the header of the csv) I would do something like:
from flask import *
import pandas as pd
app = Flask(__name__)
@app.route("/tables")
def show_tables():
data = pd.read_csv("/tmp/a.csv", sep='\s+', quotechar='"')
data.set_index(['Name'], inplace=True)
data.index.name=None
females = data.loc[data.Gender=='F']
return render_template('view.html',tables=[females.to_html(classes='female')],
titles = ['na', 'Female surfers'])
@app.route("/")
def show_home():
return "Hello Guys! Visit: <a href='/tables'> this link </a>"
if __name__ == "__main__":
app.run(debug=True)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
