here's my data ：https://drive.google.com/drive/folders/1CabmdDQucaKW2XhBxQlXVNOSiNRtkMm-?usp=sharing
i want to use the select to choose the stock i want to show;
and slider to choose the year range i want to show;
and checkboxgroup to choose the index i want to compare with.
the problem is when i adjust the slider, the figure will update, but when i use the select and checkboxgroup, the figure won't update,
what's the reason?
from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, Slider, TextInput , Select , Div, CheckboxGroup
from bokeh.plotting import figure
import pandas as pd
import numpy as np
price=pd.read_excel('price.xlsx',index_col=0)
# input control
stock = Select(title='Stock',value='AAPL',options=[x for x in list(price.columns) if x not in ['S&P','DOW']])
yr_1 = Slider(title='Start year',value=2015,start=2000,end=2020,step=1)
yr_2 = Slider(title='End year',value=2020,start=2000,end=2020,step=1)
index = CheckboxGroup(labels=['S&P','DOW'],active=[0,1])
def get_data():
compare_index = [index.labels[i] for i in index.active]
stocks = stock.value
start_year = str(yr_1.value)
end_year = str(yr_2.value)
select_list = []
select_list.append(stocks)
select_list.extend(compare_index)
selected = price[select_list]
selected = selected [start_year:end_year]
for col in selected.columns:
selected[col]=selected[col]/selected[col].dropna()[0]
return ColumnDataSource(selected)
def make_plot(source):
fig=figure(plot_height=600, plot_width=700, title="",sizing_mode="scale_both", x_axis_type="datetime")
data_columns = list(source.data.keys())
for data in data_columns[1:]:
fig.line(x=data_columns[0],y=data,source=source,line_width=3, line_alpha=0.6, legend_label=data)
return fig
def update(attrname, old, new):
new_source = get_data()
source.data.clear()
source.data.update(new_source.data)
#get the initial value and plot
source = get_data()
plot = make_plot(source)
#control_update
stock.on_change('value', update)
yr_1.on_change('value', update)
yr_2.on_change('value', update)
index.on_change('active', update)
# Set up layouts and add to document
inputs = column(stock, yr_1, yr_2, index)
curdoc().add_root(row(inputs, plot, width=800))
curdoc().title = "Stocks"
You're creating a new ColumnDataSource for new data. That's not a good approach.
Instead, create it once and then just assign its data as appropriate.
In your case, I would do it like this:
Create ColumnDataSource just once, as described above
Do not use .update on CDS, just reassign .data
Create the legend manually
For that one line that's susceptible to the select change choose a static x field and use it everywhere instead
Change the first legend item's label when you change the select's value to instead of that x field it has the correct name
Related
I have 2 bokeh rows. The top row contains a DataTable and a TextInput, both of which are able to stretch_width in order to fit the width of the browser. The bottom row contains a gridplot, which is able to stretch_width, but only does so by distorting the scale of the image. Ideally, I would like the gridplot to update the amount of columns displayed based on the size of the browser.
Consider the following example:
import pandas as pd
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.models import ColumnDataSource, TextInput
from bokeh.plotting import figure, output_file, save
from bokeh.layouts import row, column, gridplot
def get_datatable():
"""this can stretch width without issue"""
df = pd.DataFrame({'a': [0, 1, 2], 'b': [2, 3, 4]})
source = ColumnDataSource(df)
Columns = [TableColumn(field=i, title=i) for i in df.columns]
data_table = DataTable(columns=Columns, source=source, sizing_mode='stretch_width', max_width=9999)
return data_table
def get_text_input():
"""this can stretch width without issue"""
return TextInput(value='Example', title='Title', sizing_mode="stretch_width", max_width=9999)
def get_gridplot():
"""
this requires columns to be hard-coded
stretch_width is an option, but only distorts the images if enabled
"""
figs = []
for _ in range(30):
fig = figure(x_range=(0,10), y_range=(0,10))
_ = fig.image_rgba(image=[], x=0, y=0)
figs.append(fig)
return gridplot(children=figs, ncols=2)
top_row = row([get_datatable(), get_text_input()], max_width=9999, sizing_mode='stretch_width')
bottom_row = row(get_gridplot())
col = column(top_row, bottom_row, sizing_mode="stretch_width")
output_file("example.html")
save(col)
My end goal is to have the gridplot automatically update the amount of columns based on the width of the browser. Is there a way to do this natively in bokeh? If not, is it possible to do this via a CustomJs javascript callback?
Solution
Consider using sizing_mode=“scale_width” when calling figure.
fig = figure(x_range=(0,10), y_range=(0,10), sizing_mode=“scale_width”)
Note
It may be preferable to use scale_width instead of stretch_width more generally.
Bokeh Doc Example: https://docs.bokeh.org/en/latest/docs/user_guide/layout.html#multiple-objects
I'm trying to get xy coordinates of points drawn by the user. I want to have them as a dictionary, a list or a pandas DataFrame.
I'm using Bokeh 2.0.2 in Jupyter. There'll be a background image (which is not the focus of this post) and on top, the user will create points that I could use further.
Below is where I've managed to get to (with some dummy data). And I've commented some lines which I believe are the direction in which I'd have to go. But I don't seem to get the grasp of it.
from bokeh.plotting import figure, show, Column, output_notebook
from bokeh.models import PointDrawTool, ColumnDataSource, TableColumn, DataTable
output_notebook()
my_tools = ["pan, wheel_zoom, box_zoom, reset"]
#create the figure object
p = figure(title= "my_title", match_aspect=True,
toolbar_location = 'above', tools = my_tools)
seeds = ColumnDataSource({'x': [2,14,8], 'y': [-1,5,7]}) #dummy data
renderer = p.scatter(x='x', y='y', source = seeds, color='red', size=10)
columns = [TableColumn(field="x", title="x"),
TableColumn(field="y", title="y")]
table = DataTable(source=seeds, columns=columns, editable=True, height=100)
#callback = CustomJS(args=dict(source=seeds), code="""
# var data = source.data;
# var x = data['x']
# var y = data['y']
# source.change.emit();
#""")
#
#seeds.x.js_on_change('change:x', callback)
draw_tool = PointDrawTool(renderers=[renderer])
p.add_tools(draw_tool)
p.toolbar.active_tap = draw_tool
show(Column(p, table))
From the documentation at https://docs.bokeh.org/en/latest/docs/user_guide/tools.html#pointdrawtool:
The tool will automatically modify the columns on the data source corresponding to the x and y values of the glyph. Any additional columns in the data source will be padded with the declared empty_value, when adding a new point. Any newly added points will be inserted on the ColumnDataSource of the first supplied renderer.
So, just check the corresponding data source, seeds in your case.
The only issue here is if you want to know exactly what point has been changed or added. In this case, the simplest solution would be to create a custom subclass of PointDrawTool that does just that. Alternatively, you can create an additional "original" data source and compare seeds to it each time it's updated.
The problem is that the execute it in Python. But show create a static version. Here is a simple example that fix it! I removed the table and such to make it a bit cleaner, but it will also work with it:
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import PointDrawTool
output_notebook()
#create the figure object
p = figure(width=400,height=400)
renderer = p.scatter(x=[0,1], y=[1,2],color='red', size=10)
draw_tool = PointDrawTool(renderers=[renderer])
p.add_tools(draw_tool)
p.toolbar.active_tap = draw_tool
# This part is imporant
def app(doc):
global p
doc.add_root(p)
show(app) #<-- show app and not p!
my problem can by simplified with a streaming plot of two lines and two y-axes. Each line is assigned to a different y-axis. With a Select Widget I would like to choose which line is assigned to the primary/secondary axis.
This functionality is actually working in the code below. However, the axis assignment is only changed when the plot updates its data. I would like to have the axis assignment happen on change of the select widget.
I tried a couple of 'update' functions, but none of them work. I'm assuming that the 'stream' function updates the axis assignment. How, could this be done on change of the select widget?
# Import libraries
from bokeh.io import curdoc
from bokeh.models import ColumnDataSource, Range1d, LinearAxis
from bokeh.models.widgets import Button, Select
from bokeh.layouts import layout
from bokeh.plotting import figure
from random import randrange
# Create figure
f=figure()
# Create ColumnDataSource
source_01 = ColumnDataSource(dict(x=[],y=[]))
source_02 = ColumnDataSource(dict(x=[],y=[]))
# Create extra axis
extra_axis = f.extra_y_ranges = {"y2Range": Range1d(start=-10, end=10)}
f.add_layout(LinearAxis(y_range_name='y2Range'), 'left')
# Create Line
line_01 = f.line(x='x',y='y', color='blue', source=source_01, y_range_name='default')
line_02 = f.line(x='x',y='y', color='red' , source=source_02, y_range_name='y2Range')
# Update data
def update_all():
new_data_01=dict(x=[randrange(1,10)],y=[randrange(1,10)])
new_data_02=dict(x=[randrange(1,100)],y=[randrange(1,100)])
source_01.stream(new_data_01,rollover=15)
source_02.stream(new_data_02,rollover=15)
# Update axis function
def update_axis():
f.extra_y_ranges['y2Range'].start = -20 #new secondary axis min
f.extra_y_ranges['y2Range'].end = 80 #new secondary axis max
f.y_range.start = 0
f.y_range.end = 50
# Select Axis
def update_select_axis(attr, old, new):
if select.value == "Red":
line_01.y_range_name = 'y2Range'
line_02.y_range_name = 'default'
line_01.update()
line_02.update()
f.update()
f.y_range.update()
f.extra_y_ranges.update()
print('Primary axis: Red, Secondary Axis: BLue')
elif select.value == "Blue":
line_01.y_range_name = 'default'
line_02.y_range_name = 'y2Range'
line_01.update()
line_02.update()
f.update()
f.y_range.update()
f.extra_y_ranges.update()
print('Primary axis: Blue, Secondary Axis: Red')
# Create Select
select = Select(title="Primary Y Axis:", value="Blue", options=["Red", "Blue"])
# Create Button
button = Button(label='Set Axes')
# Update axis range on click
button.on_click(update_axis)
select.on_change("value", update_select_axis)
# Add elements to curdoc
lay_out=layout([[f, button, select]])
curdoc().add_root(lay_out)
curdoc().add_periodic_callback(update_all,5000)
If you would like to update the axis with the select tool, you should call the function update_axis() in the function update_select_axis(). This way, the axis are updated at each change in the selection and there is no need for a button.
I would like to create a plot with 2 y-axes, whose ranges are being updated on a button click. The script would run on a Bokeh server. Note that in the code below, the primary y-axis is being updated by changing f.y_range.start/end. However, this is not possible with the secondary y-axis. I tried two other commands instead, i.e.
f.extra_y_ranges.update({"y2Range": Range1d(start=0, end=50)})
and
f.extra_y_ranges.update = {"y2Range": Range1d(start=0, end=50)}
But none of them work.
A similar questions was asked here: Bokeh: How to change extra axis visibility
# Import libraries
from bokeh.io import curdoc
from bokeh.models import ColumnDataSource, Range1d, LinearAxis
from bokeh.models.widgets import Button
from bokeh.layouts import layout
from bokeh.plotting import figure
# Create figure
f=figure()
# Create ColumnDataSource
source = ColumnDataSource(dict(x=range(0,100),y=range(0,100)))
# Create Line
f.line(x='x',y='y',source=source)
f.extra_y_ranges = {"y2Range": Range1d(start=0, end=100)}
f.add_layout(LinearAxis(y_range_name='y2Range'), 'left')
# Update axis function
def update_axis():
f.y_range.start = 0
f.y_range.end = 50
# Create Button
button = Button(label='Set Axis')
# Update axis range on click
button.on_click(update_axis)
# Add elements to curdoc
lay_out=layout([[f, button]])
curdoc().add_root(lay_out)
I was facing a similar problem. I was able to update the range of the secondary axis by accessing it through the 'extra_y_axis' dict via the name I created it with. For your case, it should look something like:
# Update primary axis function
def update_axis():
f.y_range.start = 0
f.y_range.end = 50
# Update secondary axis function
def update_secondary_axis():
f.extra_y_ranges['y2Range'].start = -20 #new secondary axis min
f.extra_y_ranges['y2Range'].end = 80 #new secondary axis max
I have got a pandas dataframe whose columns I want to show as lines in a plot using a Bokeh server. Additionally, I would like to have a slider for shifting one of the lines against the other.
My problem is the update functionality when the slider value changes. I have tried the code from the sliders-example of bokeh, but it does not work.
Here is an example
import pandas as pd
from bokeh.io import vform
from bokeh.plotting import Figure, output_file, show
from bokeh.models import CustomJS, ColumnDataSource, Slider
df = pd.DataFrame([[1,2,3],[3,4,5]])
df = df.transpose()
myindex = list(df.index.values)
mysource = ColumnDataSource(df)
plot = Figure(plot_width=400, plot_height=400)
for i in range(len(mysource.column_names) - 1):
name = mysource.column_names[i]
plot.line(x = myindex, y = str(name), source = mysource)
offset = Slider(title="offset", value=0.0, start=-1.0, end=1.0, step=1)
def update_data(attrname, old, new):
# Get the current slider values
a = offset.value
temp = df[1].shift(a)
#to finish#
offset.on_change('value', update_data)
layout = vform(offset, plot)
show(layout)
Inside the update_data-function I have to update mysource, but I cannot figure out how to do that. Can anybody point me in the right direction?
Give this a try... change a=offset.value to a=cb_obj.get('value')
Then put source.trigger('change') after you do whatever it is you are trying to do in that update_data function instead of offset.on_change('value', update_data).
Also change offset = Slider(title="offset", value=0.0, start=-1.0, end=1.0, step=1, callback=CustomJS.from_py_func(offset))
Note this format I'm using works with flexx installed. https://github.com/zoofio/flexx if you have Python 3.5 you'll have to download the zip file, extract, and type python setup.py install as it isn't posted yet compiled for this version...