We Keep Coding

Bokeh OpenURL does not work with HTML Output File in GCP JuypterLab

I use a Notebook in GCP Jupyter Lab.
Why does this Bokeh example, open an URL by clicking on a glyph, does work in a Jupyter Notebook but not with output_file(eg. "openurl.html")?
https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html?highlight=interaction
from bokeh.models import ColumnDataSource, OpenURL, TapTool
from bokeh.plotting import figure, output_file, show
output_file("openurl.html")
p = figure(plot_width=400, plot_height=400,
tools="tap", title="Click the Dots")
source = ColumnDataSource(data=dict(
x=[1, 2, 3, 4, 5],
y=[2, 5, 8, 2, 7],
color=["navy", "orange", "olive", "firebrick", "gold"]
))
p.circle('x', 'y', color='color', size=20, source=source)
# use the "color" column of the CDS to complete the URL
# e.g. if the glyph at index 10 is selected, then #color
# will be replaced with source.data['color'][10]
url = "http://www.colors.commutercreative.com/#color/"
taptool = p.select(type=TapTool)
taptool.callback = OpenURL(url=url)
show(p)
On my local machine, the example does work in both cases (in a Notebook and the exported HTML). But not in GCP JupyterLab.
My question is, what is needed that it works in the GCP JupyterLab with HTML Export as well?
Thanks for help.

Select DropDown unable to change ColumnDataSource using JS Callback

I have tried changing multiple parameters(arguments) but this doesn't work.
The bokeh version is 1.3.4.
from bokeh.layouts import column
from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource, Slider, Select
from bokeh.plotting import Figure, output_notebook, show
import numpy as np
a = 20
bokeh_tools = "pan,wheel_zoom"
output_notebook()
plot_2s = ColumnDataSource(data=dict(x=[1, 2, 3], y=[1, 2, 3]))
plot_3s = ColumnDataSource(data=dict(x=[3, 4, 5], y=[1, 2, 3]))
line_source = ColumnDataSource(data=dict(x=[1, 2, 3], y=[1, 2, 3]))
plot_1 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_1")
plot_1.line(x = 'x', y='y', source=plot_2s)
plot_2 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_2")
plot_2.line(x='x', y='y', source=line_source)
select = Select(title="SELECT", options=["val1", "val2"])
column = column(select, plot_2)
show(column)
select.callback = CustomJS(args={"cds2": plot_2s, "cds3": plot_3s, "ls": line_source}, code="""
if(cb_obj.value === "val1"){
ls.data = cds2.data;
}else if(cb_obj.value === "val2"){
ls.data = cds3.data;
}
ls.change.emit();
""")
There are no error message the callback is not implemented

You callback is never executed, because it is never added to the output. As soon as you call show the HTML output is generated and displayed. Anything after that point is effectively a no-op, and does not exist as far as the output is concerned. Typically show should be called last.

Bokeh show text on click

I saw this example
from bokeh.models import ColumnDataSource, OpenURL, TapTool
from bokeh.plotting import figure, output_file, show
output_file("openurl.html")
p = figure(plot_width=400, plot_height=400,
tools="tap", title="Click the Dots")
source = ColumnDataSource(data=dict(
x=[1, 2, 3, 4, 5],
y=[2, 5, 8, 2, 7],
color=["navy", "orange", "olive", "firebrick", "gold"]
))
p.circle('x', 'y', color='color', size=20, source=source)
# use the "color" column of the CDS to complete the URL
# e.g. if the glyph at index 10 is selected, then #color
# will be replaced with source.data['color'][10]
url = "http://www.colors.commutercreative.com/#color/"
taptool = p.select(type=TapTool)
taptool.callback = OpenURL(url=url)
show(p)
I would like to do something similar, instead of opening the url, I would like to show some text on the right when i click on the circle related to that circle. And the text should change when I click on another circle.
I also saw this: https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-user-interaction-events but I couldn't change the mouse prints with some text based on the circle.
Thank you.

use CustomJS instead of OpenUrl
from bokeh.models import CustomJS
taptool.callback = CustomJS(code="""
var ind = cb_data.index['1d'].indices[0];
var color = cb_obj.source.data['color'][ind];
$('#div_id').text(color);
""")
more explanations see here JavaScript callback to get selected glyph index in Bokeh

In Bokeh, Weird Date Axis Issue

I'm trying to plot some data with Bokeh via pandas. The x-axis is date, and I can get Bokeh to plot the axis "mostly" correct (the range may be off). However, the line it outputs is all over the place.
For example:
It looks like maybe it's one big, continuous line?
Here's my code:
# library imports
import pandas as pd
from bokeh.io import output_file, show, vform
from bokeh.plotting import figure, output_file, ColumnDataSource, show
from bokeh.models import HoverTool, BoxAnnotation, BoxSelectTool, BoxZoomTool, WheelZoomTool, ResetTool
# Import csv into pandas dataframe
df = pd.read_csv(r"C:\Users\paul.shapiro\Documents\kwdata.csv", parse_dates=['Interest over time_time'])
df.rename(columns={'Search Term': 'keyword', 'Interest over time_time': 'date', 'Weekly Volume': 'volume'}, inplace=True)
source = ColumnDataSource(data=dict(x=df['date'], y=df['volume'], desc=df['keyword']))
TOOLS = [HoverTool(tooltips=[("Keyword", "#desc"),("Date", "#x"),("Search Volume", "#y")]), BoxZoomTool(), WheelZoomTool(), ResetTool()]
# Output html for embedding
output_file("line.html")
p = figure(plot_width=800, plot_height=800, tools=TOOLS, x_axis_type="datetime")
# add both a line and circles on the same plot
p.line(df['date'], df['volume'], line_width=2, color=df['keyword'], source=source)
p.circle(df['date'], df['volume'], fill_color="white", size=8, source=source)
show(p)
It's also interesting to note, that if you plot it using bokeh.charts (if I did this the tooltips wouldn't work, so it's not an option), it plots fine:
defaults.width = 800
defaults.height = 800
TOOLS = [BoxZoomTool(), WheelZoomTool(), ResetTool()]
line = Line(df, x='date', y='volume', color='keyword', source=source, tools=TOOLS)
show(line)
output_file("line.html", title="Search Volume")
Any help would be much appreciated. This has been driving me crazy!
SOLVED using multi_line() and a for loop:
import pandas as pd
from bokeh.io import output_file, show, vform
from bokeh.plotting import figure, output_file, ColumnDataSource, show
from bokeh.models import HoverTool, BoxAnnotation, BoxSelectTool, BoxZoomTool, WheelZoomTool, ResetTool
df = pd.read_csv(r"C:\Users\paul.shapiro\Documents\kwdata.csv", parse_dates=['Interest over time_time'])
df.rename(columns={'Search Term': 'keyword', 'Interest over time_time': 'date', 'Weekly Volume': 'volume'}, inplace=True)
gp = df.groupby('volume')
source = ColumnDataSource(data=dict(x=df['date'], y=df['volume'], desc=df['keyword']))
TOOLS = [HoverTool(tooltips=[("Keyword", "#desc"),("Date", "#x"),("Search Volume", "#y")]), BoxZoomTool(), WheelZoomTool(), ResetTool()]
p = figure(plot_width=800, plot_height=800, tools=TOOLS, x_axis_type="datetime")
gp = df.groupby('keyword')
# groups() returns a dict with 'Gene':indices as k:v pair
for g in gp.groups.items():
p.multi_line(xs=[df.loc[g[1], 'date']], ys=[df.loc[g[1], 'volume']])
p.circle(df['date'], df['volume'], fill_color="white", size=8, source=source)
output_file("newline.html")
show(p)

I cannot see anything wrong with your code. Try to see how different the dataframe df is from a simple nested list of values as per the bokeh example. Maybe by doing some manipulation to the dataframe you can get this working.
http://docs.bokeh.org/en/latest/docs/reference/plotting.html
from bokeh.plotting import figure, output_file, show
p = figure(plot_width=300, plot_height=300)
p.multi_line(xs=[[1, 2, 3], [2, 3, 4]], ys=[[6, 7, 2], [4, 5, 7]],
color=['red','green'])
show(p)

Bokeh - How to Click and Drag?

I would like to click-and-drag the scatter points the points of a bokeh scatter plot. Any ideas how to do this?
(edit: this is an example of what I'd like to do)
For an example of a scatter, the code below generates the scatter plot chart found half-way through this page.
from bokeh.plotting import figure, output_file, show
# create a Figure object
p = figure(width=300, height=300, tools="pan,reset,save")
# add a Circle renderer to this figure
p.circle([1, 2.5, 3, 2], [2, 3, 1, 1.5], radius=0.3, alpha=0.5)
# specify how to output the plot(s)
output_file("foo.html")
# display the figure
show(p)

Multi-gesture edit tools are only a recent addition, landing in version 0.12.14. You can find much more information in the Edit Tools section of the User's Guide.
Specifically to be able to move points as described in the OP, use the PointDrawTool:
Here is a complete example you can run that also has a data table showing the updated coordinates of the glyphs as they are moved (you will need to activate the tool in the toolbar first, it is off by default):
from bokeh.plotting import figure, output_file, show, Column
from bokeh.models import DataTable, TableColumn, PointDrawTool, ColumnDataSource
output_file("tools_point_draw.html")
p = figure(x_range=(0, 10), y_range=(0, 10), tools=[],
title='Point Draw Tool')
p.background_fill_color = 'lightgrey'
source = ColumnDataSource({
'x': [1, 5, 9], 'y': [1, 5, 9], 'color': ['red', 'green', 'yellow']
})
renderer = p.scatter(x='x', y='y', source=source, color='color', size=10)
columns = [TableColumn(field="x", title="x"),
TableColumn(field="y", title="y"),
TableColumn(field='color', title='color')]
table = DataTable(source=source, columns=columns, editable=True, height=200)
draw_tool = PointDrawTool(renderers=[renderer], empty_value='black')
p.add_tools(draw_tool)
p.toolbar.active_tap = draw_tool
show(Column(p, table))