As Mateusz describes, there are still some places where plumbing needs to be put into place. But the canvas can absolutely be resized dynamically (as the Resize Tool demonstrates). What actually needs to be updated is the Canvas dimensions. So for now you could adapt Mateusz’ code, except updating the canvas dims directly, as the Resize Tool does:
[https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/tool/gestures/resize_tool.coffee#L41](https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/tool/gestures/resize_tool.coffee#L41)
All the top level views are stored in Bokeh.index, so something along these lines (untested):
plot_view = Bokeh.index[<modelid>]
canvas = plot_view.canvas
canvas._set_dims([new_width, new_height])
The first improvement is to hook up the plumbing so that setting plot_width and plot_height work as expected. Then next step might be to offer some easier integrations that allow users to spell this kind of responsive arrangement from python without adding their own JS.
Bryan
On Jan 19, 2015, at 8:34 AM, Mateusz Paprocki [email protected] wrote:
Hi,
On Mon, Jan 19, 2015 at 11:05 AM, [email protected] wrote:
Good evening all,
Apologies if this is a silly question but I have scoured the docs and cant seem to find an answer.
I am using Bokeh to embed visualisations using Flask and Flask templates - essentially extending the simple example in the embed directory in Bokeh samples. I am using bootstrap within my HTML template and then placing the the auto-generated div into the template as per the example. In the template I have the following code:
<div class="col-md-6">
{{ plot_div|indent(4)|safe }}
</div>
<div class="col-md-6"></div>
</div>
where {{ plot_div|indent(4)|safe }} is replaced by the embedded Bokeh div.
The problem is that if I don’t set the plot_width and plot_height before rendering then it defaults to 600px by 600px with causes the plot to bleed over into the second column in the template. I can fix this by setting the plot_width and plot_height before rendering but this forces me to know the column widths ahead of time, which defeats the purpose of using divs and a responsive template.
Is there a way to get the embedded Bokeh visualisation to resize automatically based on the size of its parent div?
In theory, you could use a little bit of JavaScript to achieve this, e.g.:
Bokeh.Collections(‘Plot’).at(0).set(“plot_width”, $(“#some_div”).width()));
// similarly for plot_height
assuming there is only one plot (you can use an ID otherwise) and bokeh is loaded in non-dev mode (otherwise you would have to use require(“common/base”, function(Base) { Base.Collections … }); ). However, I tried this and it doesn’t work. Apparently bokehjs doesn’t listen to plot_width (or plot_height) change event. Even if this is fixed, that code still doesn’t work, so there is a something more wrong here (unless I’m missing something?). All properties exposed by bokeh’s API should be accessible and modifiable in bokejs, but currently this isn’t always true.
Mateusz
Any help or advice would be greatly appreciated.
Lachlan
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c943eed0-1674-40a7-ab32-036cf65bd3fb%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8izrcmHPovHoTcotxj%3DzPAjUc5hLqf9pSbjvoVnJ3hmRg%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.