Steps needed to transition local html generation to bokeh serve side execution

I am not clear about the code arrangements and their reasons, when running a python script with or without “bokeh serve”

Here is a sample app/code:
def showDashboard(charts, other_parameters):

    template = Template('''<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Dashboard</title>
            {{ js_resources }}
            {{ css_resources }}
        </head>
        <body>
        <h2>Shopfloor Data for the Cutter Tools</h2>
        <h3>Cutter Tool Breakage</h3>
        {{ plot_div.chartBreakage}}
        {{ plot_div.cbox}}
        <h3>Cutter Tool Resharpening {{other_params.ResharpTotalCost}}</h3>
        {{ plot_div.resharpChart }}
        {{ plot_script }}
        </body>
    </html>
    ''')
    resources = INLINE
    js_resources = resources.render_js()
    css_resources = resources.render_css()
    script, div = components(charts)

    html = template.render(js_resources=js_resources,
                           css_resources=css_resources,
                           plot_script=script,
                           plot_div=div,
                           other_params=other_parameters)
    filename = 'ShopfloorDashboard.html'
    with open(filename, 'w') as f:
        f.write(html)
    view(filename)

if __name__ == "__main__":
    breakageDf = etlBreakageData()
    chartBreakage = prepareBreakageChart(breakageDf)
    resharpDf = etlResharpData()
    resharpChart = prepareResharpChart(resharpDf)

    # Create a widget
    cbox = CheckboxGroup(labels=["One", "Two", "Three"], active=[1, 1, 1])

    charts = {'chartBreakage': chartBreakage, 'resharpChart': resharpChart, 'cbox':cbox}
    other_parameters = {'ResharpTotalCost': "12.34"}
    showDashboard(charts, other_parameters)

``

main function has few function calls to create two charts, a widget and some parameters. They are passed to showDashboard() function. ``showDashboard creates div for charts and widget and places them in template html. This script when executed by python (in Pycharm) shows correct output html.

Now when I run the same script using ‘bokeh serve --show’ it does not show up anything. Can I do such thing? Or am I missing something basic?
In tutorials I saw that charts are added to curdoc() by add_root(). This seems to decide the layout also. But I want the html template to decide the layout. Any ideas?
``

if __name__ == "__main__":

Update:

Removing ``helped. The output has started showing up.

Further changes:
I have added Select widget to select year and accordingly I am updating the data and thus the plot changes.
This works if I add Select widget and the plot in to curdoc().add_root(VBox(select,plot)… Synchronization happens fine.

But composition of widgets/plots by curdoc is very primitive. I wish to use usual template mechanism provided by jinja2.

For this I am using following way (which does not work):

curdoc().add_root(year_select)
curdoc().add_root(chartBreakage)
curdoc().add_root(resharpChart)

charts = {'chartBreakage': chartBreakage, 'resharpChart': resharpChart, 'select':year_select}
other_parameters = {'ResharpTotalCost': "12.34"}
showDashboard(charts, other_parameters)

``

ShowDashboard is:

template = Template('''<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Dashboard</title>
        {{ js_resources }}
        {{ css_resources }}
    </head>
    <body>
    <h2>Shopfloor Data for the Cutter Tools</h2>
    <h3>Cutter Tool Breakage</h3>
    {{ plot_div.select}}
    {{ plot_div.chartBreakage}}
    <h3>Cutter Tool Resharpening {{other_params.ResharpTotalCost}}</h3>
    {{ plot_div.resharpChart }}
    {{ plot_script }}
    </body>
</html>
''')
resources = INLINE
js_resources = resources.render_js()
css_resources = resources.render_css()
script, div = components(charts)

html = template.render(js_resources=js_resources,
                       css_resources=css_resources,
                       plot_script=script,
                       plot_div=div,
                       other_params=other_parameters)
filename = 'ShopfloorDashboard.html'
with open(filename, 'w') as f:
    f.write(html)
view(filename)

``


Am I making any mistake? Why sync of data does not happen?

``

···

On Tuesday, September 6, 2016 at 2:50:57 PM UTC+5:30, Yogesh Kulkarni wrote:

I am not clear about the code arrangements and their reasons, when running a python script with or without “bokeh serve”

Here is a sample app/code:
def showDashboard(charts, other_parameters):

    template = Template('''<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Dashboard</title>
            {{ js_resources }}
            {{ css_resources }}
        </head>
        <body>
        <h2>Shopfloor Data for the Cutter Tools</h2>
        <h3>Cutter Tool Breakage</h3>
        {{ plot_div.chartBreakage}}
        {{ plot_div.cbox}}
        <h3>Cutter Tool Resharpening {{other_params.ResharpTotalCost}}</h3>
        {{ plot_div.resharpChart }}
        {{ plot_script }}
        </body>
    </html>
    ''')
    resources = INLINE
    js_resources = resources.render_js()
    css_resources = resources.render_css()
    script, div = components(charts)

    html = template.render(js_resources=js_resources,
                           css_resources=css_resources,
                           plot_script=script,
                           plot_div=div,
                           other_params=other_parameters)
    filename = 'ShopfloorDashboard.html'
    with open(filename, 'w') as f:
        f.write(html)
    view(filename)

if __name__ == "__main__":
    breakageDf = etlBreakageData()
    chartBreakage = prepareBreakageChart(breakageDf)
    resharpDf = etlResharpData()
    resharpChart = prepareResharpChart(resharpDf)

    # Create a widget
    cbox = CheckboxGroup(labels=["One", "Two", "Three"], active=[1, 1, 1])

    charts = {'chartBreakage': chartBreakage, 'resharpChart': resharpChart, 'cbox':cbox}
    other_parameters = {'ResharpTotalCost': "12.34"}
    showDashboard(charts, other_parameters)

``

main function has few function calls to create two charts, a widget and some parameters. They are passed to showDashboard() function. ``showDashboard creates div for charts and widget and places them in template html. This script when executed by python (in Pycharm) shows correct output html.

Now when I run the same script using ‘bokeh serve --show’ it does not show up anything. Can I do such thing? Or am I missing something basic?
In tutorials I saw that charts are added to curdoc() by add_root(). This seems to decide the layout also. But I want the html template to decide the layout. Any ideas?
``

Currently templating capability for server apps is more limited than for standalone documents.

However, in any case, I would suggest that hthey trying to port a non-server app to a server app without first learning about server apps independently is trying to do too many things at once. For learning purposes, it is much better to approach things from the other direction. First, study an small, existing, already working, app. I'd suggest looking at:

  https://github.com/bokeh/bokeh/blob/master/examples/app/sliders.py

Then start making small changes to it, poking it in the direction of things you want to do. Such experimentation will help you understand apps without also trying to worry about adapting something else and other things at the same time.

Additionally, there is information in the user's guide that you should study as well:

  Bokeh server — Bokeh 3.3.2 Documentation

Then, after you have some understanding and confidence with real working apps, you will be much better prepared to consider what changes the existing standalone document might need.

Thanks,

Bryan

···

On Sep 7, 2016, at 11:12 PM, Yogesh Kulkarni <[email protected]> wrote:

Update:

Removing
if __name__ == "__main__":
helped. The output has started showing up.

Further changes:
I have added Select widget to select year and accordingly I am updating the data and thus the plot changes.
This works if I add Select widget and the plot in to curdoc().add_root(VBox(select,plot)... Synchronization happens fine.

But composition of widgets/plots by curdoc is very primitive. I wish to use usual template mechanism provided by jinja2.

For this I am using following way (which does not work):
curdoc().add_root(year_select)
curdoc().add_root(chartBreakage)
curdoc().add_root(resharpChart)

charts = {'chartBreakage': chartBreakage, 'resharpChart': resharpChart, 'select':year_select}
other_parameters = {'ResharpTotalCost': "12.34"}
showDashboard(charts, other_parameters)

ShowDashboard is:

template = Template('''<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Dashboard</title>
        {{ js_resources }}
        {{ css_resources }}
    </head>
    <body>
    <h2>Shopfloor Data for the Cutter Tools</h2>
    <h3>Cutter Tool Breakage</h3>
    {{ plot_div.select}}
    {{ plot_div.chartBreakage}}
    <h3>Cutter Tool Resharpening {{other_params.ResharpTotalCost}}</h3>
    {{ plot_div.resharpChart }}
    {{ plot_script }}
    </body>
</html>
''')
resources = INLINE
js_resources = resources.render_js()
css_resources = resources.render_css()
script, div = components(charts)

html = template.render(js_resources=js_resources,
                       css_resources=css_resources,
                       plot_script=script,
                       plot_div=div,
                       other_params=other_parameters)
filename = 'ShopfloorDashboard.html'
with open(filename, 'w') as f:
    f.write(html)
view(filename)

Am I making any mistake? Why sync of data does not happen?

On Tuesday, September 6, 2016 at 2:50:57 PM UTC+5:30, Yogesh Kulkarni wrote:
I am not clear about the code arrangements and their reasons, when running a python script with or without "bokeh serve"

Here is a sample app/code:
def showDashboard(charts, other_parameters):
    template = Template('''<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Dashboard</title>
            {{ js_resources }}
            {{ css_resources }}
        </head>
        <body>
        <h2>Shopfloor Data for the Cutter Tools</h2>
        <h3>Cutter Tool Breakage</h3>
        {{ plot_div.chartBreakage}}
        {{ plot_div.cbox}}
        <h3>Cutter Tool Resharpening {{other_params.ResharpTotalCost}}</h3>
        {{ plot_div.resharpChart }}
        {{ plot_script }}
        </body>
    </html>
    ''')
    resources = INLINE
    js_resources = resources.render_js()
    css_resources = resources.render_css()
    script, div = components(charts)

    html = template.render(js_resources=js_resources,
                           css_resources=css_resources,
                           plot_script=script,
                           plot_div=div,
                           other_params=other_parameters)
    filename = 'ShopfloorDashboard.html'
    with open(filename, 'w') as f:
        f.write(html)
    view(filename)

if __name__ == "__main__":
    breakageDf = etlBreakageData()
    chartBreakage = prepareBreakageChart(breakageDf)
    resharpDf = etlResharpData()
    resharpChart = prepareResharpChart(resharpDf)

    # Create a widget
    cbox = CheckboxGroup(labels=["One", "Two", "Three"], active=[1, 1, 1])

    charts = {'chartBreakage': chartBreakage, 'resharpChart': resharpChart, 'cbox':cbox}
    other_parameters = {'ResharpTotalCost': "12.34"}
    showDashboard(charts, other_parameters)

main function has few function calls to create two charts, a widget and some parameters. They are passed to showDashboard() function.
showDashboard creates div for charts and widget and places them in template html. This script when executed by python (in Pycharm) shows correct output html.

Now when I run the same script using 'bokeh serve --show' it does not show up anything. Can I do such thing? Or am I missing something basic?
In tutorials I saw that charts are added to curdoc() by add_root(). This seems to decide the layout also. But I want the html template to decide the layout. Any ideas?

--
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 [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f89be41b-c032-4331-9db3-8f9ebe25e494%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Thanks Bryan for the advice and the links. I will follow them.

For now I will keep the transition attempt on hold. Later, once I am more comfortable, and Bokeh improves the capability, I will revisit it again.

Suggestion: the server app examples in the gallary seem to be of curdoc(0.add_root() types. Once the template syncing improves, please put those examples as well.

···

On Thursday, September 8, 2016 at 10:28:22 AM UTC+5:30, Bryan Van de ven wrote:

Currently templating capability for server apps is more limited than for standalone documents.

However, in any case, I would suggest that hthey trying to port a non-server app to a server app without first learning about server apps independently is trying to do too many things at once. For learning purposes, it is much better to approach things from the other direction. First, study an small, existing, already working, app. I’d suggest looking at:

    [https://github.com/bokeh/bokeh/blob/master/examples/app/sliders.py](https://github.com/bokeh/bokeh/blob/master/examples/app/sliders.py)

Then start making small changes to it, poking it in the direction of things you want to do. Such experimentation will help you understand apps without also trying to worry about adapting something else and other things at the same time.

Additionally, there is information in the user’s guide that you should study as well:

    [http://bokeh.pydata.org/en/latest/docs/user_guide/server.html#building-bokeh-applications](http://bokeh.pydata.org/en/latest/docs/user_guide/server.html#building-bokeh-applications)

Then, after you have some understanding and confidence with real working apps, you will be much better prepared to consider what changes the existing standalone document might need.

Thanks,

Bryan

On Sep 7, 2016, at 11:12 PM, Yogesh Kulkarni [email protected] wrote:

Update:

Removing
if name == “main”:

helped. The output has started showing up.

Further changes:

I have added Select widget to select year and accordingly I am updating the data and thus the plot changes.

This works if I add Select widget and the plot in to curdoc().add_root(VBox(select,plot)… Synchronization happens fine.

But composition of widgets/plots by curdoc is very primitive. I wish to use usual template mechanism provided by jinja2.

For this I am using following way (which does not work):

curdoc().add_root(year_select)

curdoc().add_root(chartBreakage)

curdoc().add_root(resharpChart)

charts = {‘chartBreakage’: chartBreakage, ‘resharpChart’: resharpChart, ‘select’:year_select}

other_parameters = {‘ResharpTotalCost’: “12.34”}

showDashboard(charts, other_parameters)

ShowDashboard is:

template = Template(‘’'

<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    {{ js_resources }}
    {{ css_resources }}
</head>
<body>
<h2>Shopfloor Data for the Cutter Tools</h2>
<h3>Cutter Tool Breakage</h3>
{{ plot_div.select}}
{{ plot_div.chartBreakage}}
<h3>Cutter Tool Resharpening {{other_params.ResharpTotalCost}}</h3>
{{ plot_div.resharpChart }}
{{ plot_script }}
</body>

‘’')

resources = INLINE

js_resources = resources.render_js()

css_resources = resources.render_css()

script, div = components(charts)

html = template.render(js_resources=js_resources,

                   css_resources=css_resources,
                   plot_script=script,
                   plot_div=div,
                   other_params=other_parameters)

filename = ‘ShopfloorDashboard.html’

with open(filename, ‘w’) as f:

f.write(html)

view(filename)

Am I making any mistake? Why sync of data does not happen?

On Tuesday, September 6, 2016 at 2:50:57 PM UTC+5:30, Yogesh Kulkarni wrote:

I am not clear about the code arrangements and their reasons, when running a python script with or without “bokeh serve”

Here is a sample app/code:

def showDashboard(charts, other_parameters):

template = Template('''<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Dashboard</title>
        {{ js_resources }}
        {{ css_resources }}
    </head>
    <body>
    <h2>Shopfloor Data for the Cutter Tools</h2>
    <h3>Cutter Tool Breakage</h3>
    {{ plot_div.chartBreakage}}
    {{ plot_div.cbox}}
    <h3>Cutter Tool Resharpening {{other_params.ResharpTotalCost}}</h3>
    {{ plot_div.resharpChart }}
    {{ plot_script }}
    </body>
</html>
''')
resources = INLINE
js_resources = resources.render_js()
css_resources = resources.render_css()
script, div = components(charts)
html = template.render(js_resources=js_resources,
                       css_resources=css_resources,
                       plot_script=script,
                       plot_div=div,
                       other_params=other_parameters)
filename = 'ShopfloorDashboard.html'
with open(filename, 'w') as f:
    f.write(html)
view(filename)

if name == “main”:

breakageDf = etlBreakageData()
chartBreakage = prepareBreakageChart(breakageDf)
resharpDf = etlResharpData()
resharpChart = prepareResharpChart(resharpDf)
# Create a widget
cbox = CheckboxGroup(labels=["One", "Two", "Three"], active=[1, 1, 1])
charts = {'chartBreakage': chartBreakage, 'resharpChart': resharpChart, 'cbox':cbox}
other_parameters = {'ResharpTotalCost': "12.34"}
showDashboard(charts, other_parameters)

main function has few function calls to create two charts, a widget and some parameters. They are passed to showDashboard() function.

showDashboard creates div for charts and widget and places them in template html. This script when executed by python (in Pycharm) shows correct output html.

Now when I run the same script using ‘bokeh serve --show’ it does not show up anything. Can I do such thing? Or am I missing something basic?

In tutorials I saw that charts are added to curdoc() by add_root(). This seems to decide the layout also. But I want the html template to decide the layout. Any ideas?


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 [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f89be41b-c032-4331-9db3-8f9ebe25e494%40continuum.io.

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

Hello, Bryan,
I have similar problem as Yogesh_Kulkarni.
I am trying to dynamically change plot by periodically update the data of plot in postgresql database. My web server environment is Django+Bokeh. The following statements can embed layout into stateAll.html.
layout = column(slider, plot)
script, div = components(layout)

#Feed them to the Django template.
context = {'script':script,'div':div}
return render(request, 'main/stateAll.html', context)

My problem is I don’t know how to embed “embed(roots…)” into a html file. The reason why I wish to embed or show curdoc() into a html file is because it seems that is the only way to update plot data from database periodically by the following statement.

curdoc().add_periodic_callback(...)

Bokeh server apps can only be emedded piece-wide in whole page templates that are served by the Bokeh server. i.e. you can’t embed individual app pieces in different parts of a Django page right now. You can only embed the entire app at once in other external web pages.

You might also look at AjaxDataSource or ServerSentDataSource which would allow you to update standalone Bokeh plots (i.e. without a Bokeh server).

Bryan,
I get it. Your reply is very helpful. Thanks you!

I had try ServerSentDataSource yesterday. It is really a useful example for periodically updating content of a plot. However, I have to catch the dynamically changing data from postgresql database. It seems not easy to write statements for retrieving data from postgresql database in the “CustomJS” function. I think the example you had shown in 2017 is more better for me. I am searching the way of showing a plot like you showed in that example for a long time. I had tried to insert a statement in the example you had shown in 2017 as follows,

show( p )

then just the first circle comes out. if statement was as follows,

show( curdoc() )

then there is an error.
Could you give an example for how to showing the plot in the example you had shown in 2017 at the Django environment?

The typical way (with Django or Flask or whatever) is to run a bokeh server separately, and then use server_document to embed the entire app in your django page.

There is also some recent separate work regarding running a Bokeh server app directly inside a Django process. However, I am not really at all familiar with that work or its current state, all I can do is point to the example in the repo:

bokeh/examples/howto/server_embed/django_embed at branch-2.4 · bokeh/bokeh · GitHub

I can not exactly figure out all the relationship of all files and functions in the project that you point out. I think the example you had shown in 2017 is much simple for me. Maybe I can modify that file with using server document to embed the app. however, I am a new bokeh developer, I don’t know how to run that python file. Could you tell me how?

The example you link is just running directly on a Bokeh server, i.e. it’s started like

bokeh server myapp.py

And the browser points at 127.0.0.1:5006/myapp (or whatever remote ip/url) to see it served directly from the Bokeh server. There’s no other web server, e.g. Django or Flask, involved. Is that acceptable to your needs? Your first post indicated that you need to embed in a Django page, in which case server_document is what you have to use.

There is a Flask example here but the idea is exactly the same with Django:

Thank you very much for the example you had shown in 2017. I have to study the examples you showed for me. But I have to overcome some error. Ther is an error when I tried another example you pointed :

File “C:\Users\yvechang\OneDrive\BokehExamples\embed\arguments\bokeh_server.py”, line 18, in
args = curdoc().session_context.request.arguments
AttributeError: ‘NoneType’ object has no attribute ‘request’

I had tried that example yesterday, too. Same error happened. I have no idea about the reason.

Did you follow the instructions in the README exactly? What exact steps did you take?

Bryan,
I am sorry for reply so late. I was too busy to reply you before couple weeks ago. Since I had another rush problem.Now, I realized the example would be helpful for me. I can keep going my job now. Thank you.