how to embed standalone bokeh graphs into django templates

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.

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.

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);
  }});
});

how to embed standalone bokeh graphs into django templates

Related

Recent Posts