Search code examples
pythonpandasnumpydatetimebokeh

Bokeh not displaying plot even after converting X and Y values into NumPy arrays and using a DateTime axis

Bokeh is not displaying my plot. I will give the whole code but mark the area I am suspicious of with Python comments.

import pandas
import numpy

from bokeh.layouts import column
from bokeh.models import ColumnDataSource, RangeTool
from bokeh.plotting import figure, output_file, show

from selenium import webdriver
from selenium.webdriver.edge.service import Service
from webdriver_manager.microsoft import EdgeChromiumDriverManager
from selenium.webdriver.common.by import By

driver = webdriver.Edge(service=Service(EdgeChromiumDriverManager().install()))
driver.get("https://www.statmuse.com/money/ask/bitcoin+value+graph+2020-2021+monthly")
driver.implicitly_wait(10)
html = driver.find_element(By.CLASS_NAME, "kaojVddNm5wDHXzg63Rp").get_attribute("outerHTML")
driver.close()

df = pandas.DataFrame(pandas.read_html(html)[0][::-1])

df["DATE"] = pandas.to_datetime(df["DATE"])
dates = df["DATE"].to_numpy(dtype="datetime64[M]")

source = ColumnDataSource(data=dict(date=dates, close=list(df["CLOSE"])))

# -------------------------------------------------------------------------------------
# ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Suspicious area where the error might be ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

p = figure(plot_height=300, plot_width=1200, tools="", toolbar_location=None,
           x_axis_type="datetime", x_axis_location="above",
           background_fill_color="#efefef", x_range=(dates[9], dates[18]))

p.line(x="date", y="close", source=source)

select = figure(title="Drag the middle and edges of the selection box to change the range above",
                plot_height=130, plot_width=1200, y_range=p.y_range,
                x_axis_type="datetime", y_axis_type=None,
                tools="", toolbar_location=None, background_fill_color="#efefef")

# ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ Suspicious area where the error might be ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
# -------------------------------------------------------------------------------------

range_tool = RangeTool(x_range=p.x_range)

range_tool.overlay.fill_color = "navy"
range_tool.overlay.fill_alpha = 0.2

select.line(x="date", y="close", source=source)
select.ygrid.line_color = None
select.add_tools(range_tool)
select.toolbar.active_multi = range_tool

output_file("btc_price_interactive.html", title="Bitcoin Price Chart")
show(column(p, select))

When running the code, I see nothing but two blank grey plots and a title that I specified in the "Suspicious Area".

picture of the resulting plots that I am getting

I then booted up the Edge Console and saw that there were several errors, 5 to be exact. 4 of them were warnings which stated [bokeh] could not set initial ranges and last one was an error which stated Uncaught (in promise) Error: invalid bbox {x0: NaN, y0: 27, x1: NaN, y1: 125}

There is this StackOverflow answer that I found which provides two solutions for my error to work. I had already implemented the second solution beforehand as you can see -- I have already converted the datetime values to datetime NumPy arrays and even though the values are strings, the axis for the plots is a datetime axis which means it should work as stated in the second solution but it doesn't work.

I will be extremely grateful if you could help me fix my mistakes. (its probably like an obvious mistake like a spelling mistake which I am unable to locate)

Solution

  • As I mentioned in my comment, something is wrong with your data. I copy'n'past your code and created some dummy data, which is working fine.

    Minimal Example

    import pandas as pd
import numpy as np

from bokeh.layouts import column
from bokeh.models import ColumnDataSource, RangeTool
from bokeh.plotting import figure, output_notebook, show
output_notebook()

#dummy data
df = pd.DataFrame({'close':np.random.randint(100,200,20)}, index=pd.date_range('2020-01-01', periods=20, freq='M'))
df.index.name = 'date'

source = ColumnDataSource(df)

# figures
p = figure(plot_height=300, plot_width=1200, tools="", toolbar_location=None,
           x_axis_type="datetime", x_axis_location="above",
           background_fill_color="#efefef", x_range=(df.index[9], df.index[18]))

p.line(x="date", y="close", source=source)

select = figure(title="Drag the middle and edges of the selection box to change the range above",
                plot_height=130, plot_width=1200, y_range=p.y_range,
                x_axis_type="datetime", y_axis_type=None,
                tools="", toolbar_location=None, background_fill_color="#efefef")
range_tool = RangeTool(x_range=p.x_range)

range_tool.overlay.fill_color = "navy"
range_tool.overlay.fill_alpha = 0.2

select.line(x="date", y="close", source=source)
select.ygrid.line_color = None
select.add_tools(range_tool)
select.toolbar.active_multi = range_tool

show(column(p, select))

    Output

    range tool

    Further readings

    1. The bokeh documentation has an example for the use of the range tool with some sampledata.
    2. It looks like you are trying to plot a candlestick plot. Bokeh docs has an example for this, too.
    3. On SO exists a modification of the candlestick example here, which can be modified with a range-tool easily.