Embed Bokeh In Webpage

Community Support
, ,
1

Hi guys,

I’m trying to create a Bokeh server and embed the output into another webpage. From what I’ve read here it seems like I can embed using the output of server_document. So when I try embedding the example:

import bokeh
from bokeh.embed import server_document
script = server_document("https://demo.bokeh.org/sliders")
print(script)

<script id="p1003">
  (function() {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'blob';
    xhr.open('GET', "https://demo.bokeh.org/sliders/autoload.js?bokeh-autoload-element=p1003&bokeh-app-path=/sliders&bokeh-absolute-url=https://demo.bokeh.org/sliders", true);
    xhr.onload = function (event) {
      const script = document.createElement('script');
      const src = URL.createObjectURL(event.target.response);
      script.src = src;
      document.body.appendChild(script);
    };
    xhr.send();
  })();
    </script>

Into a webpage such as index.html:

<!DOCTYPE html>
<html>
    
<head>

</head>
    
    
    
<body>

<script id="p1003">
  (function() {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'blob';
    xhr.open('GET', "https://demo.bokeh.org/sliders/autoload.js?bokeh-autoload-element=p1003&bokeh-app-path=/sliders&bokeh-absolute-url=https://demo.bokeh.org/sliders", true);
    xhr.onload = function (event) {
      const script = document.createElement('script');
      const src = URL.createObjectURL(event.target.response);
      script.src = src;
      document.body.appendChild(script);
    };
    xhr.send();
  })();
    </script>

What am I missing?


</body>
    
</html>

Is there something I’m missing here?

Thank you

2

@from_mpl You need to provide more information in order for anyone to be able to help: relevant library, browser, system versions. What actually happened? i.e. did the page fail to render at all? Partially in some way? How exactly? Are there any errors in the Bokeh server logs? In the browser JS console? What actual commands did you run, specifically?

3

Ah okay, I had assumed that I was missing something so obvious that you would be able to see it from what I had provided.

Errors on server logs? What commands did you run, specifically?

I am not running a Bokeh server, at this stage I’m just using Sliders, assuming that Bokeh website is running a server to host this page, and that I just need to paste the content into my html page to render the content.

Other info:
Across FF, Chrome and Safari, when I load the index.html page I just get the “What am I missing?” content from the body of the page without any Bokeh content rendered.

Errors in browser JS console?

Yes, some:

fsave
fsave897×507 153 KB

4

This could have been mentioned explicitly, it is an unusual thing to try and it was buried in a code block.

I am not sure the demo site specifically will be embeddable this way. It has a complex terraform deployment on AWS, and I honestly can’t say whether the configuration there will permit WS connections from unrelated domains. There’s really just too many variables for this to be a useful experiment, and I would advise you to run your own bokeh serve sliders.py to test with.

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.