I'm trying to both embed a bokeh plot AND a bokeh datatable in a flask-generated website (same page) using some of the provided examples in the Bokeh docs. Both components work standalone. I tried to put them together via gridplot, but that seems only to work with plots, and a datatable is a 'widget'. I'm probably missing some very basic concept, but any pointers or links to examples are appreciated
1 Answer
The way I like to do this is to use the full power of the embed.components method and pass in a dictionary of plot objects and then render them wherever I need in my html template.
I call components as follows:
from bokeh.embed import components
script, div_dict = components({"plot": plot, "table": table})
My div_dict looks like this:
# {"plot": plot_div, "table": table_div})
I then pass this dict and the script into my template context and use it something like this:
<body>
{{ plot_div }}
{{ table_div }}
{{ script }}
</body>
Here's an example from the bokeh examples: https://github.com/bokeh/bokeh/blob/master/examples/embed/embed_multiple_responsive.py#L26
2 Comments
Hazzamataza
How does this work if you have 2 plots and a widget (where the plots plots are controlled by the same widget). I'm trying to exactly the above, but once I put them into separate components (so I can place anywhere in my HTML template) the relationship between the widgets and plots appears to break...
birdsarah
Are you using bokeh server or JS callbacks?
HBox/hplotandVBox/vplot