Embedding server-based bokeh plot in html

I am relatively new to both Bokeh/Python and HTML. I have created a served-based Bokeh plot which I want to display on a webpage. I have been following the instructions at Embedding Bokeh content — Bokeh 2.4.2 Documentation. In particular, I am using autoload_server to generate a script. However, when I place the script tag in the head of the HTML document (which is apparently correct, according to the last line at the above link):

The following error message appears on the webpage:

Bokeh Error

Error rendering Bokeh model: element with id ‘6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100’ must be under

So then I remove the script from the head and place it in the body. But this results in a completely blank webpage; the plot doesn’t render at all.

Any help is greatly appreciated!

I’m still relatively new as well, but learning everyday and I’ll do my best to help out. Can you send me a copy of your bokeh chart, along with the command you type on the command line to launch the bokeh server? I’ll take a look tonight.

···

On Sep 19, 2017 5:02 PM, “Rohan Kadakia” [email protected] wrote:

I am relatively new to both Bokeh/Python and HTML. I have created a served-based Bokeh plot which I want to display on a webpage. I have been following the instructions at https://bokeh.pydata.org/en/latest/docs/user_guide/embed.html. In particular, I am using autoload_server to generate a script. However, when I place the script tag in the head of the HTML document (which is apparently correct, according to the last line at the above link):

<script

src=“http://localhost:5006/autoload.js?bokeh-autoload-element=6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100&bokeh-absolute-url=http://localhost:5006&bokeh-session-id=bTinOCNtjuDagomoQgcw1EKJ7dUMkzSQJIRKozmGiqTc

id=“6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100”

data-bokeh-model-id=“676400d3-9929-4d9e-aefe-2fb440f526d6”

data-bokeh-doc-id=“”

The following error message appears on the webpage:

Bokeh Error

Error rendering Bokeh model: element with id ‘6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100’ must be under

So then I remove the script from the head and place it in the body. But this results in a completely blank webpage; the plot doesn’t render at all.

Any help is greatly appreciated!

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/e1ec8031-61d6-471c-b18f-eb19e600bce3%40continuum.io.

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

What does javascript console say? There must be an error thrown in there.

···

On Tuesday, September 19, 2017 at 6:28:17 PM UTC-4, Jonathan Bennett wrote:

I’m still relatively new as well, but learning everyday and I’ll do my best to help out. Can you send me a copy of your bokeh chart, along with the command you type on the command line to launch the bokeh server? I’ll take a look tonight.

On Sep 19, 2017 5:02 PM, “Rohan Kadakia” [email protected] wrote:

I am relatively new to both Bokeh/Python and HTML. I have created a served-based Bokeh plot which I want to display on a webpage. I have been following the instructions at https://bokeh.pydata.org/en/latest/docs/user_guide/embed.html. In particular, I am using autoload_server to generate a script. However, when I place the script tag in the head of the HTML document (which is apparently correct, according to the last line at the above link):

<script

src=“http://localhost:5006/autoload.js?bokeh-autoload-element=6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100&bokeh-absolute-url=http://localhost:5006&bokeh-session-id=bTinOCNtjuDagomoQgcw1EKJ7dUMkzSQJIRKozmGiqTc

id=“6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100”

data-bokeh-model-id=“676400d3-9929-4d9e-aefe-2fb440f526d6”

data-bokeh-doc-id=“”

The following error message appears on the webpage:

Bokeh Error

Error rendering Bokeh model: element with id ‘6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100’ must be under

So then I remove the script from the head and place it in the body. But this results in a completely blank webpage; the plot doesn’t render at all.

Any help is greatly appreciated!

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/e1ec8031-61d6-471c-b18f-eb19e600bce3%40continuum.io.

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

Thanks for your response. The command is just “bokeh serve”. Locally, I can view my Bokeh plot without any issues, so the server is running fine.

My question is really about HTML, I suppose, and not Bokeh. I’m still not sure how/where to include the script tag in the HTML document.

···

On Tuesday, September 19, 2017 at 6:28:17 PM UTC-4, Jonathan Bennett wrote:

I’m still relatively new as well, but learning everyday and I’ll do my best to help out. Can you send me a copy of your bokeh chart, along with the command you type on the command line to launch the bokeh server? I’ll take a look tonight.

On Sep 19, 2017 5:02 PM, “Rohan Kadakia” [email protected] wrote:

I am relatively new to both Bokeh/Python and HTML. I have created a served-based Bokeh plot which I want to display on a webpage. I have been following the instructions at https://bokeh.pydata.org/en/latest/docs/user_guide/embed.html. In particular, I am using autoload_server to generate a script. However, when I place the script tag in the head of the HTML document (which is apparently correct, according to the last line at the above link):

<script

src=“http://localhost:5006/autoload.js?bokeh-autoload-element=6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100&bokeh-absolute-url=http://localhost:5006&bokeh-session-id=bTinOCNtjuDagomoQgcw1EKJ7dUMkzSQJIRKozmGiqTc

id=“6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100”

data-bokeh-model-id=“676400d3-9929-4d9e-aefe-2fb440f526d6”

data-bokeh-doc-id=“”

The following error message appears on the webpage:

Bokeh Error

Error rendering Bokeh model: element with id ‘6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100’ must be under

So then I remove the script from the head and place it in the body. But this results in a completely blank webpage; the plot doesn’t render at all.

Any help is greatly appreciated!

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/e1ec8031-61d6-471c-b18f-eb19e600bce3%40continuum.io.

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

Hi Kevin,

How do I access the console? The only error message I see is:

Bokeh Error
Error rendering Bokeh model: element with id ‘6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100’ must be under

It appears right at the top of the page, when I put the script in the head.

···

On Tuesday, September 19, 2017 at 8:07:57 PM UTC-4, kevin desimone wrote:

What does javascript console say? There must be an error thrown in there.

On Tuesday, September 19, 2017 at 6:28:17 PM UTC-4, Jonathan Bennett wrote:

I’m still relatively new as well, but learning everyday and I’ll do my best to help out. Can you send me a copy of your bokeh chart, along with the command you type on the command line to launch the bokeh server? I’ll take a look tonight.

On Sep 19, 2017 5:02 PM, “Rohan Kadakia” [email protected] wrote:

I am relatively new to both Bokeh/Python and HTML. I have created a served-based Bokeh plot which I want to display on a webpage. I have been following the instructions at https://bokeh.pydata.org/en/latest/docs/user_guide/embed.html. In particular, I am using autoload_server to generate a script. However, when I place the script tag in the head of the HTML document (which is apparently correct, according to the last line at the above link):

<script

src=“http://localhost:5006/autoload.js?bokeh-autoload-element=6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100&bokeh-absolute-url=http://localhost:5006&bokeh-session-id=bTinOCNtjuDagomoQgcw1EKJ7dUMkzSQJIRKozmGiqTc

id=“6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100”

data-bokeh-model-id=“676400d3-9929-4d9e-aefe-2fb440f526d6”

data-bokeh-doc-id=“”

The following error message appears on the webpage:

Bokeh Error

Error rendering Bokeh model: element with id ‘6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100’ must be under

So then I remove the script from the head and place it in the body. But this results in a completely blank webpage; the plot doesn’t render at all.

Any help is greatly appreciated!

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/e1ec8031-61d6-471c-b18f-eb19e600bce3%40continuum.io.

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

Ah, got it. I thought you were using flask or django to generate the html . . . in which case I would have suggested you try typing:

bokeh_server_app.py --allow-websocket-origin=“*”

Sorry I wasn’t much help.

I will “second” the script going in the body, though.

Good luck.

···

On Tue, Sep 19, 2017 at 9:08 PM, Rohan Kadakia [email protected] wrote:

Thanks for your response. The command is just “bokeh serve”. Locally, I can view my Bokeh plot without any issues, so the server is running fine.

My question is really about HTML, I suppose, and not Bokeh. I’m still not sure how/where to include the script tag in the HTML document.

On Tuesday, September 19, 2017 at 6:28:17 PM UTC-4, Jonathan Bennett wrote:

I’m still relatively new as well, but learning everyday and I’ll do my best to help out. Can you send me a copy of your bokeh chart, along with the command you type on the command line to launch the bokeh server? I’ll take a look tonight.

On Sep 19, 2017 5:02 PM, “Rohan Kadakia” [email protected] wrote:

I am relatively new to both Bokeh/Python and HTML. I have created a served-based Bokeh plot which I want to display on a webpage. I have been following the instructions at https://bokeh.pydata.org/en/latest/docs/user_guide/embed.html. In particular, I am using autoload_server to generate a script. However, when I place the script tag in the head of the HTML document (which is apparently correct, according to the last line at the above link):

<script

src=“http://localhost:5006/autoload.js?bokeh-autoload-element=6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100&bokeh-absolute-url=http://localhost:5006&bokeh-session-id=bTinOCNtjuDagomoQgcw1EKJ7dUMkzSQJIRKozmGiqTc

id=“6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100”

data-bokeh-model-id=“676400d3-9929-4d9e-aefe-2fb440f526d6”

data-bokeh-doc-id=“”

The following error message appears on the webpage:

Bokeh Error

Error rendering Bokeh model: element with id ‘6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100’ must be under

So then I remove the script from the head and place it in the body. But this results in a completely blank webpage; the plot doesn’t render at all.

Any help is greatly appreciated!

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/e1ec8031-61d6-471c-b18f-eb19e600bce3%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].

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/5907fa36-c000-430f-81be-f58d89e990ed%40continuum.io.

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

Jonathan Bennett
Kono Analytics
p:
713.489.4338
w:
konoanalytics.com