Dynamic plot_width, plot_height for embedded Bokeh visualisations

On Mon, Jan 19, 2015 at 11:05 AM, lachlanblackhall@gmail.com 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:

{{ plot_div|indent(4)|safe }}

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 bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

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.

On Jan 19, 2015, at 8:34 AM, Mateusz Paprocki <mateusz.paprocki@continuum.io> wrote:

Hi,

On Mon, Jan 19, 2015 at 11:05 AM, <lachlanblackhall@gmail.com> 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-12">
            <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 bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
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 bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
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\.

On Monday, January 19, 2015 at 10:20:07 AM UTC-5, Bryan Van de ven wrote:

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 mateusz....@continuum.io wrote:

Hi,

On Mon, Jan 19, 2015 at 11:05 AM, lachlanb...@gmail.com 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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.

On Friday, September 30, 2016 at 10:41:30 AM UTC-4, Reuben Jacobs wrote:

hi Bryan,

I am interested in doing this in the newest version of Bokeh. can you point me in the right direction? It seems that the plot_view.canvas does not exist anymore.

On Monday, January 19, 2015 at 10:20:07 AM UTC-5, Bryan Van de ven wrote:

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 mateusz....@continuum.io wrote:

Hi,

On Mon, Jan 19, 2015 at 11:05 AM, lachlanb...@gmail.com 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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.