10

I have a django application which eventually uses embedded bokeh visualizations.

Right now I get by using the bokeh.embed.components function and a template like:

<body>
    {{the_div|safe}}

    {{the_script|safe}}
</body>

Thanks to this stackoverflow question.

The thing is that now I would need to create more interactive visualizations, adding sliders, checkboxes and other controls.

This example looks like what I want, except for a couple of issues:

  1. I don't know how to embed that kind of object inside Django. I would say this is the way to go, but perhaps it's not.
  2. I'm a little bit confused about having to use the bokeh-server for this. Isn't there any easy-to-use pure javascript solution?

So, summarizing, I would like to know what is the standard approach to create dynamic chart interactions using django and bokeh.

Community
  • 1
  • 1
NublicPablo
  • 959
  • 11
  • 21
  • pure javascript solution for charts? something like d3.js? – Chris Hawkes Jul 23 '15 at 11:44
  • I was hoping bokeh to create the .js from my python code at a higher level. It already performs pretty well with my "more static" graphs. – NublicPablo Jul 23 '15 at 13:20
  • One alternative is to use the [BokehJS](http://bokeh.pydata.org/en/latest/docs/reference/bokehjs.html) and do everything in the client (just pass your data using json). The documentation is still ongoing and it's not very easy to use right now, but [simple examples](http://jsfiddle.net/bokeh/9GhAp/) are easy to find. – legaultmarc Jul 28 '15 at 18:25
  • why don't you use http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-widgets – euri10 Nov 25 '15 at 14:26

1 Answers1

2

There are two use cases:

without server

If you can perform any updates in JS (don't need to call actual python code), then it is very easy to add interactions using CustomJS callbacks. There are lots of examples at that link, but a basic simple code sample looks like:

from bokeh.io import vform
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, output_file, show

output_file("callback.html")

x = [x*0.005 for x in range(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

callback = CustomJS(args=dict(source=source), code="""
    var data = source.get('data');
    var f = cb_obj.get('value')
    x = data['x']
    y = data['y']
    for (i = 0; i < x.length; i++) {
        y[i] = Math.pow(x[i], f)
    }
    source.trigger('change');
""")

slider = Slider(start=0.1, end=4, value=1, step=.1, 
                title="power", callback=callback)

layout = vform(slider, plot)

show(layout)

That will create a standalone HTML document with a Bokeh plot and a slider, that updates the plot in reaction to the slider, with no need for a server (i.e. you could email it to someone or serve it on a static page and it would work).

with server

If you want the widgets, interactions, etc. to drive actual python code (e.g. scikit-learn, or Pandas) then you need to use the Bokeh server. Happily the new server as of version 0.11 is much more robust, performant, scalable, and simple to use. You can see several live deployed Bokeh applications (with links to their source code) here:

http://demo.bokeh.org/

As well as extensive documentation about various kinds of deployments in the documentation here:

http://docs.bokeh.org/en/0.11.1/docs/user_guide/server.html

bigreddot
  • 33,642
  • 5
  • 69
  • 122
  • It looks like `CustomJS` is what I was looking for, but it seems to me that it's been added after I asked the question. Just for completeness, from which version is it available? – NublicPablo May 13 '16 at 10:37
  • An early version appeared in `0.9` but the current version has been present since `0.10` – bigreddot May 13 '16 at 14:17
  • Sorry, I know this is an old question. @bigreddot Would you expect the code for without server to worth with components? I ran this code in Django but can't get the interaction to work. – Pawel Nov 28 '18 at 15:01
  • Yes, in general, However the JS API has changed some since this answer was posted, e.g. there is no `trigger` method anymore, which is probably the source of any issue. There are lots of examples of JS callbacks demonstrating stable 1.0+ syntax here: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html – bigreddot Nov 28 '18 at 15:59