Bokeh 1.2.0 Embed Tabs into Django using Components Script,Div

Hi,

I’ve successfully rendered my bokeh app (consists of 6 Panels in Tabs) in a Django template, however, the widgets are not working. Is there anything special I need to do to activate the widgets? I have all JS scripts loaded. (Bokeh, Widgets, Tables, API) I’d prefer to keep my app in the form of tabs and run out of a main.py rather than adding individual templates and {script,divs} for each separate plot.

You say “bokeh app” but also mention {script,divs}, however these two things are not compatible. The {script,divs} output is for embedding only standalone Bokeh content, it does not function for embedding Bokeh server applications. Did you mean something different by “bokeh app”? If you have a Bokeh server application, then you would need to use one of the embedding functions listed in the user guide section specifically for embedding Bokeh Applications.

If you aren’t talking about a Bokeh server application, then more information is needed, e.g. relevant package, browser versions, JS console logs from the browser, some example of the code you are trying to use, etc.

here is an article on Reddit of a person explaining how to embed plots inside Django properly. He has some template code you can use perhaps it can help ?

Thanks Bryan,

I have a “Bokeh App” that looks like the one here GitHub - WillKoehrsen/Bokeh-Python-Visualization: A Bokeh project developed for learning and teaching Bokeh interactive plotting!. I’m hoping to simply embed this into Django. I’d prefer not to start up the “bokeh serve --show Bokeh_App/” separately, but I’m not sure if that’s possible.

Yes and no. You can Embed the Bokeh Server as Library, e.g in a separate thread in your Django app. There’s no example using Django in the repo (because I have basically no experience with Django and it is some effort to stand up even a toy example), but the principles should be nearly identical to the other examples that are there. Depending on your circumstance, this could be fine. However, If you expect many concurrent users, I expect this setup makes it harder to horizontally scale things. ^[1]

It also worth mentioning that there is an open PR #9010 Add support for Django Channels that should allow some closer integration with or within Django. This is funded work, but I am not involved directly, so any questions about it are best left on the issue/PR for the core devs who are working on it. I would not expect it to land for a few months.

1. And I am not saying it’s impossible to scale out when embedding the server programmatically. But I also have not spent any time thinking about what it might look like to do so. It’s something someone will need to figure out the details of. ↩︎

I am using bokeh with django. It’s not difficult to setup at all in comparison to flask. It’s pretty easy actually. As that reddit document shows and I can post my own code if you wish to use some of mine as a basic idea. You don’t need to use the bokeh server at all unless I misunderstood what your doing. I used the flask tutorial as a template and it works for Django too with a few minor modifications.

If anything you can do exactly what the flask tutorial does, just “pass the graph” yourself to the html page and it will update for you like I did.

If your using a django view function/class all you really need to do is just save the graph in the context {} variable and then use render() function to render it to the html page of interest like below where item data and data2 are the names of the graphs I wish to plot and json_dataxxx, json_datax and json_data2 are the graph its data an associated properties .

l = layout([plot], sizing_mode=‘scale_width’)
b = layout([p4], sizing_mode=‘scale_width’)

ab = layout([plot2], sizing_mode=‘fixed’)

item_text = json_item(l)
item_text3 = json_item(b)
item_text2 = json_item(ab)

json_dataxxx = json.dumps(item_text)
json_datax = json.dumps(item_text3)
json_data2 = json.dumps(item_text2)

 context = {'item':json_dataxxx, 'data': json_datax, 'data2': json_data2}
return render(request, 'pathtohtml/htmlflename.html', context )

then use some basic javascript in your html page in the div container where you wish to place your graph of interest and your graph will be displayed and rendered where myplot2 is the name of the div container for the graph.

  				 <script>
  					datax = {{data|safe}};
  					Bokeh.embed.embed_item(datax, "myplot2");
  				</script>

Any time I’ve glanced at a Django Hello World tutorial, there was more going on that any similar Flask tutorial, and it was not immediately, trivially obvious what all parts were required and what aren’t. So it’s definitely difficult in the sense that I haze zero bandwidth to sort that out. So, if you have working examples, that seems like it would be a substantial benefit to many users. A PR to add some new examples, or changes/additions to docs would be appreciated by many, I’m sure.