Emdedding Bokeh in mediawiki

Community Support
1

Hi

Not sure if this belongs here or on mediawiki forum. But I am wondering is it possible to embed a plot in a wiki.

2

A solution I can think of – we can generate HTML pages for Bokeh plots and MediaWiki allows adding HTML and JavaScript to wiki pages.

3

If they allow embedding HTML and JS then in principle the answer should be “yes”. Core contributor @carolyn is interested in a blog post about this, if it works, and trying to work out a proof of concept demonstration.

4

Hi Simont!

I got this working. It’s a little bit of a long process the first time, but here are the steps to embed a static bokeh plot in a MediaWiki page.

  1. Create your plot and export the js. Here’s a simple example I used:
    from bokeh.resources import CDN
    from bokeh.plotting import figure
    from bokeh.embed import autoload_static

    plot = figure(height=200, width=200, x_range=(0,6), y_range=(0,6))
    plot.circle([1,3], [2,4], size=20)
    
    js, tag = autoload_static(plot, CDN, "scripts/bokeh_to_embed") # path doesn't matter; won't be using
    
    file = open('bokeh_to_embed.js', 'w') # filename doesn't matter either, use whatever you like
    file.write(js)
    file.close()

  1. Go to your MediaWiki Common.js page: your.mediawiki.server/index.php?title=MediaWiki:Common.js. Copy and paste the contents of your javascript (I named mine bokeh_to_embed.js above) into this page.
    *(*NOTE: this will probably make your Common.js very messy. There is supposed to be a way to put your script in a separate page and call it from Common.js, but I haven’t gotten this to work yet. Still trying.)

  2. Create a template page, something like your.mediawiki.server/index.php?title=Template:EmbedTest. On that template page, paste the following:

    <div id="7471c475-cdbd-4783-8768-ea8f964e589a"></div>

… except you’ll want to replace that ID with the ID from your script. So review the javascript you pasted above until you find the line that says something like:

`var element = document.getElementById("7471c475-cdbd-4783-8768-ea8f964e589a");`

That’s the ID you’ll want for your div.

  1. On the actual page you want to embed into, you can call this template. I named my template EmbedTest, so you would embed it with this line:

    {{EmbedTest}}

That’s it! Like I said, I’d love to keep the js somewhere other than Common.js for tidiness, so if you get that working, let us know. But I’ll keep fiddling with it on my end and do a more detailed writeup for the blog soon here.

Thanks, Simont! Great question!

3 Likes
5

Thank you so much for your speedy response