Wordpress embedding: size control (height is too small)

I’m trying to embed a Bokeh plot into a Wordpress site (not blog, full site). The code output by Bokeh is opened into a browser and looks great. However… when I put that same code into a Wordpress webpage, the size of the plot is very different: i.e., the height is very small, making the plot hard to use. The width initially was also far too long for the page; I changed the plot width in the code and fixed that issue. I expected changing the height would also adjust what I see in the webpage, but it does not.

Here’s a screenshot of the result of the original code:

I’ve created a simpler version of the code to share here that results in the same issue:

# import needed packages ------------------------------------------------------

import pandas as pd
import datetime as dt

# Bokeh libraries
from bokeh.plotting  import figure, show
from bokeh.palettes  import Spectral6
from bokeh.transform import linear_cmap
from bokeh.models    import ColumnDataSource, ColorBar, DatetimeTickFormatter, Label
from bokeh.models    import HoverTool, ResetTool, SaveTool
from bokeh.io        import output_file

# options ---------------------------------------------------------------------

year = 2022

output_file('test_data.html', title = 'test Bokeh')

# get data --------------------------------------------------------------------

data           = pd.DataFrame()
data['N']      = [13,1,21,3,5,8,55,21,34,13]
data['date']   = [dt.datetime(2021,12,14), 
                  dt.datetime(2022,12,28),
                  dt.datetime(2022,1,10),
                  dt.datetime(2022,1,21),
                  dt.datetime(2022,2,14),
                  dt.datetime(2022,2,28),
                  dt.datetime(2022,3,14),
                  dt.datetime(2022,3,21),
                  dt.datetime(2022,4,3),
                  dt.datetime(2022,4,14)]

x = pd.to_datetime(data['date'], format = '%Y-%m-%d')
y = data['N']

# set up limits ---------------------------------------------------------------

N_max = max(data['N']) 

# create x-axis limits
start_date = pd.to_datetime(dt.date(year-1,11,1), format = '%Y-%m-%d')
end_date   = pd.to_datetime(dt.date(year,5,1),   format = '%Y-%m-%d')

N_final = y.values[-1]
y_max = 60
y_min = 0

# plot ------------------------------------------------------------------------

mapper = linear_cmap(field_name='y', palette=Spectral6 ,low=min(y) ,high=max(y))

# Create a figure with no toolbar and axis ranges of [0,3]
fig = figure(title='test data',
             plot_height=700, plot_width=1000,
             height_policy = 'max',
             x_axis_type='datetime',
             x_range=(start_date, end_date), 
             y_range=(y_min, y_max),
             tools = 'pan,box_zoom,ywheel_zoom,zoom_out,zoom_in,reset,save,help',
             toolbar_location='above')

fig.yaxis.axis_label = 'Number'
fig.yaxis.axis_label_text_font_size = '20pt'
fig.yaxis.major_label_text_font_size = '18pt'

fig.xaxis.major_label_text_font_size = '18pt'

fig.title.text_font_size = '14pt'

hover_tool = HoverTool(tooltips=
                       [('N', '@y'), ('Date', '$x{%F}')], 
                       mode='vline', 
                       formatters={"$x": "datetime"})
fig.add_tools(hover_tool)


# finesse datetime tick formatting
fig.xaxis.formatter = DatetimeTickFormatter(days='%b\n%d',months='%b\n%Y')

# Draw the coordinates as circles
fig.circle(x=x, y=y,
           fill_color = mapper,
           size=10, alpha=0.7)

# Show plot
show(fig)
    
# END =========================================================================

Hi @earth_sci please edit your post to use code formatting so that the code is intelligible (either with the </> icon on the editing toolbar, or triple backtick ``` fences around the code blocks)

Sorry @Bryan, I’m new to these types of forums! Change made. I believe.

1 Like

I’m not actually 100% sure what

does or how well it works. It’s probably dependent on the environment the embed is into as well. What is your actual goal on the wordpress page? Do you want to stretch to fill horizontal space with fixed or min height? A screenshot of the “not working” version would probably help here.

@Bryan

I added the height_policy = ‘max’ so that the plot would change its height based on the window size. Initially, it was not responsive and kept getting cut off when the browser size change. This worked well when the code output an html file and I opened it in a browser. However, when I added the code to the webpage, the height was really small. So I’m trying to determine how to make the webpage version like the output html version.

The screenshot is actually showing the ‘not working’ version! Notice in the code the size of the figure is 700 x 1000, so it should be relatively much larger in height than it is. If I change the height value in the code, I don’t see a change in the website figure at all.

@Bryan

I removed the height_policy = ‘max’ and the figure regained its expected height ratio with the width. So that’s good! But… it isn’t responsive, so it’s awkward to view on the webpage because it usually won’t fit. Also, oddly, I lost my y-axis labels…

screenshot of this:

@Bryan

So I suspect there’s interaction between Wordpress and Bokeh that is causing this that I do not understand. It would be good to understand this since WP is very common.

I noticed a small height difference between my test case and original case.
I added a few lines with only a period above or below the figure and for some reason the height of the figure increases with each added line. Weird.

Screenshot:

Now this prompts the question: what happens if I added a dozen more lines, simulating a longer webpage of text along with the plot? Sigh, the figure gets commensurately larger and unusable.

Ok… so the issue is clearly the responsiveness of the axes. (I had added width_policy=‘max’ also since this also was desirable, but not in my initial code.) When I remove the height_policy command, I again lost my y-axis labels. BUT when I remove both the policy statements, the figure appears as expected and its size can be changed as expected with the height and width values.

So: the question becomes more precisely: how can I embed a Bokeh figure that adjusts the axes responsively (very useful! and what I see when I open the output html file alone) while controlling the size within a WP page? I would expect this to not be an unusual user case?

@earth_sci AFAIK the “policy” properties are somewhat experimental, and so largely undocumented outside a cursory mention in the refguide. Can you try using the the more standard sizing mode options in this user guide chapter:

@Bryan

Ok, thanks. I’ll play around with the more standard sizing modes as suggested. The policy properties are useful. Hopefully they get more attention in time.

@Bryan

Everything works well! I replaced the policy statements

height_policy = 'max',
width_policy  = 'max',

with

sizing_mode='scale_both'

Thanks for your help!

FWIW with sizing_mode='scale_both' I would expect the policy properties to be redundant and unnecessary.

The policy properties are useful. Hopefully they get more attention in time.

I’m not sure there is anything you could do with them that cannot also be done with sizing_mode

1 Like