|
| 1 | +title: Building Bar Charts with Bokeh, Flask and Python 3 |
| 2 | +slug: bar-charts-bokeh-flask-python-3 |
| 3 | +meta: How to build bar charts with the Bokeh data visualization library, Flask and Pyton 3. |
| 4 | +category: post |
| 5 | +date: 2017-05-24 |
| 6 | +modified: 2017-05-24 |
| 7 | +headerimage: /img/170524-bar-charts-bokeh-flask/header.jpg |
| 8 | +headeralt: Python, Flask and Bokeh logos. |
| 9 | + |
| 10 | + |
| 11 | +[Bokeh](/bokeh.html) is a powerful open source Python library that allows |
| 12 | +developers to generate JavaScript data visualizations for their web |
| 13 | +applications *without writing any JavaScript*. Let's use the |
| 14 | +[Flask](/flask.html) [web framework](/web-frameworks.html) with Bokeh to |
| 15 | +create custom bar charts in a Python web app. |
| 16 | + |
| 17 | + |
| 18 | +## Our Tools |
| 19 | +This tutorial works with either [Python 2 or 3](/python-2-or-3.html), |
| 20 | +but Python 3 is strongly recommended for new applications. In addition |
| 21 | +to Python throughout this tutorial we will also use the following |
| 22 | +[application dependencies](/application-dependencies.html): |
| 23 | + |
| 24 | +* [Flask](/flask.html) web framework, 0.12 |
| 25 | +* [Bokeh](/bokeh.html) data visualization library, version 0.12.5 |
| 26 | +* [pandas](/pandas.html) data structures and analysis library, |
| 27 | + version 0.20.1 |
| 28 | +* [pip](https://pip.pypa.io/en/stable/) and |
| 29 | + [virtualenv](https://virtualenv.pypa.io/en/latest/), which come |
| 30 | + packaged with Python 3, to install and isolate the Flask and Bokeh |
| 31 | + libraries from any other Python projects you might be working on |
| 32 | + |
| 33 | +If you need help getting your |
| 34 | +[development environment](/development-environments.html) configured |
| 35 | +before running this code, take a look at |
| 36 | +[this guide for setting up Python 3 and Flask on Ubuntu 16.04 LTS](/blog/python-3-flask-green-unicorn-ubuntu-1604-xenial-xerus.html) |
| 37 | + |
| 38 | +All code in this blog post is available open source under the MIT license |
| 39 | +on GitHub under the blog-code-examples repository. Use it and abuse it |
| 40 | +as you like for your own applications. |
| 41 | + |
| 42 | + |
| 43 | +## Installing Bokeh and Flask |
| 44 | +Create a fresh virtual environment for this project to isolate our |
| 45 | +dependencies using the following command in the terminal. I typically run |
| 46 | +this command within a separate `venvs` directory where all my virtualenvs |
| 47 | +are store. |
| 48 | + |
| 49 | +```bash |
| 50 | +python3 -m venv barchart |
| 51 | +``` |
| 52 | + |
| 53 | +Activate the virtualenv. |
| 54 | + |
| 55 | +```bash |
| 56 | +source barchart/bin/activate |
| 57 | +``` |
| 58 | + |
| 59 | +The command prompt will change after activating the virtualenv: |
| 60 | + |
| 61 | +<img src="/img/170524-bar-charts-bokeh-flask/activate-virtualenv.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #aaa"> |
| 62 | + |
| 63 | +Keep in mind that you need to activate the virtualenv in every new terminal |
| 64 | +window that you want this virtualenv to be used for your project. |
| 65 | + |
| 66 | +Bokeh and Flask are installable into the now-activated virtualenv |
| 67 | +using pip. Run this command to get the appropriate Bokeh and Flask |
| 68 | +versions. |
| 69 | + |
| 70 | +``` |
| 71 | +pip install bokeh==0.12.5 flask==0.12.2 pandas==0.20.1 |
| 72 | +``` |
| 73 | + |
| 74 | +After a brief download and installation period our required dependencies |
| 75 | +should be installed within our virtualenv. Look for output like the |
| 76 | +following to confirm everything worked. |
| 77 | + |
| 78 | +``` |
| 79 | +Installing collected packages: six, requests, PyYAML, python-dateutil, MarkupSafe, Jinja2, numpy, tornado, bokeh, Werkzeug, itsdangerous, click, flask, pytz, pandas |
| 80 | + Running setup.py install for PyYAML ... done |
| 81 | + Running setup.py install for MarkupSafe ... done |
| 82 | + Running setup.py install for tornado ... done |
| 83 | + Running setup.py install for bokeh ... done |
| 84 | + Running setup.py install for itsdangerous ... done |
| 85 | +Successfully installed Jinja2-2.9.6 MarkupSafe-1.0 PyYAML-3.12 Werkzeug-0.12.2 bokeh-0.12.5 click-6.7 flask-0.12.2 itsdangerous-0.24 numpy-1.12.1 pandas-0.20.1 python-dateutil-2.6.0 pytz-2017.2 requests-2.14.2 six-1.10.0 tornado-4.5.1 |
| 86 | +``` |
| 87 | + |
| 88 | +Now we can start building our web application. |
| 89 | + |
| 90 | + |
| 91 | +## Starting Our Flask App |
| 92 | +We are going to first code a basic Flask application then add our bar |
| 93 | +chart to the rendered page. |
| 94 | + |
| 95 | + |
0 commit comments