Python Flask App with Interactive Bokeh plots

On Tue, Nov 3, 2015 at 10:01 AM, hkbokeh hamidreza.khakpour@gmail.com wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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?

You should find the embed section of our user guide useful here. In your specific case you will be generating more then one component so use either:

components((plot_1, plot_2))
#=> (script, (plot_1_div, plot_2_div))

components({"Plot 1": plot_1, "Plot 2": plot_2})
#=> (script, {"Plot 1": plot_1_div, "Plot 2": plot_2_div})

I personally prefer the later…

The userguide also have a working example that shows an use case.

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 the new “div” and “script” elements to the HTML file to update my plots?

Sorry but I don’t fully understand your question… Can you post some code example and/or mode details about what you want to do? Is it a stand alone app? Can you describe your app?

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

There are different ways of build an interactive plot and the best answer really depends on user needs…

Thanks

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/b266dfcf-86fb-471c-be6d-74406eceeb10%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

Fabio Pliger

Senior Software Engineer, Bokeh

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

On Tue, Nov 3, 2015 at 12:00 PM, hkbokeh hamidreza.khakpour@gmail.com wrote:

Fabio,

What is the Plot_2 in my case? Is it the slider? I tried this and it did not work (I can only see my plot not the slider)

from bokeh.models.widgets import Slider

p = figure(tools = TOOLS, x_axis_label = ‘time (secs)’, y_axis_label = ’ (bbls/hr)', plot_width = 1200, plot_height = 800)

p.line(dftemp[‘timestamp’].sub(dftemp.iloc[0,0], axis = 0), ens[j], line_width = 4, line_color = “navy”)

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

***script, div = components(p, slider) ***

Components will take wither a tuple or a dict with our objects… so in your case:

components((p, slider))
#=> (script, (p_div, slider_div))

components({"p": p, "slider": slider})
#=> (script, {"p": p_div, "slider": slider_div})

where p_div and slider_div are the divs containing your components to use on your page template

render my HTML file:

return render_template(‘bo.html’, script = script, div= div)

My HTML file using Jinja2 Template file:

{% extends “template.html” %}

{% block content %}

Event:

{{ script | safe }}

{{ div | safe }}

{% endblock %}

Thanks a lot for your help.

Notice that your script and resources should go into your page header…

also, in case your are calling:

components({"p": p, "slider": slider})
#=> (script, {"p": p_div, "slider": slider_div})

you should end up with something like this…

{% extends “template.html” %}

{% block content %}

Event:

{{ div.p | safe }}

{{ div.slider | safe }}

{% endblock %}

You can also look at the embed multiple example for a working example that you can run locally and adapt to your usecase.

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c36ed2e7-5906-4b74-9f78-17877e65d201%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

Fabio Pliger

Senior Software Engineer, Bokeh

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

On Tue, Nov 3, 2015 at 3:19 PM, hkbokeh hamidreza.khakpour@gmail.com wrote:

It seems this is a BUG:

It creates the plot, but for the slider it just put the slider “title” not the slider. Could you please confirm that? If so, is there any Hot fix for that?

It could be a but or not… it’s really hard to help without more meaningful information or code that we can reproduce locally. From the short information you’ve pasted here I can’t understand where and how are you loading resources from. Also, you are loading scripts inline with your code while and not on head section.

Could you provide some code that we can use locally to reproduce the issue? I understand it may have sensible data, in that case I’d suggest you to send something closer as possible with sample data, just to reproduce the issue. As far as I know there are no open issues that should generate the problem you are having…

Thanks

Fabio

Tahnks

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f21fb836-03e9-43b6-91a7-d91e05f06036%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

Fabio Pliger

Senior Software Engineer, Bokeh

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

On Wednesday, November 4, 2015 at 3:19:52 PM UTC+1, hkbokeh wrote:

Hi Fabio,

Thanks for your Help,

1- The Structure of my code is as follows:

I have a template.html file which includes reference to my .css files and .js files with styles in the section. In the section, I used the jinja2 template:

{% block content %}

{% endblock %}

so all the rest of my html files extends the template.html file, if I add below lines on top it

{% extends “template.html” %}

{% block content %}

{% endblock %}

So, The template.html page can be seen on top of all my pages that extend template.html file. So back to what you said, Is it a must to add my to the section or I can leave it in the section, where I need it.

For you to reproduce it and assure this is not a Bug, I suggest you to just generate a Bokeh plot and try to add a Slider on top of it. and see if you can see the Slider. I cannot. I just see the title of Slider.

Please let me know if I can provide any further information.

Thanks,

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

On Wed, Nov 4, 2015 at 10:56 AM, hkbokeh hamidreza.khakpour@gmail.com wrote:

Thank you so much. I wrapped my slider and now, everything works fine.
Do you know how can I send back the current value of slider to my controller python code? I do not know how can I access to the current value that user choose on the HTML page.

My login page works like this:

if you post your username and password in a form. I have the action attribute point to the function in my controller and from there I can verify username and password.

*** {{ form.csrf_token }}***

***

***

*** {{ form.name.label }} : {{ form.name }}***

I appreciate if you could help me on that.

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/a3afcea9-47b1-43a8-a886-759f3bc94b53%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

Fabio Pliger

Senior Software Engineer, Bokeh

On Wednesday, November 4, 2015 at 5:56:53 PM UTC+1, hkbokeh wrote:

Thank you so much. I wrapped my slider and now, everything works fine.
Do you know how can I send back the current value of slider to my controller python code? I do not know how can I access to the current value that user choose on the HTML page.

My login page works like this:

if you post your username and password in a form. I have the action attribute point to the function in my controller and from there I can verify username and password.

*** {{ form.csrf_token }}***

***

***

*** {{ form.name.label }} : {{ form.name }}***

I appreciate if you could help me on that.

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

On 11/4/15 12:25 PM, arditsulce@gmail.com wrote:

I would also like to know how to do that as I have also just started out
with bokeh.

On Wednesday, November 4, 2015 at 5:56:53 PM UTC+1, hkbokeh wrote:

    Thank you so much. I wrapped my slider and now, everything works fine.
    Do you know how can I send back the current value of slider to my
    controller python code? I do not know how can I access to the
    current value that user choose on the HTML page.

    My login page works like this:
    if you post your username and password in a form. I have the action
    attribute point to the function in my controller and from there I
    can verify username and password.

    /* <form class="form-signin" role="form" method = "post" action =
    "/login">*/
    /*{{ form.csrf_token }}*/
    /*<div class="form-group">*/
    /*{{ form.name.label }} : {{ form.name <http://form.name> }}*/
    /*
    */
    I appreciate if you could help me on that.

    On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

        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 by:

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

        I want to add a interactive slider bar on top of my Bokeh 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 the
        new "div" and "script" elements to the HTML file to update my plots?

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

--
You received this message because you are subscribed to the Google
Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to bokeh+unsubscribe@continuum.io
<mailto:bokeh+unsubscribe@continuum.io>.
To post to this group, send email to bokeh@continuum.io
<mailto:bokeh@continuum.io>.
To view this discussion on the web visit
https://groups.google.com/a/continuum.io/d/msgid/bokeh/2b79c89b-7cb5-4355-ac2a-6bd5cb994ae3%40continuum.io
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/2b79c89b-7cb5-4355-ac2a-6bd5cb994ae3%40continuum.io?utm_medium=email&utm_source=footer&gt;\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

On Thu, Nov 5, 2015 at 1:23 PM, hkbokeh hamidreza.khakpour@gmail.com wrote:

We are not using Bokeh Server (Is it a must in our case to use?). We have a Python Flask framework, where we built our Web App using of it.

Well… there are a few ways if doing this. Bokeh server is probably the best method in case you don’t want to right extra javascript code and, although it’s currently going through a big rewriting process, it should also be the most scalable/performance optimized way to go. But if you need it now it’s probably not the best choice at the moment.

So when our Web server is running, the browser can communicate with our controller. Based on one Bokeh example, I realized we might need to use the “callback” like the below example on your website:

x = [x*0.005 for x in range(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

callback = CustomJS(args=dict(source=source), code="""
        var data = source.get('data');
        var f = cb_obj.get('value')
        x = data['x']
        y = data['y']
        for (i = 0; i < x.length; i++) {
            y[i] = Math.pow(x[i], f)
        }
        source.trigger('change');
    """)

slider = Slider(start=0.1, end=4, value=1, step=.1, title="power", callback=callback)

But I need to understand the java scripts code first to be able to change it for my case. Am I correct?

Yes, using customJS (thus writing some little Javascript) is another solution too. And, yes, you’ll need to write/understand some javascript. You can find examples and documentation on our used guide and examples (these are probably more focused)

Best

Fabio

Thanks

On Tuesday, November 3, 2015 at 11:01:51 AM UTC-5, hkbokeh wrote:

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 by:

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

I want to add a interactive slider bar on top of my Bokeh 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 the new “div” and “script” elements to the HTML file to update my plots?

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

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/1edf1fa7-168e-474c-9ac8-340c880cd87c%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

Fabio Pliger

Senior Software Engineer, Bokeh