Resizing two plots at once

Community Support
1

Hey everyone,
I just started using bokeh. I have two plots, each of them has it’s own ResizeTool.
I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).
Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance
Panzki

2

Have you tried using the same datasource for both of them? That has generally worked for me.

···

On Tuesday, September 15, 2015 at 7:36:58 AM UTC-4, [email protected] wrote:

Hey everyone,
I just started using bokeh. I have two plots, each of them has it’s own ResizeTool.
I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).
Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance
Panzki

3

Hey,
thanks for your reply, but unfortunately this didn’t work out. The plots sizes are still not ‘linked’.
I hope anyone has solution for this.

···

Am Dienstag, 15. September 2015 13:36:58 UTC+2 schrieb [email protected]:

Hey everyone,
I just started using bokeh. I have two plots, each of them has it’s own ResizeTool.
I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).
Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance
Panzki

4

I don't believe this is currently feasible, but it seems reasonable. Please feel free to open a feature request issue on the GitHub issue tracker:

  Issues · bokeh/bokeh · GitHub

Bryan

···

On Sep 15, 2015, at 3:08 PM, [email protected] wrote:

Hey,
thanks for your reply, but unfortunately this didn't work out. The plots sizes are still not 'linked'.
I hope anyone has solution for this.

Am Dienstag, 15. September 2015 13:36:58 UTC+2 schrieb p4n...@gmail.com:
Hey everyone,
I just started using bokeh. I have two plots, each of them has it's own ResizeTool.
I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).
Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance
Panzki

--
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/dcaeb120-2da8-4ea0-a265-d3f38fed52b0%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

5

Hi Bryan,
thanks for your reply. I’ll consider to make a feature request.

If I embed a plot into an html file, is it than possible to adjust the width of the plot to fill the whole div, if the width of the div is set 100%?
I think this qould be a possible workaround for my usage.

Thanks for all your replies
Panzki

···

Am Dienstag, 15. September 2015 13:36:58 UTC+2 schrieb [email protected]:

Hey everyone,
I just started using bokeh. I have two plots, each of them has it’s own ResizeTool.
I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).
Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance
Panzki

6

There is work underway towards "responsive" plots, that may make it into the 0.10 release at the end of the month.

Bryan

···

On Sep 15, 2015, at 3:23 PM, [email protected] wrote:

Hi Bryan,
thanks for your reply. I'll consider to make a feature request.

If I embed a plot into an html file, is it than possible to adjust the width of the plot to fill the whole div, if the width of the div is set 100%?
I think this qould be a possible workaround for my usage.

Thanks for all your replies
Panzki

Am Dienstag, 15. September 2015 13:36:58 UTC+2 schrieb p4n...@gmail.com:
Hey everyone,
I just started using bokeh. I have two plots, each of them has it's own ResizeTool.
I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).
Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance
Panzki

--
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/6f785de5-6107-4aee-9878-26cd7f01cf19%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

7

Hi Tom, it’s manual, but this should be possible now.

In a bokeh dashboard that I made (https://github.com/birdsarah/gtimelog-viz) all the bokeh plots were responsive. The code is here: https://github.com/birdsarah/gtimelog-viz/blob/master/app/templates/js/resize_plots.js#L4

In the above, I attach to window resize, but every element has a resize event https://developer.mozilla.org/en-US/docs/Web/Events/resize

So you should be able to attach a similar piece of js to the one above that updates the size of plot A based on the resize of B or visa versa.

The responsive work I’m doing at the moment will hopefully make the simple case of responsive much easier. I hadn’t considered this use case, but I will - thanks!

Sincerely,

Sarah Bird

···

On Tue, Sep 15, 2015 at 3:48 PM, Bryan Van de Ven [email protected] wrote:

There is work underway towards “responsive” plots, that may make it into the 0.10 release at the end of the month.

Bryan

On Sep 15, 2015, at 3:23 PM, [email protected] wrote:

Hi Bryan,

thanks for your reply. I’ll consider to make a feature request.

If I embed a plot into an html file, is it than possible to adjust the width of the plot to fill the whole div, if the width of the div is set 100%?

I think this qould be a possible workaround for my usage.

Thanks for all your replies

Panzki

Am Dienstag, 15. September 2015 13:36:58 UTC+2 schrieb [email protected]:

Hey everyone,

I just started using bokeh. I have two plots, each of them has it’s own ResizeTool.

I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).

Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance

Panzki

–

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/6f785de5-6107-4aee-9878-26cd7f01cf19%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/8EC49AFE-54C3-41BE-8F98-9A07C597678B%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

8

Hi Sarah,
thanks for your reply, I really appreciate your efforts.
I’ll try to wrap my head arround that javascript code, alltough my javascript skills aren’t the best. Maybe I can figure this out before the 0.10 release, if not I’ll have a good reason to check out the new features.

Kind regards
Panzki

9

Hi,

Yes, I’m sorry, it’s also extra complicated by the fact that its actually jinja template code.

I may have an update for you later today.

Best,

Bird

···

On Wed, Sep 16, 2015 at 3:42 AM, [email protected] wrote:

Hi Sarah,
thanks for your reply, I really appreciate your efforts.
I’ll try to wrap my head arround that javascript code, alltough my javascript skills aren’t the best. Maybe I can figure this out before the 0.10 release, if not I’ll have a good reason to check out the new features.

Kind regards
Panzki

–

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/ffaed598-5e69-49af-8ae2-45b7bedc94a7%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

10

Hi Sarah,
first I want to thank you for your time, effort and kindness. I already tinkered arround with the js you provided with the goal of resizing my plots to the complet width of the window.

Here I have a little sample page for testing: http://panzki.github.io/specs/test.html
My customized js can be found here: https://github.com/Panzki/specs/blob/gh-pages/js/resize.js

This are the first lines of javascript I’ve written, so chances are good that they contain some bullshit. For me it seems like, that the js is loaded and executed, because the console.log() statement from line 35 is executed. (I can see the message in the firefox/chrome console)
The problem is that the plots are not resized. One guess of mine is that I used a wrong modell id (or other id). I replaced the placeholders for the ids in the template by hand with the ids I found in my html.
I hope this information will help to find a solution.

-Panzki

11

Hi,

Firstly - NICE!

Yes. The ids are not static. They are generated by bokeh on the fly. I believe I have an issue somewhere about overriding this that would make this kind of thing easier.

For the div id - you can probably get away without this, just wrap your chart in your own div and then you can manually target this to get the current width/height, for your desired width, you can just use the window.width()

But you do need the element id for: https://github.com/Panzki/specs/blob/gh-pages/js/resize.js#L37 Bokeh.index["44bb4831-9213-491e-86c8-ee43ea32ec53"];

To get this you are going to need the new components method - which I recently updated for this exact use case. https://github.com/bokeh/bokeh/blob/0.9.3/bokeh/embed.py#L38

This is what I did in gtimelog-viz. See:

https://github.com/birdsarah/gtimelog-viz/blob/master/app/utils/embed_charts.py#L31

for where I call the components method.

I then have to do a bit more setup in html templates, but I get access to the element id.

There are other ways you could accomplish the same. Try playing with the components method to see what you get back.

Note that if you call the components method and also file_html or something like that different element ids will be created.

Sorry there isn’t better documentation on this - it’s a very new feature.

Bird

···

On Wed, Sep 16, 2015 at 12:10 PM, [email protected] wrote:

Hi Sarah,
first I want to thank you for your time, effort and kindness. I already tinkered arround with the js you provided with the goal of resizing my plots to the complet width of the window.

Here I have a little sample page for testing: http://panzki.github.io/specs/test.html
My customized js can be found here: https://github.com/Panzki/specs/blob/gh-pages/js/resize.js

This are the first lines of javascript I’ve written, so chances are good that they contain some bullshit. For me it seems like, that the js is loaded and executed, because the console.log() statement from line 35 is executed. (I can see the message in the firefox/chrome console)
The problem is that the plots are not resized. One guess of mine is that I used a wrong modell id (or other id). I replaced the placeholders for the ids in the template by hand with the ids I found in my html.
I hope this information will help to find a solution.

-Panzki

–

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/5d0d64b9-4976-45f7-b9aa-bdbec95a18ab%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

12

Hey,
I got it! I implemented the resizing for a single plot with a hardcoded modell id. The links remain the same (demo site, js file).
Tomorrow I’ll adapt the script to deal with my tab plot and template, so I don’t have to ente the modell id by hand.
When I’m done with this I’ll maybe try to link the ResizeTools of the two plots using javascript.

Sarah thanks for your help.
Panzki

13

Today I continued working on my problem, but unfortunately I got stuck.
I was able two resize one/two plots according to the window width, by rendering the js into a template like Sarah did here. However I’m still unable to deal with my Tab (widget?). My Tab widget contains to Panel widget as children of which each contains a plot. These are the plots I want to resize, but I’m unable to get access to them (or there models?).
When I embed the Tab widget into my html I get only the model id of the tab, but I cant resize the plots with this id.

Can anyone give me a hint or provide more documentation on how I can resize the plots inside the panels of the tab widget?

demo page, js template, rendered js

-Panzki

14

I can imagine that that would be a problem.

I’m afraid my responsive PR got stuck yesterday as I was working on some testing things. But I’m working on it now which will hopefully help.

Best,

Bird

···

On Thu, Sep 17, 2015 at 6:41 AM, [email protected] wrote:

Today I continued working on my problem, but unfortunately I got stuck.
I was able two resize one/two plots according to the window width, by rendering the js into a template like Sarah did here. However I’m still unable to deal with my Tab (widget?). My Tab widget contains to Panel widget as children of which each contains a plot. These are the plots I want to resize, but I’m unable to get access to them (or there models?).
When I embed the Tab widget into my html I get only the model id of the tab, but I cant resize the plots with this id.

Can anyone give me a hint or provide more documentation on how I can resize the plots inside the panels of the tab widget?

demo page, js template, rendered js

-Panzki

–

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/e516ffb8-3c73-4579-bfd4-35e9a2fc1bdc%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

15

Hi Panzki,

thought you might want to see a video of the new responsive feature in action. To use it you just add responsive=True to your figure, chart, or Plot.

The PR is here: https://github.com/bokeh/bokeh/pull/2881

I’m hopeful that this will land in 0.10.0 which we’re having a freeze for on Saturday.

Best,

Bird

responsive-small.mov (4.37 MB)

···

On Thu, Sep 17, 2015 at 7:11 AM, Sarah Bird [email protected] wrote:

I can imagine that that would be a problem.

I’m afraid my responsive PR got stuck yesterday as I was working on some testing things. But I’m working on it now which will hopefully help.

Best,

Bird

On Thu, Sep 17, 2015 at 6:41 AM, [email protected] wrote:

Today I continued working on my problem, but unfortunately I got stuck.
I was able two resize one/two plots according to the window width, by rendering the js into a template like Sarah did here. However I’m still unable to deal with my Tab (widget?). My Tab widget contains to Panel widget as children of which each contains a plot. These are the plots I want to resize, but I’m unable to get access to them (or there models?).
When I embed the Tab widget into my html I get only the model id of the tab, but I cant resize the plots with this id.

Can anyone give me a hint or provide more documentation on how I can resize the plots inside the panels of the tab widget?

demo page, js template, rendered js

-Panzki

–

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/e516ffb8-3c73-4579-bfd4-35e9a2fc1bdc%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

16

Hey,
sorry that my answer took so long but I’m really busy this weekend.
First of all I fixed my problem with the resizing of the tap plot. Here’s my solution:

//this is the tab widget
bokeh_obj = Bokeh.index[“{{ plot_dict[‘modelid’]}}”];
for (plot_model_id in bokeh_obj.views){
//here you can access the plot models
bokeh_obj.views[plot_model_id].model.set(‘plot_width’, new_width - 40);
bokeh_obj.views[plot_model_id].model.set(‘plot_height’, new_height);
}

``

The key to get access to the plot models in the Tab widget is to access them via the views property
@Sarah:
Furthermore I downloaded your branch with the new responsive feature and build it. The example you made just works fine for, but unfortunately I did not have the time to test the new feature on my own with a custom example. However I’m looking forward to do so in the next few days.

-Panzki

···

Am Dienstag, 15. September 2015 13:36:58 UTC+2 schrieb [email protected]:

Hey everyone,
I just started using bokeh. I have two plots, each of them has it’s own ResizeTool.
I was trying to link those ResizeTools, so that if I resize one of the plots the other one is resized too. I already tried to get the ResizeTool from the first plot and add it to the tools of the secound plot, but this approached faild, (because each tool just can belong to one plot?).
Is there a way to resize both plots at once whitout using the bokeh server?

Thanks for any replies in advance
Panzki