I am trying to build a grid plot that updates based on value selected from 'Select' widget using Bokeh.
The graph works but there is no interaction between the widget and the graph. I am not sure how to do this. The goal is to use the 'Select' to update dfPlot then follow the remaining steps.
Here is what i have so far:
output_file('layout.html')
select = Select(title="Option:", options= list(dfExpense['Ident'].unique()), value= "VALUE")
def update_plot(attr, old, new):
dfPlot = dfExpense[dfExpense['Ident'] == select.value]
select.on_change('value', update_plot)
d = []
for x in dfPlot['Account'].unique():
d.append(f's_{x}')
plt = []
for i, x in enumerate(dfPlot['Account'].unique()):
dftemp = dfPlot[dfPlot['Account']==gl]
source1 = ColumnDataSource(dftemp)
d[i] = figure(plot_width = 250, plot_height = 250)
d[i].circle('X', 'Amount', source = source1)
plt.append(d[i])
grid= gridplot([i for i in plt], ncols = 6)
l = row(grid, select)
show(l)
curdoc().add_root(l)
Thanks!
Someone else will probably give you a better answer. I'll just say, I think you might be doing things completely wrong for what you are trying to do (I did the same thing when starting to work with Bokeh).
My understanding after a bit of experience with Bokeh, as it relates to your problem, is as follows:
Using curdoc to make an interactive widget based Bokeh plot means you are using Python to interact with the plot, meaning that you must use a Bokeh server, not just use a .html file. (as a corollary, you won't be using show or output file) https://docs.bokeh.org/en/latest/docs/user_guide/server.html
You can still make a standalone .html file and make it have interactive widgets like sliders, but you will have to write some Javascript. You'll most likely want to do this by utilizing CustomJS within Bokeh, which makes it relatively easy.
https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html
I had a similar problem, wanting interactivity without using a Python Bokeh server. CustomJS ended up serving my needs quite well, and even though I'm a novice at Javascript, they make it pretty easy (well, especially if your problem is similar to the examples, it can get tricky otherwise but still not very hard).
Related
I have a Bokeh figure in a notebook (VS Code), which I would like to update when the x_range is changed. To enable callbacks from JS to Python, I wrap the figure in a Panel panel:
from bokeh.plotting import figure, curdoc
import panel as pn
pn.extension(comms='vscode')
fig = figure()
fig.circle([1, 2, 3], [4, 5, 6])
tai = pn.widgets.input.TextAreaInput(sizing_mode='stretch_both')
panel = pn.Row(pn.pane.Bokeh(fig), tai)
def change_callback(attr, old, new):
tai.value += f'{fig.x_range.start}, {fig.x_range.end}\n'
fig.x_range.on_change('start', change_callback)
fig.x_range.on_change('end', change_callback)
panel
In this example, instead of actually updating the figure, I have an additional TextAreaInput to log callback events. This is what it looks like:
The problem is that every change of x_range leads to four events, and the figure update might take a second. (Two events make sense because I have two callbacks, but why is every event sent twice?) I would therefore like to prevent the update from being performed four times.
Looking at the Bokeh documentation, there is a method add_next_tick_callback. The idea would be to add this callback whenever an event occurs, but also remove an old callback if it exists. Something like
ntc = None
def tick_callback():
tai.value += f'{fig.x_range.start}, {fig.x_range.end}\n'
def change_callback(attr, old, new):
global ntc
doc = curdoc()
if ntc is not None:
doc.remove_next_tick_callback(ntc)
ntc = doc.add_next_tick_callback(tick_callback)
tai.value += f'{ntc}\n'
fig.x_range.on_change('start', change_callback)
fig.x_range.on_change('end', change_callback)
The figure update would then be performed in tick_callback.
This doesn't work. change_callback still gets called and creates a series of NextTickCallback objects, but tick_callback never gets called.
I thought this might be due to curdoc() not returning the correct Bokeh document in the context of Panel. There is also fig.document, which however gives the same document as curdoc(). And there is pn.state which has an add_periodic_callback method, but not add_next_tick_callback.
How do I use add_next_tick_callback for a Panel-wrapped Bokeh figure?
I have a little Bokeh plot with data points and associated text labels. What I want is for the text labels to only appear when the user selects points with the box select tool. This gets me close:
from bokeh.plotting import ColumnDataSource,figure,show
source = ColumnDataSource(
data=dict(
x=test[:,0],
y=test[:,1],
label=[unquote_plus(vocab_idx[i]) for i in range(len(test))]))
TOOLS="box_zoom,pan,reset,box_select"
p = figure(plot_width=400, plot_height=400,tools=TOOLS)
p.circle(x='x',y='y', size=10, color="red", alpha=0.25,source=source)
renderer = p.text(x='x',y='y',text='label',source=source)
renderer.nonselection_glyph.text_alpha=0.
show(p)
This is close, in that if I draw a box around some points, those text labels are shown and the rest are hidden, but the problem is that it renders all the text labels to start (which is not what I want). The initial plot should have all labels hidden, and they should only appear upon a box_select.
I thought I could start by rendering everything with alpha=0.0, and then setting a selection_glyph parameter, like this:
...
renderer = p.text(x='x',y='y',text='label',source=source,alpha=0.)
renderer.nonselection_glyph.text_alpha=0.
renderer.selection_glyph.text_alpha=1.
...
But this throws an error:
AttributeError: 'NoneType' object has no attribute 'text_alpha'
When trying to access the text_alpha attribute of selection_glyph.
I know I could use a hover effect here or similar, but need the labels to default to not being visible. An alternative, but not ideal, solution would be to have a toggle button that switches the labels on and off, but I'm not sure how to do that either.
What am I doing wrong here?
As of version 0.11.1, the value of selection_glyph is None by default. This is interpreted by BokehJS as "don't do anything different, just draw the glyph as normal". So you need to actually create a selection_glyph. There are two ways to do this, both demonstrated here:
http://docs.bokeh.org/en/latest/docs/user_guide/styling.html#selected-and-unselected-glyphs
Basically, they are
by hand
Create an actual Circle Bokeh model, something like:
selected_circle = Circle(fill_alpha=1, fill_color="firebrick", line_color=None)
renderer.selection_glyph = selected_circle
OR
using glyph method parameters
Alternatively, as a convenience Figure.circle accepts paramters like selection_fill_alpha or selection_color (basically any line or fill or text property, prefixed with selection_) :
p.circle(..., selection_color="firebrick")
Then a Circle will be created automatically and used for renderer.selection_glyph
I hope this is useful information. If so, it highlights that there are two possible ways that the project could be improved:
updating the docs to be explicit and highlight that renderer.selection_glyph is None by default
changing code so that renderer.selection_glyph is just a copy of renderer.glyph by default (then your original code would work)
Either would be small in scope and ideal for a new contributor. If you would be interested in working up a Pull Request to do either of these tasks, we (and other users) would certainly be grateful for the contribution. In which case, please just make an issue first at
https://github.com/bokeh/bokeh/issues
that references this discussion, and we can provide more details or answer any questions.
I'm new to Bokeh and Python, and this is my first Stack Overflow question as well.
I'm using Bokeh to plot trajectory profiles of particles diffusing in the brain, but have it be animated. I have been able to successfully create a program that plots the points, but once all the points are plotted, it stops. I want to be able to loop the animation so that once all the points are plotted, it clears itself and starts over.
I am still very unfamiliar with coding terms, and I wasn't able to find something that could do this. I thought I was on the right track with importing using the reset function inside an if statement, but it doesn't seem to work. I have looked at the following as well for reference:
How to animate a circle using bokeh
Here is my code so far plotting a random trajectory:
import numpy as np
from bokeh.plotting import figure, show, gridplot, vplot, hplot, curdoc
from bokeh.io import output_notebook
from bokeh.client import push_session
from bokeh.core.state import State as new
# This is where the actual coding begins.
b = np.random.rand(300, 3)
xlist = b[:, 1]
ylist = b[:, 2]
# create a plot and style its properties. Change chart title here.
p = figure(title='PEG_PLGA15k_F68_R2_P81', title_text_font_size='13pt',
x_range=(min(xlist), max(xlist)), y_range=(min(ylist), max(ylist)),)
# add a text renderer to out plot (no data yet)
r = p.line(x=[], y=[], line_width=3, color='navy')
session = push_session(curdoc())
i = 0
ds = r.data_source
# create a callback that will add a number in a random location
def callback():
global i
ds.data['x'].append(xlist[i])
ds.data['y'].append(ylist[i])
ds.trigger('data', ds.data, ds.data)
if i < xlist.shape[0] - 1:
i = i + 1
else:
new.reset()
# Adds a new data point every 67 ms. Change at user's discretion.
curdoc().add_periodic_callback(callback, 67)
session.show()
session.loop_until_closed()
If all you want is to restart the animation once you reach some condition (like "all points have been plotted") you can just reset the DataSource. So, for instance, on your example you should have:
else:
i = 0
ds.data['x'] = []
ds.data['y'] = []
instead of:
else:
new.reset()
and that should do the trick. Just use your datasource... State is a more general component that should be used on different level and not to manage plot glyphs and datasources.
A couple of quick notes here:
On your question you've mentioned a link to the 0.10 version documentation but from your code I can tell you are not using a newer version (0.11.x). Always be sure to use the right docs for the version of Bokeh you are using since there might be a few changes between one version and another before the project reach 1.0.
You don't need to call ds.trigger('data', ds.data, ds.data) since bokeh property system will automatically detect your changes to the datasource fields inside your callback
You are designing/running your script as a bokeh script that uses a client session to the server (so you'll have a running instance of bokeh server somewhere and your script communicates with it). I'd suggest you to consider running your code as a Bokeh App instead, so your session and your code run inside the bokeh server instance. You can see more details about the difference at the bokeh server section on the official docs.
I have a Python Bokeh plot containing multiple lines, Is there a way I can interactively switch some of these lines on and off?
p1.line(Time,Temp0,size=12,color=getcolor())
p1.line(Time,Temp1,size=12,color=getcolor())
p1.line(Time,Temp2,size=12,color=getcolor())
p1.line(Time,Temp3,size=12,color=getcolor())
....
show(p1)
I just came across this problem myself in a similar scenario. In my case, I also wanted to do other operations on it.
There are 2 possible approaches:
1.) Client-server approach
2.) Client only approach
1.) Client Server Approach ak Bokeh Server
One way how you can achieve this interactivity is by using the bokeh server which you can read more about here. I will describe this way in more detail since at this point, I am a bit more familiar with it.
Going by your example above, if I were to use the bokeh serve, I would first setup a ColumnDataSource like so:
source = ColumnDataSource(data = dict(
time = Time,
temp0 = [],
temp1 = [],
temp2 = [],
temp3 = [],
)
Next I would setup a widget that allows you to toggle what temperatures to show:
multi_select = MultiSelect(title="Option:", value=["Temp1"],
options=["Temp1", "Temp2", "Temp3"])
# Add an event listener on the python side.
multi_select.on_change('value', lambda attr, old, new: update())
Then I would define the update function like below. The purpose of the update function is to update the ColumnDataSource (which was previously empty) with values you want to populate in the graph now.
def update():
"""This function will syncronize the server data object with
your browser data object. """
# Here I retrieve the value of selected elements from multi-select
selection_options = multi_select.options
selections = multi_select.value
for option in selection_options:
if option not in selections:
source.data[option] = []
else:
# I am assuming your temperatures are in a dataframe.
source.data[option] = df[option]
The last thing to do is to redefine how you plot your glyphs. Instead of drawing from lists, or dataframes, we will draw our data from a ColumnDataSource like so:
p1.line("time","temp0", source=source, size=12,color=getcolor())
p1.line("time","temp1", source=source, size=12,color=getcolor())
p1.line("time","temp2", source=source, size=12,color=getcolor())
p1.line(Time,Temp3, source=source, size=12,color=getcolor())
So basically by controlling the content of the ColumnDataSource which is synchronized with the browser object, I can toggle whether data points are shown or not. You may or may not need to define multiple ColumnDataSources. Try it out this way first.
2.) Client only approach ak Callbacks
The approach above uses a client-server architecture. Another possible approach would be to do this all on the front-end. This link shows how some simple interactions can be done completely on the browser side via various forms of callbacks.
Anyway, I hope this is helpful. Cheers!
The question is from some time back but Bokeh now has the interactive legend functionality - you can just specify
your_figure.legend.click_policy = 'hide'
And this makes legend while listing your lines interactive and you can switch each line on/off
I haven't used Matplotlib much. Based on someone's advice, I'm trying to write some plotting codes using object-oriented paradigms as much as possible---and therefore trying to use pure Matplotlib (i.e. not relying on pyplot) to generate some simple figures.
A stripped-down version of my code looks like this:
import matplotlib as mpl
time = [0,1,2,3,4]
cell = [1,2,1,2,1]
sample = [3,2,3,4,4]
(figHt, figWd) = (5, 8) # in
lBorderWidth = bBorderWidth = rBorderWidth = tBorderWidth = 0.1
lbwh = (lBorderWidth, bBorderWidth,
(1-lBorderWidth-rBorderWidth),
(1-tBorderWidth-bBorderWidth)) # left, bottom, width, height
fig = mpl.figure.Figure(figsize=(figHt, figWd))
ax = fig.add_axes(lbwh)
lines1, = ax.plot(time,cell,'k--')
lines2, = ax.plot(time,sample,'k-')
fig.legend([lines1,lines2],['p','q'],'upper left')
fig.canvas.draw()
But when I run it, Python complains when it reaches fig.canvas.draw() that canvas type is None.
Based on a reading of the Matplotlib Artists tutorial, it seems like pyplot takes care of a few behind-the-scenes setup tasks, most notably establishing the connection between the Figure object and the desired renderer/backend. The tutorial says:
In the example below, we create a Figure instance using matplotlib.pyplot.figure(), which is a convenience method for
instantiating Figure instances and connecting them with your user
interface or drawing toolkit FigureCanvas. As we will discuss below,
this is not necessary – you can work directly with PostScript, PDF
Gtk+, or wxPython FigureCanvas instances, instantiate your Figures
directly and connect them yourselves – but since we are focusing here
on the Artist API we’ll let pyplot handle some of those details for us
Unfortunately, that particular page doesn't proceed beyond generating plots with pyplot.figure(), so I am still trying to discover what the required steps are. Again, I realize pyplot can simplify this task---just trying to grok how all the pieces fit together.
I saw this description of a base class used by backends, FigureCanvasBase, and I assume that I need to assign fig.canvas one of FigureCanvasBase's subclasses.
Also, I verified that Python is using a default backend. So I know the problem isn't caused by lack of a backend.
>>> matplotlib.backends.backend
'Qt4Agg'
Thanks in advance for any help. In summary, two questions:
What am I missing that is causing this to fail? Is it because I didn't assign the figure object a renderer?
I mentioned that I suspected I needed a subclass of FigureCanvasBase to move forward. Even if the problem can probably be solved more elegantly, is there a way to search the Python environment for subclasses that inherit from FigureCanvasBase? This might come in handy in other problems.
You need to create a FigureCanvasAgg in order to plot manually, try this:
import matplotlib as mpl
mpl.use('Agg') #setup the backend
import matplotlib.figure as mfigure
from matplotlib.backends.backend_agg import FigureCanvasAgg #canvas
time = [0,1,2,3,4]
cell = [1,2,1,2,1]
sample = [3,2,3,4,4]
(figHt, figWd) = (5, 8) # in
lBorderWidth = bBorderWidth = rBorderWidth = tBorderWidth = 0.1
lbwh = (lBorderWidth, bBorderWidth,
(1-lBorderWidth-rBorderWidth),
(1-tBorderWidth-bBorderWidth)) # left, bottom, width, height
fig = mfigure.Figure(figsize=(figHt, figWd))
canvas = FigureCanvasAgg(fig) #create the canvas
ax = fig.add_axes(lbwh)
lines1, = ax.plot(time,cell,'k--')
lines2, = ax.plot(time,sample,'k-')
fig.legend([lines1,lines2],['p','q'],'upper left')
fig.savefig('test.png') #save the figure
Note: You can find the subclasses of FigureCanvasBase in matplotlib.backends.<your backend>.FigureCanvas<your backend>