Bokehjs multiple Bokeh.Plotting.show

Community Support
1

Hi everyone,

I am currently developping a web page with data visualisation. I use BokehJS Library.
I want to place my charts in various

. So i need to use multiple time Bokeh.plotting.show().
The problem is that i can’t use linked chart with this method. (x_range = p.x_range)
It returns this error :
Uncaught Error: models must be owned by only a single document

I don’t want to use Bokeh.plotting.gridplot() because my website is complex and have text between chart.

Thank you very much

2

Assuming you have plots plot0 and plot1, and elements #el0 and #el1 to which they are to be rendered to, then this should work (this is pretty much what show() does):

async function my_show() {
  const {Document} = Bokeh.require("document")
  const doc = new Document()
  doc.add_root(plot0)
  doc.add_root(plot1)
  const el0 = document.querySelector("#el0")
  const el1 = document.querySelector("#el1")
  el0.classList.add(Bokeh.embed.BOKEH_ROOT)
  el1.classList.add(Bokeh.embed.BOKEH_ROOT)
  await Bokeh.embed.add_document_standalone(doc, null, [el0, el1])
}
my_show()

We intend to improve the API at some point (see bokehjs needs an idiomatic embedding API · Issue #10442 · bokeh/bokeh · GitHub).

3

Thank you very much for your help.
With this solution the last problem is the sizing. Graph overlap and i can’t see x axis.
Is there a way to force sizing_mode ito the document?

Here is the codepen of the problem : https://codepen.io/BokehJS/pen/RwKeYNg

You can check with plt.show(), the charts auto_resize on height.