how many ways to pass data from python into javascript especially on tap events

Community Support
1

Hi,

I am runnig a bokeh server, the application so far can update multi_line glyph’s data source defined outside of callback function using button click. However, I cannot do the same using js_on_change which is understandable as it runs on browser side. Can you suggest me how can I achieve the same desired functionality using bokeh server on browser side? You can find the code below:

I think my question also relates to this issue https://groups.google.com/a/continuum.io/forum/#!searchin/bokeh/on_change$20%22tap%22$20callback$20/bokeh/DE0sGO80x5I/ivjRh4BsEwAJ , do I need to use IPython.notebook.kernel.execute to pass data from *python into javascript ? *

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, CDSView

from bokeh.models import CustomJS,ColumnDataSource,Slider,Plot,DataRange1d,HoverTool,Button,Legend

from bokeh.plotting import figure, curdoc

from bokeh.layouts import row,column

p = figure(plot_width=400, plot_height=400)

source = ColumnDataSource(data=dict(x=,

y=,

color=,

alpha= ))

some_dic = {“x” : [[1,1],[1,1]],“y” : [[200,100],[100,0]],“color” : [“firebrick”,“navy”],“alpha”: [0.8,0.3]}

i = 1

p.multi_line(xs=‘x’,ys=‘y’,line_color=‘color’,alpha = ‘alpha’,line_width=4,source=source)

slider = Slider(start=1, end=12, value=1, step=1, title=“months”)

def callbackSummaryPlot():

print (‘Radio button option selected.’)

global some_dic,i

print(i,“i”)

i+=1

source.data = some_dic

button = Button(label=“Foo”, button_type=“success”)

button.on_click(callbackSummaryPlot)

#p.js_on_event(‘tap’,CustomJS.from_py_func(callbackSummaryPlot))

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

Thanks

2

Can you try the following modified version of your code?

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, CDSView

from bokeh.models import CustomJS,ColumnDataSource,Slider,Plot,DataRange1d,HoverTool,Button,Legend

from bokeh.plotting import figure, curdoc

from bokeh.layouts import row,column

p = figure(plot_width=400, plot_height=400)

source = ColumnDataSource(data=dict(x=,

y=,

color=,

alpha= ))

p.multi_line(xs=‘x’,ys=‘y’,line_color=‘color’,alpha = ‘alpha’,line_width=4,source=source)

slider = Slider(start=1, end=12, value=1, step=1, title=“months”)

def give_data():

some_dic = {“x” : [[1,1],[1,1]],“y” : [[200,100],[100,0]],“color” : [“firebrick”,“navy”],“alpha”: [0.8,0.3]}

return some_dic

def callbackSummaryPlot():

print (‘Radio button option selected.’)

new_data = give_data()

source.data = new_data

button = Button(label=“Foo”, button_type=“success”)

button.on_click(callbackSummaryPlot)

#p.js_on_event(‘tap’,CustomJS.from_py_func(callbackSummaryPlot))

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

···

On Tuesday, 15 May 2018 23:24:00 UTC+5:30, Baran Köseoğlu wrote:

Hi,

I am runnig a bokeh server, the application so far can update multi_line glyph’s data source defined outside of callback function using button click. However, I cannot do the same using js_on_change which is understandable as it runs on browser side. Can you suggest me how can I achieve the same desired functionality using bokeh server on browser side? You can find the code below:

I think my question also relates to this issue https://groups.google.com/a/continuum.io/forum/#!searchin/bokeh/on_change$20%22tap%22$20callback$20/bokeh/DE0sGO80x5I/ivjRh4BsEwAJ , do I need to use IPython.notebook.kernel.execute to pass data from *python into javascript ? *

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, CDSView

from bokeh.models import CustomJS,ColumnDataSource,Slider,Plot,DataRange1d,HoverTool,Button,Legend

from bokeh.plotting import figure, curdoc

from bokeh.layouts import row,column

p = figure(plot_width=400, plot_height=400)

source = ColumnDataSource(data=dict(x=,

y=,

color=,

alpha= ))

some_dic = {“x” : [[1,1],[1,1]],“y” : [[200,100],[100,0]],“color” : [“firebrick”,“navy”],“alpha”: [0.8,0.3]}

i = 1

p.multi_line(xs=‘x’,ys=‘y’,line_color=‘color’,alpha = ‘alpha’,line_width=4,source=source)

slider = Slider(start=1, end=12, value=1, step=1, title=“months”)

def callbackSummaryPlot():

print (‘Radio button option selected.’)

global some_dic,i

print(i,“i”)

i+=1

source.data = some_dic

button = Button(label=“Foo”, button_type=“success”)

button.on_click(callbackSummaryPlot)

#p.js_on_event(‘tap’,CustomJS.from_py_func(callbackSummaryPlot))

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

Thanks

3

Thanks for your reply. The code posted first was already fine but my question was more like this: how can I achieve the same functionality using js_on_change on “tap” event for example? So what I would like to do is to pass data from python code to somewhat javascript running on browser side using “tap” event on a figure. So I want to use the line below to have this functionality.

Can you try the following modified version of your code?

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, CDSView

from bokeh.models import CustomJS,ColumnDataSource,Slider,Plot,DataRange1d,HoverTool,Button,Legend

from bokeh.plotting import figure, curdoc

from bokeh.layouts import row,column

p = figure(plot_width=400, plot_height=400)

source = ColumnDataSource(data=dict(x=,

y=,

color=,

alpha= ))

p.multi_line(xs=‘x’,ys=‘y’,line_color=‘color’,alpha = ‘alpha’,line_width=4,source=source)

slider = Slider(start=1, end=12, value=1, step=1, title=“months”)

def give_data():

some_dic = {“x” : [[1,1],[1,1]],“y” : [[200,100],[100,0]],“color” : [“firebrick”,“navy”],“alpha”: [0.8,0.3]}

return some_dic

def callbackSummaryPlot():

print (‘Radio button option selected.’)

new_data = give_data()

source.data = new_data

button = Button(label=“Foo”, button_type=“success”)

button.on_click(callbackSummaryPlot)

#p.js_on_event(‘tap’,CustomJS.from_py_func(callbackSummaryPlot))

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

Hi,

I am runnig a bokeh server, the application so far can update multi_line glyph’s data source defined outside of callback function using button click. However, I cannot do the same using js_on_change which is understandable as it runs on browser side. Can you suggest me how can I achieve the same desired functionality using bokeh server on browser side? You can find the code below:

I think my question also relates to this issue https://groups.google.com/a/continuum.io/forum/#!searchin/bokeh/on_change$20%22tap%22$20callback$20/bokeh/DE0sGO80x5I/ivjRh4BsEwAJ , do I need to use IPython.notebook.kernel.execute to pass data from *python into javascript ? *

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, CDSView

from bokeh.models import CustomJS,ColumnDataSource,Slider,Plot,DataRange1d,HoverTool,Button,Legend

from bokeh.plotting import figure, curdoc

from bokeh.layouts import row,column

p = figure(plot_width=400, plot_height=400)

source = ColumnDataSource(data=dict(x=,

y=,

color=,

alpha= ))

some_dic = {“x” : [[1,1],[1,1]],“y” : [[200,100],[100,0]],“color” : [“firebrick”,“navy”],“alpha”: [0.8,0.3]}

i = 1

p.multi_line(xs=‘x’,ys=‘y’,line_color=‘color’,alpha = ‘alpha’,line_width=4,source=source)

slider = Slider(start=1, end=12, value=1, step=1, title=“months”)

def callbackSummaryPlot():

print (‘Radio button option selected.’)

global some_dic,i

print(i,“i”)

i+=1

source.data = some_dic

button = Button(label=“Foo”, button_type=“success”)

button.on_click(callbackSummaryPlot)

#p.js_on_event(‘tap’,CustomJS.from_py_func(callbackSummaryPlot))

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

Thanks

#p.js_on_event(‘tap’,CustomJS.from_py_func(callbackSummaryPlot))

···

On Tuesday, 15 May 2018 23:24:00 UTC+5:30, Baran Köseoğlu wrote:

On Tuesday, May 15, 2018 at 10:19:23 PM UTC+3, Parikshit Bhinde wrote: