bokeh django plot embed: large amount of white space in generated div tag

Question

I have a Bokeh chart embed working well in my Django project but I'm having problems with the embed that it creates. I'm importing both the script and div in my template as {{ div | safe }} and {{ script | safe }} but the div is creating a large white space after itself on my template.

Any ideas?

Here's an image of how it looks in the browser

And here's the div which is really long for some reason

Script:

<script type="text/javascript">
    (function() {
  var fn = function() {
    Bokeh.safely(function() {
      (function(root) {
        function embed_document(root) {
          var docs_json = {"998040af-6ec7-4d0a-9512-892e668e543b":{"roots":{"references":[{"attributes":{},"id":"39af7b08-c2a0-4239-8140-5fb6715147c3","type":"ResetTool"},{"attributes":{},"id":"66fe871a-6ed6-485c-8785-2348adf6114e","type":"SaveTool"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_scroll":"auto","active_tap":"auto","tools":[{"id":"5974d4bb-2135-4a2a-ae1d-33193cf46b77","type":"PanTool"},{"id":"4d082f4c-d578-4258-ada6-3f36133784c8","type":"WheelZoomTool"},{"id":"9faa6e3c-28e7-497a-a09a-d8ca67e6dffd","type":"BoxZoomTool"},{"id":"66fe871a-6ed6-485c-8785-2348adf6114e","type":"SaveTool"},{"id":"39af7b08-c2a0-4239-8140-5fb6715147c3","type":"ResetTool"},{"id":"07186e88-4a07-43f0-8246-0e4dd3ac404e","type":"HelpTool"}]},"id":"66619cf2-604a-43ed-b139-0b376222a87e","type":"Toolbar"},{"attributes":{"callback":null},"id":"451449e3-c761-4c57-a674-8b1b5a37f378","type":"DataRange1d"},{"attributes":{"callback":null},"id":"e0c60293-c503-4885-af6b-132872d94c5c","type":"DataRange1d"},{"attributes":{"below":[{"id":"c419969e-5741-4736-90de-34259d29a726","type":"LinearAxis"}],"border_fill_color":{"value":"whitesmoke"},"left":[{"id":"5e62dbcd-09f9-410b-9b19-c8f420b90bfb","type":"LinearAxis"}],"plot_height":150,"plot_width":400,"renderers":[{"id":"c419969e-5741-4736-90de-34259d29a726","type":"LinearAxis"},{"id":"42ac392d-f455-4528-95e3-f940470c065b","type":"Grid"},{"id":"5e62dbcd-09f9-410b-9b19-c8f420b90bfb","type":"LinearAxis"},{"id":"120afe85-61ea-4894-8366-9d5b0887adde","type":"Grid"},{"id":"5ba3c58f-6a2a-4af8-bb1a-bb6add5cc76d","type":"BoxAnnotation"},{"id":"d5d3beda-b199-4e31-a82a-4ca59930767d","type":"GlyphRenderer"}],"sizing_mode":"scale_width","title":{"id":"01d880cf-b868-49b4-b91b-bec60d5de6d2","type":"Title"},"toolbar":{"id":"66619cf2-604a-43ed-b139-0b376222a87e","type":"Toolbar"},"x_range":{"id":"e0c60293-c503-4885-af6b-132872d94c5c","type":"DataRange1d"},"x_scale":{"id":"8a36f571-dd09-4aed-980c-e19037c9b24a","type":"LinearScale"},"y_range":{"id":"451449e3-c761-4c57-a674-8b1b5a37f378","type":"DataRange1d"},"y_scale":{"id":"9da9e3b4-e359-4786-bd7c-daf86e94c3bf","type":"LinearScale"}},"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"07186e88-4a07-43f0-8246-0e4dd3ac404e","type":"HelpTool"},{"attributes":{},"id":"d5ced699-d662-4c31-9b6a-793d97c998c8","type":"BasicTickFormatter"},{"attributes":{"formatter":{"id":"0da65dd3-5702-4c74-91e1-71733066a74f","type":"BasicTickFormatter"},"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"41d2e0a6-2feb-4437-bb35-efcea6c1c813","type":"BasicTicker"}},"id":"c419969e-5741-4736-90de-34259d29a726","type":"LinearAxis"},{"attributes":{"data_source":{"id":"2e6d3a2c-3d54-4b8a-984d-9d620aa7febe","type":"ColumnDataSource"},"glyph":{"id":"e0d6dab9-8df6-4abb-b825-b273548f408a","type":"MultiLine"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"75db6381-cd4f-4161-9926-ec219d3bd761","type":"MultiLine"},"selection_glyph":null,"view":{"id":"f8571075-8034-434f-9579-5197405959a9","type":"CDSView"}},"id":"d5d3beda-b199-4e31-a82a-4ca59930767d","type":"GlyphRenderer"},{"attributes":{"source":{"id":"2e6d3a2c-3d54-4b8a-984d-9d620aa7febe","type":"ColumnDataSource"}},"id":"f8571075-8034-434f-9579-5197405959a9","type":"CDSView"},{"attributes":{"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"41d2e0a6-2feb-4437-bb35-efcea6c1c813","type":"BasicTicker"}},"id":"42ac392d-f455-4528-95e3-f940470c065b","type":"Grid"},{"attributes":{},"id":"0da65dd3-5702-4c74-91e1-71733066a74f","type":"BasicTickFormatter"},{"attributes":{"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"line_width":{"value":4},"xs":{"field":"xs"},"ys":{"field":"ys"}},"id":"75db6381-cd4f-4161-9926-ec219d3bd761","type":"MultiLine"},{"attributes":{"callback":null,"column_names":["xs","ys","line_color","line_alpha"],"data":{"line_alpha":[0.8,0.3],"line_color":["firebrick","navy"],"xs":[[1,3,2],[3,4,6,6]],"ys":[[2,1,4],[4,7,8,5]]}},"id":"2e6d3a2c-3d54-4b8a-984d-9d620aa7febe","type":"ColumnDataSource"},{"attributes":{"formatter":{"id":"d5ced699-d662-4c31-9b6a-793d97c998c8","type":"BasicTickFormatter"},"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"132532f4-248b-4037-9069-7d27a093e89a","type":"BasicTicker"}},"id":"5e62dbcd-09f9-410b-9b19-c8f420b90bfb","type":"LinearAxis"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"5ba3c58f-6a2a-4af8-bb1a-bb6add5cc76d","type":"BoxAnnotation"},{"attributes":{"dimension":1,"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"132532f4-248b-4037-9069-7d27a093e89a","type":"BasicTicker"}},"id":"120afe85-61ea-4894-8366-9d5b0887adde","type":"Grid"},{"attributes":{"line_alpha":{"field":"line_alpha"},"line_color":{"field":"line_color"},"line_width":{"value":4},"xs":{"field":"xs"},"ys":{"field":"ys"}},"id":"e0d6dab9-8df6-4abb-b825-b273548f408a","type":"MultiLine"},{"attributes":{},"id":"8a36f571-dd09-4aed-980c-e19037c9b24a","type":"LinearScale"},{"attributes":{},"id":"41d2e0a6-2feb-4437-bb35-efcea6c1c813","type":"BasicTicker"},{"attributes":{"plot":null,"text":""},"id":"01d880cf-b868-49b4-b91b-bec60d5de6d2","type":"Title"},{"attributes":{},"id":"132532f4-248b-4037-9069-7d27a093e89a","type":"BasicTicker"},{"attributes":{},"id":"9da9e3b4-e359-4786-bd7c-daf86e94c3bf","type":"LinearScale"},{"attributes":{},"id":"5974d4bb-2135-4a2a-ae1d-33193cf46b77","type":"PanTool"},{"attributes":{},"id":"4d082f4c-d578-4258-ada6-3f36133784c8","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"5ba3c58f-6a2a-4af8-bb1a-bb6add5cc76d","type":"BoxAnnotation"}},"id":"9faa6e3c-28e7-497a-a09a-d8ca67e6dffd","type":"BoxZoomTool"}],"root_ids":["77eaaafa-b380-4c45-832a-65faea06bb98"]},"title":"Bokeh Application","version":"0.12.10"}};
          var render_items = [{"docid":"998040af-6ec7-4d0a-9512-892e668e543b","elementid":"46dc4d68-63cf-4288-aa48-347675c82cc3","modelid":"77eaaafa-b380-4c45-832a-65faea06bb98"}];

          root.Bokeh.embed.embed_items(docs_json, render_items);
        }

        if (root.Bokeh !== undefined) {
          embed_document(root);
        } else {
          var attempts = 0;
          var timer = setInterval(function(root) {
            if (root.Bokeh !== undefined) {
              embed_document(root);
              clearInterval(timer);
            }
            attempts++;
            if (attempts > 100) {
              console.log("Bokeh: ERROR: Unable to embed document because BokehJS library is missing")
              clearInterval(timer);
            }
          }, 10, root)
        }
      })(window);
    });
  };
  if (document.readyState != "loading") fn();
  else document.addEventListener("DOMContentLoaded", fn);
})();

</script>

Div:

<div class="bk-root">
    <div class="bk-plotdiv" id="46dc4d68-63cf-4288-aa48-347675c82cc3"></div>
</div>

did you check the template layout using developer tools? and can you add the script for your question? — ytsejam, Oct 28 '17 at 23:18
I did, one of the
's that the div tag creates is very long for some reason, longer than it needs to be. I added a screenshot of that and the script as well. Thx! — adamkost, Oct 28 '17 at 23:29

score 1 · Answer 1 · answered Oct 30 '17 at 14:39

You can add .bk-root { height: auto; } (or initial) to your CSS to fix this. Bokeh sets width and height of its root element to 100%, to allow scale_* and stretch_* sizing modes to fill maximum available space. However, aspect ratio preserving modes may give you results like what's observed here.

score 0 · Answer 2 · answered Oct 29 '17 at 16:38

0

You have set the plot sizing_mode to be "scale_width" which is explicitly a direction to Bokeh to take as much horizontal space as possible. Perhaps you want the default sizing mode "fixed".

answered Oct 29 '17 at 16:38

bigreddot

33,642
5
69
122

Thanks for the response. My problem is it's taking too much vertical space. Not horizontal. I'm not sure what I set that's making the div so tall. – adamkost Oct 29 '17 at 16:44
Not sure offhand. I'd suggest making a [GitHub issue](https://github.com/bokeh/bokeh/issues) with a complete, minimal python script to investigate. – bigreddot Oct 29 '17 at 16:55

score 0 · Answer 3 · answered Oct 29 '17 at 18:56

0

check the docs about border

    from bokeh.plotting import figure, output_file, show

    output_file("border.html")

    p = figure(plot_width=400, plot_height=400)
    p.border_fill_color = "whitesmoke"
    p.min_border_left = 80

    p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

    show(p)

answered Oct 29 '17 at 18:56

ytsejam

3,291
7
39
69

Unfortunately not it either. The gray you see in my picture is actually the "whitesmoke" border. The large white extra div space still exists even if I add `min_border_bottom`. – adamkost Oct 29 '17 at 19:49
did you check what causes white space I mean css or html code ? – ytsejam Oct 29 '17 at 20:01
Yup, it was something like this. I just added an answer describing what I had to do. – adamkost Oct 29 '17 at 20:45

score 0 · Accepted Answer · answered Oct 29 '17 at 20:48

Figured it out. I inspected my HTML and noticed that I had the issue as described here. I had Unicode Character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF) at the top of my templates (&#65279).

Here's an image of the Inspect element: img

I had to open my html templates in Notepad++ and convert from UTF-8 BOM to UTF-8 (under the "Encoding" menu).

bokeh django plot embed: large amount of white space in generated div tag

4 Answers4