Simple HTML embedding example

Hi Bokeh folks,

I’m having a great time so far with Bokeh. I’m looking to use it to create a static report sheet which displays many figures from a numerical simulation on one static website. I am getting a little confused navigating the various methods for embedding which I have found via google + StackOverflow, since it seems like the code may have evolved further since these questions were posted. Is there a simple way to embed multiple plots into an HTML template? My template uses Bootstrap.js to hide and show plots so that I don’t overwhelm the user with too many plots at once. I see that the Embedding section of the user guide has a “Coming Soon!,” but I was hoping there might already be a way to accomplish my task.

One way to do this appears to be using create_html_snippet(), but when running bokeh 0.4.4 under python3.4, I get the following error:

ERROR: TypeError: must be str, not bytes [bokeh.plotobject]

path = plot1.create_html_snippet()

File “/usr/lib/python3.4/site-packages/bokeh/plotobject.py”, line 323, in create_html_snippet

f.write(js_code)

Which seems like it is a python2 → 3 error. Any help on embedding would be much appreciated. Thank you!

Ian

Hi Ian,

Embedding code was recently refactored and it is in master right now. We are developing examples too.

You can grab master or wait until we deliver Bokeh nightly builds (soon)…

There some new docs in master and also the embedding functions are documented.

Last, I have currently a WIP PR showing an embedding example, you can take a look to see the general idea about embedding: https://github.com/ContinuumIO/bokeh/pull/652

Damian

···

On Mon, May 26, 2014 at 3:33 AM, Ian Czekala [email protected] wrote:

Hi Bokeh folks,

I’m having a great time so far with Bokeh. I’m looking to use it to create a static report sheet which displays many figures from a numerical simulation on one static website. I am getting a little confused navigating the various methods for embedding which I have found via google + StackOverflow, since it seems like the code may have evolved further since these questions were posted. Is there a simple way to embed multiple plots into an HTML template? My template uses Bootstrap.js to hide and show plots so that I don’t overwhelm the user with too many plots at once. I see that the Embedding section of the user guide has a “Coming Soon!,” but I was hoping there might already be a way to accomplish my task.

One way to do this appears to be using create_html_snippet(), but when running bokeh 0.4.4 under python3.4, I get the following error:

ERROR: TypeError: must be str, not bytes [bokeh.plotobject]

path = plot1.create_html_snippet()

File “/usr/lib/python3.4/site-packages/bokeh/plotobject.py”, line 323, in create_html_snippet

f.write(js_code)

Which seems like it is a python2 → 3 error. Any help on embedding would be much appreciated. Thank you!

Ian

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/f2960a44-8543-44f8-82a7-b4fae490d95f%40continuum.io.

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

Hi Damian,

Thank you for your help. Your example has me on my way, but I still ran into a couple difficulties. It seems like your example is for a bokeh server? I am unable to get a minimal static example (using mode=relative) working.

My code is at this gist: https://gist.github.com/iancze/3f5b1416ff5120e739cc

I am using your make_snippet() function to generate the tag and id, which I then copy into my frame.html file. However, things don’t seem to show property. Using chrome to inspect the webpage, it yields the error: “Uncaught TypeError: Cannot read property ‘inject_plot’ of undefined” from output.js, which is the js snippet I wish to embed.

Thank you for your help,

Ian

···

On Mon, May 26, 2014 at 9:02 AM, Damian Avila [email protected] wrote:

Hi Ian,

Embedding code was recently refactored and it is in master right now. We are developing examples too.

You can grab master or wait until we deliver Bokeh nightly builds (soon)…

There some new docs in master and also the embedding functions are documented.

Last, I have currently a WIP PR showing an embedding example, you can take a look to see the general idea about embedding: https://github.com/ContinuumIO/bokeh/pull/652

Damian

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/GiyjQ2emQH8/unsubscribe.

To unsubscribe from this group and all its topics, 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/CAM9Ly3GCH7ZywG9pnWzpzSkCKxHOM4BxmdSb5rJZbc04iH9Hfg%40mail.gmail.com.

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

On Mon, May 26, 2014 at 3:33 AM, Ian Czekala [email protected] wrote:

Hi Bokeh folks,

I’m having a great time so far with Bokeh. I’m looking to use it to create a static report sheet which displays many figures from a numerical simulation on one static website. I am getting a little confused navigating the various methods for embedding which I have found via google + StackOverflow, since it seems like the code may have evolved further since these questions were posted. Is there a simple way to embed multiple plots into an HTML template? My template uses Bootstrap.js to hide and show plots so that I don’t overwhelm the user with too many plots at once. I see that the Embedding section of the user guide has a “Coming Soon!,” but I was hoping there might already be a way to accomplish my task.

One way to do this appears to be using create_html_snippet(), but when running bokeh 0.4.4 under python3.4, I get the following error:

ERROR: TypeError: must be str, not bytes [bokeh.plotobject]

path = plot1.create_html_snippet()

File “/usr/lib/python3.4/site-packages/bokeh/plotobject.py”, line 323, in create_html_snippet

f.write(js_code)

Which seems like it is a python2 → 3 error. Any help on embedding would be much appreciated. Thank you!

Ian

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/f2960a44-8543-44f8-82a7-b4fae490d95f%40continuum.io.

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

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].

In fact in my examples I am embedding using static sites… it seems to be a little but in “relative” mode (we are discussing it yet), so I am using “server” mode, but you can see in the next two lines I am overwriting the js an css files locations (this is a workaround, we have to fix it yet). So, actually my example is static embedding… sorry for the confusion…

In your example… you have to use the autoload_static function to get the js and the tag… check the following function from the example I gave you with comments inline:

+def make_snippet(plot):

  • js_static_js = “static/js/”

  • js_static_css = “static/css/”

  • js_filename = plot._id + “.js”

//from a plot instance you can get the id…

  • js_path = js_static_js + js_filename
···

On Mon, May 26, 2014 at 8:53 PM, Ian Czekala [email protected] wrote:

Hi Damian,

Thank you for your help. Your example has me on my way, but I still ran into a couple difficulties. It seems like your example is for a bokeh server? I am unable to get a minimal static example (using mode=relative) working.

My code is at this gist: https://gist.github.com/iancze/3f5b1416ff5120e739cc

I am using your make_snippet() function to generate the tag and id, which I then copy into my frame.html file. However, things don’t seem to show property. Using chrome to inspect the webpage, it yields the error: “Uncaught TypeError: Cannot read property ‘inject_plot’ of undefined” from output.js, which is the js snippet I wish to embed.

Thank you for your help,

Ian

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/CA%2BcQX8Y5z5zVUKnfzpwE8U%3DKGHuJ1hvMzQy2HNExF_DQnLzt0Q%40mail.gmail.com.

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

On Mon, May 26, 2014 at 9:02 AM, Damian Avila [email protected] wrote:

Hi Ian,

Embedding code was recently refactored and it is in master right now. We are developing examples too.

You can grab master or wait until we deliver Bokeh nightly builds (soon)…

There some new docs in master and also the embedding functions are documented.

Last, I have currently a WIP PR showing an embedding example, you can take a look to see the general idea about embedding: https://github.com/ContinuumIO/bokeh/pull/652

Damian

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/GiyjQ2emQH8/unsubscribe.

To unsubscribe from this group and all its topics, 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/CAM9Ly3GCH7ZywG9pnWzpzSkCKxHOM4BxmdSb5rJZbc04iH9Hfg%40mail.gmail.com.

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

On Mon, May 26, 2014 at 3:33 AM, Ian Czekala [email protected] wrote:

Hi Bokeh folks,

I’m having a great time so far with Bokeh. I’m looking to use it to create a static report sheet which displays many figures from a numerical simulation on one static website. I am getting a little confused navigating the various methods for embedding which I have found via google + StackOverflow, since it seems like the code may have evolved further since these questions were posted. Is there a simple way to embed multiple plots into an HTML template? My template uses Bootstrap.js to hide and show plots so that I don’t overwhelm the user with too many plots at once. I see that the Embedding section of the user guide has a “Coming Soon!,” but I was hoping there might already be a way to accomplish my task.

One way to do this appears to be using create_html_snippet(), but when running bokeh 0.4.4 under python3.4, I get the following error:

ERROR: TypeError: must be str, not bytes [bokeh.plotobject]

path = plot1.create_html_snippet()

File “/usr/lib/python3.4/site-packages/bokeh/plotobject.py”, line 323, in create_html_snippet

f.write(js_code)

Which seems like it is a python2 → 3 error. Any help on embedding would be much appreciated. Thank you!

Ian

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/f2960a44-8543-44f8-82a7-b4fae490d95f%40continuum.io.

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

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].

Hi Damian,

Thanks again for your help. I tried what you recommended, but I can’t seem to get things to work. I updated the gist here : https://gist.github.com/iancze/3f5b1416ff5120e739cc

I think my main problem now might be with the HTML file itself. I’m not sure what I need to put into the HTML file in order to embed the plot. My question is, what should the HTML file look like?

Thank you,

Ian

···

On Mon, May 26, 2014 at 8:55 PM, Damian Avila [email protected] wrote:

In fact in my examples I am embedding using static sites… it seems to be a little but in “relative” mode (we are discussing it yet), so I am using “server” mode, but you can see in the next two lines I am overwriting the js an css files locations (this is a workaround, we have to fix it yet). So, actually my example is static embedding… sorry for the confusion…

In your example… you have to use the autoload_static function to get the js and the tag… check the following function from the example I gave you with comments inline:

+def make_snippet(plot):

  • js_static_js = “static/js/”
  • js_static_css = “static/css/”
  • js_filename = plot._id + “.js”

//from a plot instance you can get the id…

  • js_path = js_static_js + js_filename
  • res = Resources(“server”)
  • res.js_files = [js_static_js + “bokeh.min.js”]
  • res.css_files = [js_static_css + “bokeh.min.css”]

//overwritten js and css files location as I said previously (a workaround for now, to avoid confusion you can change this to “relative” or “absolute”, but still use the workaround)

  • js, tag = autoload_static(plot,
  •                          res,
    
  •                          js_path)
    

// here autoload static generate the js_snippet to write later to a file (see next lines) and the script snippet you have to use in your html template (take into account that js_path have to “point” to the js you are writing in the next lines).

  • with open(js_path, “w”) as f:
  •    f.write(js)
    
  • print(“Wrote %s” % js_filename)
  • return tag, plot._id

Hope it helps… if not, let me know…

Damián

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/GiyjQ2emQH8/unsubscribe.

To unsubscribe from this group and all its topics, 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/CAM9Ly3EALXww8ONbbUTeetwHc9T0ak3XoNL4tiFOeTEcNhY_Aw%40mail.gmail.com.

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

On Mon, May 26, 2014 at 8:53 PM, Ian Czekala [email protected] wrote:

Hi Damian,

Thank you for your help. Your example has me on my way, but I still ran into a couple difficulties. It seems like your example is for a bokeh server? I am unable to get a minimal static example (using mode=relative) working.

My code is at this gist: https://gist.github.com/iancze/3f5b1416ff5120e739cc

I am using your make_snippet() function to generate the tag and id, which I then copy into my frame.html file. However, things don’t seem to show property. Using chrome to inspect the webpage, it yields the error: “Uncaught TypeError: Cannot read property ‘inject_plot’ of undefined” from output.js, which is the js snippet I wish to embed.

Thank you for your help,

Ian

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/CA%2BcQX8Y5z5zVUKnfzpwE8U%3DKGHuJ1hvMzQy2HNExF_DQnLzt0Q%40mail.gmail.com.

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

On Mon, May 26, 2014 at 9:02 AM, Damian Avila [email protected] wrote:

Hi Ian,

Embedding code was recently refactored and it is in master right now. We are developing examples too.

You can grab master or wait until we deliver Bokeh nightly builds (soon)…

There some new docs in master and also the embedding functions are documented.

Last, I have currently a WIP PR showing an embedding example, you can take a look to see the general idea about embedding: https://github.com/ContinuumIO/bokeh/pull/652

Damian

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/GiyjQ2emQH8/unsubscribe.

To unsubscribe from this group and all its topics, 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/CAM9Ly3GCH7ZywG9pnWzpzSkCKxHOM4BxmdSb5rJZbc04iH9Hfg%40mail.gmail.com.

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

On Mon, May 26, 2014 at 3:33 AM, Ian Czekala [email protected] wrote:

Hi Bokeh folks,

I’m having a great time so far with Bokeh. I’m looking to use it to create a static report sheet which displays many figures from a numerical simulation on one static website. I am getting a little confused navigating the various methods for embedding which I have found via google + StackOverflow, since it seems like the code may have evolved further since these questions were posted. Is there a simple way to embed multiple plots into an HTML template? My template uses Bootstrap.js to hide and show plots so that I don’t overwhelm the user with too many plots at once. I see that the Embedding section of the user guide has a “Coming Soon!,” but I was hoping there might already be a way to accomplish my task.

One way to do this appears to be using create_html_snippet(), but when running bokeh 0.4.4 under python3.4, I get the following error:

ERROR: TypeError: must be str, not bytes [bokeh.plotobject]

path = plot1.create_html_snippet()

File “/usr/lib/python3.4/site-packages/bokeh/plotobject.py”, line 323, in create_html_snippet

f.write(js_code)

Which seems like it is a python2 → 3 error. Any help on embedding would be much appreciated. Thank you!

Ian

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/f2960a44-8543-44f8-82a7-b4fae490d95f%40continuum.io.

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

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].

Going to bed right now, 2 am here… but reading fast, I think you have to delete line 32 in test_plot.py…

bplt.output_file(“image.html”, title=“Test Plot”, mode=“relative”)

I will try to look into it tomorrow, but if you beat me (I do not know your timezone), try it and let me know.

And also let me know any js console error, and where it is your static css and js files (relative to test_plot.py)

Damian

···

On Tue, May 27, 2014 at 1:17 AM, Ian Czekala [email protected] wrote:

Hi Damian,

Thanks again for your help. I tried what you recommended, but I can’t seem to get things to work. I updated the gist here : https://gist.github.com/iancze/3f5b1416ff5120e739cc

I think my main problem now might be with the HTML file itself. I’m not sure what I need to put into the HTML file in order to embed the plot. My question is, what should the HTML file look like?

Thank you,

Ian

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/CA%2BcQX8YmpXBY-_EZCGph1juit%3DcazGm%2B0JeD9A1fU4t1ecuF6Q%40mail.gmail.com.

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

On Mon, May 26, 2014 at 8:55 PM, Damian Avila [email protected] wrote:

In fact in my examples I am embedding using static sites… it seems to be a little but in “relative” mode (we are discussing it yet), so I am using “server” mode, but you can see in the next two lines I am overwriting the js an css files locations (this is a workaround, we have to fix it yet). So, actually my example is static embedding… sorry for the confusion…

In your example… you have to use the autoload_static function to get the js and the tag… check the following function from the example I gave you with comments inline:

+def make_snippet(plot):

  • js_static_js = “static/js/”
  • js_static_css = “static/css/”
  • js_filename = plot._id + “.js”

//from a plot instance you can get the id…

  • js_path = js_static_js + js_filename
  • res = Resources(“server”)
  • res.js_files = [js_static_js + “bokeh.min.js”]
  • res.css_files = [js_static_css + “bokeh.min.css”]

//overwritten js and css files location as I said previously (a workaround for now, to avoid confusion you can change this to “relative” or “absolute”, but still use the workaround)

  • js, tag = autoload_static(plot,
  •                          res,
    
  •                          js_path)
    

// here autoload static generate the js_snippet to write later to a file (see next lines) and the script snippet you have to use in your html template (take into account that js_path have to “point” to the js you are writing in the next lines).

  • with open(js_path, “w”) as f:
  •    f.write(js)
    
  • print(“Wrote %s” % js_filename)
  • return tag, plot._id

Hope it helps… if not, let me know…

Damián

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/GiyjQ2emQH8/unsubscribe.

To unsubscribe from this group and all its topics, 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/CAM9Ly3EALXww8ONbbUTeetwHc9T0ak3XoNL4tiFOeTEcNhY_Aw%40mail.gmail.com.

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

On Mon, May 26, 2014 at 8:53 PM, Ian Czekala [email protected] wrote:

Hi Damian,

Thank you for your help. Your example has me on my way, but I still ran into a couple difficulties. It seems like your example is for a bokeh server? I am unable to get a minimal static example (using mode=relative) working.

My code is at this gist: https://gist.github.com/iancze/3f5b1416ff5120e739cc

I am using your make_snippet() function to generate the tag and id, which I then copy into my frame.html file. However, things don’t seem to show property. Using chrome to inspect the webpage, it yields the error: “Uncaught TypeError: Cannot read property ‘inject_plot’ of undefined” from output.js, which is the js snippet I wish to embed.

Thank you for your help,

Ian

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/CA%2BcQX8Y5z5zVUKnfzpwE8U%3DKGHuJ1hvMzQy2HNExF_DQnLzt0Q%40mail.gmail.com.

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

On Mon, May 26, 2014 at 9:02 AM, Damian Avila [email protected] wrote:

Hi Ian,

Embedding code was recently refactored and it is in master right now. We are developing examples too.

You can grab master or wait until we deliver Bokeh nightly builds (soon)…

There some new docs in master and also the embedding functions are documented.

Last, I have currently a WIP PR showing an embedding example, you can take a look to see the general idea about embedding: https://github.com/ContinuumIO/bokeh/pull/652

Damian

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/GiyjQ2emQH8/unsubscribe.

To unsubscribe from this group and all its topics, 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/CAM9Ly3GCH7ZywG9pnWzpzSkCKxHOM4BxmdSb5rJZbc04iH9Hfg%40mail.gmail.com.

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

On Mon, May 26, 2014 at 3:33 AM, Ian Czekala [email protected] wrote:

Hi Bokeh folks,

I’m having a great time so far with Bokeh. I’m looking to use it to create a static report sheet which displays many figures from a numerical simulation on one static website. I am getting a little confused navigating the various methods for embedding which I have found via google + StackOverflow, since it seems like the code may have evolved further since these questions were posted. Is there a simple way to embed multiple plots into an HTML template? My template uses Bootstrap.js to hide and show plots so that I don’t overwhelm the user with too many plots at once. I see that the Embedding section of the user guide has a “Coming Soon!,” but I was hoping there might already be a way to accomplish my task.

One way to do this appears to be using create_html_snippet(), but when running bokeh 0.4.4 under python3.4, I get the following error:

ERROR: TypeError: must be str, not bytes [bokeh.plotobject]

path = plot1.create_html_snippet()

File “/usr/lib/python3.4/site-packages/bokeh/plotobject.py”, line 323, in create_html_snippet

f.write(js_code)

Which seems like it is a python2 → 3 error. Any help on embedding would be much appreciated. Thank you!

Ian

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/f2960a44-8543-44f8-82a7-b4fae490d95f%40continuum.io.

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

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].