Bokeh ploting multiples charts in a layout throws ERROR : (BOTH_CHILD_AND_ROOT)

Question

Today I'm asking for some help while creating a web app to visualize data using Bokeh 0.11.1.

First of all, I'm using Python 2.7 and Django 1.9.5 to run the app. I'm programming with PyCharm professional edition, all this running on a Windows 7.

At first everything works fine for me with Bokeh, I created some functions to draw plots and add these to my templates. When I had created several different functions for plotting, I thought it was a bad idea to go on like this, meaning, drawing each plot one by one and adding its javascript to my templates.

I want to do this because I think Bokeh writes in javascript many redundant functions each time you ask it to plot a single chart. After all, any javascript generated works as a standalone. I think if I ask Bokeh to draw all charts in the same layout it will not wright X times the same javascript functions. Moreover, in my python code it'll be cleaner to send one layout than sending one string containing javascript for each of my charts/plots.

So I tried to embed multiple plots in the same layout, as that example from Bokeh 0.11.1 documentation shows it :

from bokeh.io import output_file, show, vplot
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create a new plot
s1 = figure(width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# create another one
s2 = figure(width=250, height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# create and another
s3 = figure(width=250, height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

# put all the plots in a VBox
p = vplot(s1, s2, s3)

# show the results
show(p)

When I used this to create a Bokeh vform and display it with Django, my page remains blank. Same thing happened with hplot, vform, and gridplot.

I then tried to run my code in the PyCharm python console to understand better what the problem should be, and while running the code from the bokeh example (and my own code) the console returns :

ERROR:C:\Python27\lib\site-packages\bokeh\core\validation\check.py:W-1004 (BOTH_CHILD_AND_ROOT): Models should not be a document root if they are in a layout box: Figure, ViewModel:Plot, ref _id: 77ff5340-e67d-4802-8997-79e84e19d206

ERROR:C:\Python27\lib\site-packages\bokeh\core\validation\check.py:W-1004 (BOTH_CHILD_AND_ROOT): Models should not be a document root if they are in a layout box: Figure, ViewModel:Plot, ref _id: 77ff5340-e67d-4802-8997-79e84e19d206, Chart, ViewModel:Plot, ref _id: f725c7c5-fade-48f6-a4f8-a159dc32002e, Chart, ViewModel:Plot, ref _id: c96b8132-53c2-44f6-9ae9-b27bab1dcf85, Chart, ViewModel:Plot, ref _id: 320afbf4-03f5-4b78-b299-d1799fb607c8

then my default browser opens and displays the file layout.html, which remains blank.

I've already searched on the internet what the problem should be. As it was told here, I changed every instance of figure by instances of Figure. Yet, it doesn't work, moreover my main app uses Bar, and Scatter charts, which are not working too.

In this other topic, it is said the problem could come from PyCharm. Yet I don't think its the problem, manually opening layout.html displays a blank page too, and my plots and charts are working fine when I'm not trying to embed this in a single vplot or vform but instead display them one by one.

I had a similar problem before when I was trying to add some Bokeh widgets to my charts with that piece of code because I used a vplot and hplot instead of vform. So it's not what I'm facing today, I'm properly using bokeh vform to display correctly my widgets.

I'm really wondering what's going wrong considering even examples given by the documentation aren't working. What am I doing wrong ? Is there something I need to do before using vforms/plots ?

Thanks for your help.

EDIT 26/04/2016 :

Someone gave me a hand on Bokeh's google group. These are some solutions that are currently not working for me, but might help someone with the same error :

-Use vbox or vplot instead of vform (in my case won't work, since I'm using widgets I need a vform)

-Use p.add_layout the manually extending renderers

Answer 1

Bokeh underwent quite a lot of change and experimentation when it was a younger library, but things have finally settled down. Since this question was posted, functions like vform and vplot have been removed, and the issues described here resolved. In any recent version, users should use the column layout function to get a column of plots or widgets, and it behaves as expected. Here is the example updated:

from bokeh.io import output_file, show
from bokeh.layouts import column
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create a new plot
s1 = figure(width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# create another one
s2 = figure(width=250, height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# create and another
s3 = figure(width=250, height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

# put all the plots in a VBox
p = column(s1, s2, s3)

# show the results
show(p)