Force Bokeh to redraw plot after manually changing canvas element width and height in HTML?

Community Support
1

Hi everyone,

Wondering if anyone has experience with the following:

I am manually changing the bokeh canvas element width and height element with jquery but then the original plot image dissapears…my guess is I need to retrigger BokehJS to redraw the plot?

Some Javascript I am using:

var canvas = $(canvasWrapper).children();

$(canvas).css({‘width’: responsive_width, ‘height’: responsive_height});

//Setting these destroy the canvas image for some reason

$(canvas).attr(‘width’, responsive_width);

$(canvas).attr(‘height’, responsive_height);

As for why I’m doing this, its because plot resize mode in Bokeh Tabs doesnt seem to work correctly so I need to manually resize the bokeh plot canvas and related div elements.

Any help would be appreciated,

Corey

2

Hi omearac,

Unfortunately, it’s a bit more involved. With current Bokeh implementation, you have to change width and height attributes of the plot model (the value that’s returned by “figure(…)”), and then execute “window.dispatchEvent(new Event(‘resize’))” to trigger new size evaluation.

Regards,

Eugene

···

On Monday, January 15, 2018 at 6:40:24 PM UTC+7, omearac wrote:

Hi everyone,

Wondering if anyone has experience with the following:

I am manually changing the bokeh canvas element width and height element with jquery but then the original plot image dissapears…my guess is I need to retrigger BokehJS to redraw the plot?

Some Javascript I am using:

var canvas = $(canvasWrapper).children();

$(canvas).css({‘width’: responsive_width, ‘height’: responsive_height});

//Setting these destroy the canvas image for some reason

$(canvas).attr(‘width’, responsive_width);

$(canvas).attr(‘height’, responsive_height);

As for why I’m doing this, its because plot resize mode in Bokeh Tabs doesnt seem to work correctly so I need to manually resize the bokeh plot canvas and related div elements.

Any help would be appreciated,

Corey

3

Thanks Eugene,

Worked perfectly.

For the record here, here is the code I used to access the correct Model and change it:

            var bokehIndexObject = Bokeh.index;
            //Only Bokeh object so get the corresponding Model
            var bokehObject = bokehIndexObject[Object.keys(bokehIndexObject)[0]];
            var bokehModel = bokehObject.model;

            //Walk through the global Model objects Document to find the individual Model object
            //which is the Figure so we can reset its width (default is 1200) and height (default is 800)
            for(k in bokehModel.document._all_models) {
                var m = bokehModel.document.get_model_by_id(k)
                var h = m.attributes.height
                if( h == 800) {
                    m.attributes.height = responsive_height
                    m._height._value = responsive_height
                    m.attributes.width = responsive_width
                    m._width._value = responsive_width
                    break;
                }
            }
            window.dispatchEvent(new Event('resize'))

``

···

On Monday, January 15, 2018 at 2:37:19 PM UTC+1, Eugene Pakhomov wrote:

Hi omearac,

Unfortunately, it’s a bit more involved. With current Bokeh implementation, you have to change width and height attributes of the plot model (the value that’s returned by “figure(…)”), and then execute “window.dispatchEvent(new Event(‘resize’))” to trigger new size evaluation.

Regards,

Eugene

On Monday, January 15, 2018 at 6:40:24 PM UTC+7, omearac wrote:

Hi everyone,

Wondering if anyone has experience with the following:

I am manually changing the bokeh canvas element width and height element with jquery but then the original plot image dissapears…my guess is I need to retrigger BokehJS to redraw the plot?

Some Javascript I am using:

var canvas = $(canvasWrapper).children();

$(canvas).css({‘width’: responsive_width, ‘height’: responsive_height});

//Setting these destroy the canvas image for some reason

$(canvas).attr(‘width’, responsive_width);

$(canvas).attr(‘height’, responsive_height);

As for why I’m doing this, its because plot resize mode in Bokeh Tabs doesnt seem to work correctly so I need to manually resize the bokeh plot canvas and related div elements.

Any help would be appreciated,

Corey

4

Thank you Corey for your code, it was very helpful for me!