html - Python Flask App with Interactive Bokeh plots

Question

I have a Flask App in which my plots are created using Bokeh in the controller python code with below commands:

p = figure(tools = TOOLS, x_axis_label ...)
p.line(....)
script, div = components(p)

and I pass "script" & "div" elements to my HTML page using:

render_template(.html, script = script, div =div)

I want to add a interactive slider bar on top of my plot. Based on the Bokeh website with the following command, I should be able to do it.

slider = Slider(start=0, end=10, value=1, step=.1, title="Stuff")

So my first question is, how can I put slider information to the components function to generate correct "script" and "div" elements that I could pass it to my HTML file?

My second question is: Having a value on the slider, how can I post it back to my controller to update my plots and send new "div" and "script" elements to the HTML file to update my plots?

I really appreciate if you could explain necessary steps to achieve this solution.

Depending on the details of what you are trying to do, I can imagine a few possible different approaches involving a JS callback on the slider, invite you to come by the public mailing list where there can be more more extensive discussion: groups.google.com/a/continuum.io/forum/#!forum/bokeh — bigreddot
Thanks for the invitation. I joined the forum. Regarding the details of what I want to do. First, I need to be able to add slider to the top of my Bokeh plots. I do not know how to pass slider information to "div" and "script" elements. Second, when I added the slider to the top of my Bokeh plot, I need to have an access to the value that User assign using the slider in my controller. I do appreciate if you could help me on that. — Hamid K

Hamid K Hamid K · Accepted Answer · 2015-11-10T16:09:08

Find answer for the first question below:

p.line(.....)
slider1 = Slider(start=0, end = 100, value = y[j] / bth, step = 1, title = "Mag")
slider2 = Slider(start=0, end = 100, value = y1[j] / bth, step = 1, title = "test")
script, div = components({"p": p, "slider1":vform(slider1), "slider2":vform(slider2)})

html - Python Flask App with Interactive Bokeh plots

1 Answers