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:

  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('''<!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.