how to embed standalone bokeh graphs into django templates

Question

I want to display graphs offered by the bokeh library in my web application via django framework but I don't want to use the bokeh-server executable because it's not the good way. so is that possible? if yes how to do that?

score 53 · Accepted Answer · edited Nov 23 '19 at 00:55

53

Using the Embedding Bokeh Plots documentation example as suggested by Fabio Pliger, one can do this in Django:

in the views.py file, we put:

from django.shortcuts import render
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components

def simple_chart(request):
    plot = figure()
    plot.circle([1,2], [3,4])

    script, div = components(plot, CDN)

    return render(request, "simple_chart.html", {"the_script": script, "the_div": div})

in the urls.py file we can put :

from myapp.views import simple_chart 
...
...
...
url(r'^simple_chart/$', simple_chart, name="simple_chart"),
...
...

in the template file simple_chart.html we'll have :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Experiment with Bokeh</title>
    <script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
</head>
<body>

    {{ the_div|safe }}

    {{ the_script|safe }}
</body>
</html>

And it works.

edited Nov 23 '19 at 00:55

bigreddot

33,642
5
69
122

answered Apr 08 '15 at 19:47

iMitwe

1,218
16
35

6

Thanks for putting the suggestion in practice! Actually, adding some "how can I embed my bokeh plot in {whatever_web_framework}?" section to the docs or somewhere could be a good addition. If you want to help out with this, propose an issue for discussion or a PR adding this kind of example please feel free to do so. Would be much appreciated! Thanks! – Fabio Pliger Apr 09 '15 at 12:08
1

If you change the version to 0.11.1 in the scripts and css, it also works with Bokeh 0.11.1. – Barney Szabolcs Apr 13 '16 at 13:01
1

If you just get a white screen and in the browser console you see 'TypeError: Bokeh.safely is not a function', then refer to: https://stackoverflow.com/questions/43612360/django-bokeh-safely-is-not-a-function – pjdavis Jul 10 '18 at 21:15

score 5 · Answer 2 · answered Apr 08 '15 at 11:17

You don't need to use bokeh-server to embed bokeh plots. It just means you'll not be using (and probably don't need) the extra features it provides.

In fact you can embed bokeh plots in many ways like generating standalone html, by generating bokeh standalone components that you can then embed in you django app when rendering templates or with the method we call "autoloading" which makes bokeh return a tag that will replace itself with a Bokeh plot. You'll find better details looking at the documentation.

Another good source of inspiration is the embed examples you can find in the repository.

score 3 · Answer 3 · answered Jan 29 '17 at 17:20

It is also possible to have it work with AJAX requests. Let's say we have a page loaded and would like to show a plot on button click without reloading the whole page. From Django view we return Bokeh script and div in JSON:

from django.http import JsonResponse
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components

def simple_chart(request):
  plot = figure()
  plot.circle([1,2], [3,4])

  script, div = components(plot, CDN)

  return JsonResponse({"script": script, "div": div})

When we get AJAX response in JS (in this example Jquery is used) the div is first appended to the existing page and then the script is appended:

$("button").click(function(){
  $.ajax({
    url: "/simple_chart", 
    success: function(result){
      var bokeh_data = JSON.parse(result);
      $('#bokeh_graph').html(bokeh_data.div);
      $("head").append(bokeh_data.script);
  }});
});

This worked well for me but i had to remove JSON.parse() – Saleem Khan Feb 09 '20 at 01:31 — Saleem Khan, Feb 09 '20 at 01:31

score 2 · Answer 4 · answered Sep 20 '15 at 15:08

2

It must put {{the_script|safe}} inside the head tag

answered Sep 20 '15 at 15:08

Xavi Moreno

201
1
3

2

You can input wherever you want, even at the footer of the page. – iMitwe Oct 07 '16 at 08:25
and for improve user experiment in decreasing the loading time of the page, it is probably better in the footer – negstek Aug 01 '17 at 11:26

hobs · Answer 5 · 2017-09-17T21:30:18.950

1

Here's a flask app that uses jquery to interract with a bokeh plot. Check out the templates/ for javascript you can reuse. Also search for bokeh-demos on github.

edited Sep 17 '17 at 21:30

answered Dec 01 '16 at 21:27

hobs

18,473
10
83
106

1

the link is dead – Jonathan Sep 14 '17 at 22:09
It seems bokeh deleted thier bokeh-demos repo. But others have created similar ones. This one is an ajax demo using flask and jquery: https://github.com/kgullikson88/bokeh-demos/tree/stocks_demo/stocks – hobs Sep 17 '17 at 21:27

how to embed standalone bokeh graphs into django templates

5 Answers5

Linked