3

I have a project with many scripts using Matplotlib. I'd like to build a web interface for this project.

How do you place a Bokeh chart within a Chameleon template? I'm using Pyramid and the Deform bootstrap if that matters.

Does anyone have a good example out there?

EnergyGeek
  • 271
  • 1
  • 4
  • 14
  • Are you using static plots or are you looking to embed the Brokeh JS library? – Martijn Pieters Feb 24 '14 at 16:42
  • I'm looking for something interactive. I've a bunch of code written to generate plots using Matplotlib. I just found this http://jakevdp.github.io/blog/2014/01/10/d3-plugins-truly-interactive/ . It seems to be a better way to go for me as I won't have to rewrite all the code using matplotlib. Either way I need to understand how to inject the chart into a Chameleon template. – EnergyGeek Feb 24 '14 at 17:38

2 Answers2

2

There are several different issues to address here.

  1. If you are truly trying to port a lot of Matplotlib plots into interactive JS, then it's possible that the mpld3 project is a good fit for you. However, you should be aware that by using D3, there will be performance implications, depending on how many points are in your plot. Bokeh also does have basic Matplotlib support now, and will only be getting more. Jake is currently refactoring the mpld3 project into an explicit exporter and then D3 renderer, and we will also be potentially building off of this work for the Bokeh Matplotlib support.

  2. To do this with Bokeh, you can grab the raw HTML for a plot by looking at how e.g. HTMLFileSession.dumps() is implemented: https://github.com/ContinuumIO/bokeh/blob/master/bokeh/session.py#L295. The default template is bokeh/templates/base.html; however, this is a full HTML file, and not a fragment. The dumps() method is pretty straightforward, as is the default template, so you should be able to get what you need from looking at those. Hopefully for the next release, we will have finished out a HTMLFragmentSession which will make it easier to embed.

Peter Wang
  • 1,640
  • 10
  • 14
  • Okay, It sounds like I'll need to wait until Bokeh gets more mature. I did manage to get mpld3 to work. It was very simple and I only needed to edit a couple lines of code to display my original Matplotlib scripts within a browser. Injecting this into a Chameleon template was as easy as calling fig_to_d3(). That said, I am working with minute data. What's would you suggest that is faster than D3? – EnergyGeek Feb 25 '14 at 16:43
2

You want to use plot.create_html_snippet. This function returns the code that you want to appear in the HTML, the function also writes out an embed file.

This is what an embed snippet looks like

<script src="http://localhost:5006/static/dc0c7cfd-e657-4c79-8150-6a66be4dccb8.embed.js" bokeh_plottype="embeddata" bokeh_modelid="dc0c7cfd-e657-4c79-8150-6a66be4dccb8" bokeh_modeltype="Plot" async="true"></script>

the following arguments control how the embed file is written out, and where the js code searches for the embed files. embed_base_url controls the url path (it can be absolute or relative) that the javascript will search for the embed file in.

embed_save_loc controls the directory that python will write out the embed file in. embed_save_loc isn't necessary when server=True

static_path controls the url path (it can absolute or relative) that the javascript will use to construct URLS for bokeh.js and bokeh.css. It defaults to http://localhost:5006/static/, but could just as easily point to a CDN

When running the bokeh server, navigate to http://localhost:5006/bokeh/generate_embed/static . I think this requires you to be running on master because of a bug.

I hope this helps.

paddy
  • 63
  • 4
  • Thanks for the reply. I got mpld3 to work for me for now. It will be a while till I come back to this portion of my application. When I do I'll make sure to give this a try. – EnergyGeek Mar 14 '14 at 21:48