Bokeh Server plot not updating as wanted, also it keeps shifting and axis information vanishes

Question

I want the plot to update, once I click the "refresh button", with the new data. But the old data stays in the plot, also it keeps shifting down right and the ticks vanish.

At the beginning, the plot looks what I expected (except the X axis information. As a side problem, I I looked up DataSpec() in Bokeh properties but not sure how to pass the accept_datetime=False to the x argument in the line plot. My code kind of looks like this.)

The data directory looks like

root-|
     |-weeklydata1.pkl
     |-weeklydata2.pkl
     |-datashow.py

Here is the pickled datafiles.

from bokeh.layouts import column, row
from bokeh.models.widgets import Button
from bokeh.plotting import figure, show
from pandas import *

# Callbacks
def update_data():
    # Set up plot
    global p
    global f
    # p = figure(title="testing plot")

    # Set up data
    # weeklybdxdata(1)
    print("reading new data")
    df1 = read_pickle('weeklydata2.pkl')
    for j in df1.columns:
        p.line(df1.index,
               df1[j],
               legend=j,
               line_color=f[j])
        p.circle(df1.index,
                 df1[j],
                 size=10,
                 color=f[j])
    return p

# Set up data
df =read_pickle('weeklydata1.pkl')
f = dict(OAT='green', SAT='orange', OAH='red')

# Set up plot
p = figure(title="testing plot")

for i in df.columns:
    p.line(df.index,
           df[i],
           legend=i,
           line_color=f[i])
    p.circle(df.index,
             df[i],
             size=10,
             color=f[i])

# Set up widgets
button = Button(label='Refresh')
button.on_click(update_data)
inputs = column(button)

curdoc().add_root(row(inputs, p, width=800))
curdoc().title = "Test Plot"

I avoided using bokeh.models.ColumnDataSource as I couldn't find some good examples on how to pass dataframes.

After I launch the code with bokeh serve datashow.py, the initial plot looks like this(small gripe: but with the xaxis in milliseconds)

After I click refresh, and successively do refresh multiple times, the plot keeps shifting and axis infor vanishes.

I am on the latest version of Bokeh 1.4.0

Answer 1

By default, Bokeh auto-ranges over all available glyphs. And your code above infinitely accumulates new glyphs. So, the result you see is expected. You could try actively removing the previous circle and line glyphs in your update function, but that's not what I would recommend. The best way to update plots, the way that Bokeh is optimized to do efficiently and well, is to set up all your glyphs once, and then later, update only the data for them.

That is, you need to use ColumnDataSource directly. I notice you say:

I avoided using bokeh.models.ColumnDataSource as I couldn't find some good examples on how to pass dataframes.

I'm not sure where you were looking. There are lots of examples both in the docs and in the examples folder of the repo that use CDS and Pandas together. You can initialize a CDS by adapting a DataFrame directly:

source = ColumnDataSource(df)

Then later when you want to update the source, you can do;

source = ColumnDataSource.from_df(new_df)

Here is a complete prototypical example:

import pandas as pd
from bokeh.layouts import column
from bokeh.models import Button, ColumnDataSource
from bokeh.plotting import figure
from bokeh.io import curdoc

df = pd.DataFrame(dict(x=[1,2,3], y1=[4,5,6], y2=[2,3,4]))

source = ColumnDataSource(df)

plot = figure()
plot.line('x', 'y1', line_width=3, source=source)
plot.line('x', 'y2', line_width=3, color="red", source=source)

def update():
    new_df = pd.DataFrame(dict(x=[1,2,3], y1=[6,5,4], y2=[4,3,2]))
    source.data = ColumnDataSource.from_df(new_df)

button = Button()
button.on_click(update)

curdoc().add_root(column(button, plot))

small gripe: but with the xaxis in milliseconds

You can certainly have a datetime axis, if that is what you are after:

https://docs.bokeh.org/en/latest/docs/user_guide/plotting.html#datetime-axes