File_html v auto_static

[paul_c]

Hi, I am trying to embed bokeh charts on a page of a ghost blog.

Using this code as an example, I end up with three results.

dates = pd.date_range("20210101", periods=6)
df = pd.DataFrame(np.random.randn(6, 4), index=dates, columns=list("ABCD"))
df.rename_axis('Date', axis=0, inplace=True)

source = ColumnDataSource(df)

button = Button(label="Download data", button_type="success", height=30, width=80)

s1 = figure()
s1.title.text = "Trial"
s1.line(x='Date',
        y='A',
        source = source,
        color='blue',
        legend_label='A')


s1.line(x='Date',
        y='B',
        source = source,
        color='green',
        legend_label='B')


hover = HoverTool()
hover.tooltips = [('Date', '@Date{%F}'),
                  ('A', '@{A}{0,0.0}'),
                  ('B', '@{B}{0,0.0}'),]
hover.formatters = {'@Date': 'datetime'}
s1.add_tools(hover)

1. End with html = file_html(s1, CDN, "my plot"), paste id into the html tag in the body of a ghost blog page and the rest of the code into a page header

This produces the result I want, as can be seen here: html

But this is just a simple example. The charts I want to produce use a lot more data, making the html files too big to use on the ghost site.

2. End with js, tag = autoload_static(s1, CDN, file.js), paste the tag and js into a html tag in the body of a ghost blog page.

The result is here: autostatic_code

It looks ok, but the formatting for the hover points doesn’t seem to work, and the bokeh toolbar disappears.

3. End with js, tag = autoload_static(s1, CDN, file.js), paste the tag into a html tag in the body of a ghost blog page, and include a link to the js file in a footer.

The result is here: autostatic_file

The formatting for the hover points is now right, and the bokeh toolbar is back, but the location is now mixed up with the main footer of the page.

I realise some of these issues might be related to the Ghost website. But anyway, I wanted to ask:

1. What if anything I can do to resolve them

2. Or if there is a better way of embedding the charts. I’ve put most of the charts I need in heroku apps, but I wanted to be able to have a few directly in the ghost site.

[Bryan]

@paul_c

ghost blog.

What is a ghost blog?

file_html is used to generate entire self-contained HTML pages. Unless you intend to embed the resulting pages with iframes, it’s probably not what you want. For what you are describing, either json_item or components sounds like a simpler/easier solution than autoload_static (which is a rather specialized tool). The embedding API are all described and demonstrated here:

https://docs.bokeh.org/en/latest/docs/user_guide/embed.html

[paul_c]

Thanks.

ghost blog…perhaps should have said “Ghost” blog. https://ghost.org/

[Bryan]

I guess I’d only add, from the description, it sounds like the CSS on that site is somehow interfering with Bokeh’s own CSS, so it’s possible other embed methods will also have the same issues. Upcoming Bokeh 3.0 moves everything to shadow DOM so there should be full isolation that would prevent any issues like you describe. But that release is at least a month or two away.

[paul_c]

Thanks. The people at Ghost also said there was a problem with the CSS.

I’ll keep a look out for the new release.