Plotting with Bokeh

Thursday , 6, August 2020

Bokeh is a python module designed for plotting and graphing data in a web browser. I played around with this using Jupyter notebooks, Bokeh server scripts, and embedded in a Flask app.

I was able to generate a plot with a Bitcoin price ticker, which seems like a nice accomplishment for a starter project. I added some buttons to choose alternate cryptocurrencies to chart. It was a good experience, read on for the details.

Project Overview

My project is simply taking price data, scraped from the website using BeautifulSoup, and plotting it into a web page.If you want to do this, you might use a data source that updates more frequently then every 3 minutes. I’m using a line graph, even though many are supported. I’ll surely play with a few more.

I have datetime and price as my X and Y axis values, and new points get added on to the right side. Interally it’s just a Dict storing a set of points. I have buttons which can be clicked on to restart the chart using another cryptocurrency choice. They can be any cryptocurrency name as used by my data source in its URLs.

The ticker code is here if you want to play around. I’m using Bokeh version 1.4.0 if that helps. Basically there were 4 things to do: setup the plot, setup the data, add new points, and change the cryptocurrency being plotted. A few quick comments on each:

Setting Up the Plot

I’m just choosing some colors and glyphs (circles and lines) that I’ll need, as well as some radio buttons to let the user choose between a few cryptocurrency choices. Finally, I setup the hover display of the price for each point on the graph.

Setting Up the Data

I’m using a ColumnDataSource since that seems like the thing to do. get_coin_price() function is fetching new data for the graph. As you can see it is scraping a dedicated page on CoinMarketCap for the latest price, but the coin name that is used to construct the URL is a variable so I can request different ones.

Updating the Graph by Adding Data Points

This function is called to add an additional data point by calling the previous function to fetch new data. Note I am only keeping the 72 most recent data points.

Change the Ticker from One Coin to Another

This was easy – just get rid of the data from the previous cryptocurrency, and call update to add the first data point.

I found trying Bokeh in Jupyter easiest in terms of playing around and getting started. Bokeh serve scripts are great, for generating dynamic pages, but the integration with Flask/Django seems weak. I was doing it by running both sets of scripts, but perhaps there is a module I don’t know about that allows easier integration.


Jupyter notebooks was useful for learning Bokeh since tweaking is easy, and it is already running in the browser so any output can simply be viewed as a web page. That’s the point of Bokeh. Using Jupyter allows those nice interactive session benefits like easily inspecting the data or testing complicated expressions.

I left this running overnight to get the main image, since my data source was relatively slow. I don’t care about price movements from second to second, but getting a plot full of points takes too long with one dot per 3 minutes. If I were going to use this as an investment tool, I would use some API to get data points frequently. It also needs some more glyphs and do some calculations, like using lines to show moving averages and such.