Two questions regarding "time constraining slider" & "window rescaling"

Andrew_Joros · June 4, 2015, 11:06pm

Hi all, first post here,

Two questions:

Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: https://www.google.com/finance?q=NASDAQ:GOOG ?
Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

Sarah_Bird3 · June 5, 2015, 5:29am

Hi,

There is a DateRangeSlider, but I think it might be broken - https://github.com/bokeh/bokeh/issues/2268
I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8

The bit that does the resizing is:

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_width’, plot_width);
Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_height’, plot_height);

But there’s one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the “modelid.” This, to my understanding, is not automatically spit out of bokeh’s embed commands.

So I manually extracted this and passed it to my html which has the above JS in it.

self.modelid = plot_object.ref[“id”]

So it’s possible, and it’s not too much work if you’re already building web pages. But if you’re just looking for this to work in the output of output_file or something similar, then I’m afraid that doesn’t work right now. (As I said, I’m def going to do a PR for this).

Best,

Bird

···

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros [email protected] wrote:

Hi all, first post here,

Two questions:

Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: https://www.google.com/finance?q=NASDAQ:GOOG ?

Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

–

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/f74b6eee-be2d-4295-8d88-697115c1748a%40continuum.io.

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

Bryan · June 5, 2015, 2:13pm

Can’t you just configure the callback with the plot, so it’s available in the js code? (On phone can write more later)

Bryan

···

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros [email protected] wrote:

Hi all, first post here,

Two questions:

Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: https://www.google.com/finance?q=NASDAQ:GOOG ?

Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

–

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/f74b6eee-be2d-4295-8d88-697115c1748a%40continuum.io.

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

Sarah_Bird3 · June 5, 2015, 6:26pm

Hi Bryan,

That sounds REALLY useful, but I’m not understanding, can you clarify.

Cheers,

Bird

···

On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven [email protected] wrote:

Can’t you just configure the callback with the plot, so it’s available in the js code? (On phone can write more later)

Bryan

On Jun 5, 2015, at 00:29, Sarah Bird [email protected] wrote:

Hi,

There is a DateRangeSlider, but I think it might be broken - https://github.com/bokeh/bokeh/issues/2268

I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8

The bit that does the resizing is:

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_width’, plot_width);
Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_height’, plot_height);

But there’s one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the “modelid.” This, to my understanding, is not automatically spit out of bokeh’s embed commands.

So I manually extracted this and passed it to my html which has the above JS in it.

self.modelid = plot_object.ref[“id”]

So it’s possible, and it’s not too much work if you’re already building web pages. But if you’re just looking for this to work in the output of output_file or something similar, then I’m afraid that doesn’t work right now. (As I said, I’m def going to do a PR for this).

Best,

Bird

–

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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com.

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/54C223A3-6A43-489D-A54E-27B2A8AA6681%40continuum.io.

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

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros [email protected] wrote:

Hi all, first post here,

Two questions:

Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: https://www.google.com/finance?q=NASDAQ:GOOG ?

Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

–

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/f74b6eee-be2d-4295-8d88-697115c1748a%40continuum.io.

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

Bryan · June 5, 2015, 8:15pm

Sarah, the "args" properties of callbacks is a dict that you can populate with objects easily on the python side, to make available to the JS snippet automagically. Precisely to avoid having to try and root around in JS to find the right object:

For instance in the example from the user guide:

    s1.callback = Callback(args=dict(s2=s2), code="""
        var inds = cb_obj.get('selected')['1d'].indices;
        var d1 = cb_obj.get('data');
        var d2 = s2.get('data');
        d2['x'] =
        d2['y'] =
        for (i = 0; i < inds.length; i++) {
            d2['x'].push(d1['x'][inds[i]])
            d2['y'].push(d1['y'][inds[i]])
        }
        s2.trigger('change');
    """)

The data source "s2" is available to the JS code because it was passed in the "args" property from the python side. You could just as easily pass the plot itself in the args dict too.

Bryan

···

On Jun 5, 2015, at 1:26 PM, Sarah Bird <[email protected]> wrote:

Hi Bryan,

That sounds REALLY useful, but I'm not understanding, can you clarify.

Cheers,

Bird

On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven <[email protected]> wrote:
Can't you just configure the callback with the plot, so it's available in the js code? (On phone can write more later)

Bryan

On Jun 5, 2015, at 00:29, Sarah Bird <[email protected]> wrote:

Hi,

1) There is a DateRangeSlider, but I think it might be broken - DateRangeSlider not rendering · Issue #2268 · bokeh/bokeh · GitHub

2) I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8

The bit that does the resizing is:

Bokeh.index["{{ figure.modelid }}"].model.set('plot_width', plot_width);
Bokeh.index["{{ figure.modelid }}"].model.set('plot_height', plot_height);

But there's one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the "modelid." This, to my understanding, is not automatically spit out of bokeh's embed commands.

So I manually extracted this and passed it to my html which has the above JS in it.

self.modelid = plot_object.ref["id"]

So it's possible, and it's not too much work if you're already building web pages. But if you're just looking for this to work in the output of output_file or something similar, then I'm afraid that doesn't work right now. (As I said, I'm def going to do a PR for this).

Best,

Bird

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros <[email protected]> wrote:
Hi all, first post here,

Two questions:
• Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: https://www.google.com/finance?q=NASDAQ:GOOG ?
• Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

--
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/f74b6eee-be2d-4295-8d88-697115c1748a%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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com\.
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/54C223A3-6A43-489D-A54E-27B2A8AA6681%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/CA%2BEr%2BdScG3NAOg3jnCYrHvmkXnRSYEKXpTPc8EQbw6n6QRL1Dg%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Sarah_Bird3 · June 5, 2015, 8:51pm

I can see a nugget of something here, but resize is a window event:

$(window).resize(resize_figures);

I can see how what you’re suggesting works, but it feels wierd to me to add a page element just to act as the intermediary between the window resize event and the plot…but maybe I’m missing something…and don’t you still have the challenge of identifying the widget by id?

···

On Fri, Jun 5, 2015 at 10:15 PM, Bryan Van de Ven [email protected] wrote:

Sarah, the “args” properties of callbacks is a dict that you can populate with objects easily on the python side, to make available to the JS snippet automagically. Precisely to avoid having to try and root around in JS to find the right object:

For instance in the example from the user guide:
s1.callback = Callback(args=dict(s2=s2), code="""

    var inds = cb_obj.get('selected')['1d'].indices;

    var d1 = cb_obj.get('data');

    var d2 = s2.get('data');

    d2['x'] = []

    d2['y'] = []

    for (i = 0; i < inds.length; i++) {

        d2['x'].push(d1['x'][inds[i]])

        d2['y'].push(d1['y'][inds[i]])

    }

    s2.trigger('change');

""")
The data source “s2” is available to the JS code because it was passed in the “args” property from the python side. You could just as easily pass the plot itself in the args dict too.

Bryan

On Jun 5, 2015, at 1:26 PM, Sarah Bird [email protected] wrote:

Hi Bryan,

That sounds REALLY useful, but I’m not understanding, can you clarify.

Cheers,

Bird

On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven [email protected] wrote:

Can’t you just configure the callback with the plot, so it’s available in the js code? (On phone can write more later)

Bryan

On Jun 5, 2015, at 00:29, Sarah Bird [email protected] wrote:

Hi,

There is a DateRangeSlider, but I think it might be broken - https://github.com/bokeh/bokeh/issues/2268

I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8

The bit that does the resizing is:

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_width’, plot_width);

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_height’, plot_height);

But there’s one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the “modelid.” This, to my understanding, is not automatically spit out of bokeh’s embed commands.

So I manually extracted this and passed it to my html which has the above JS in it.

self.modelid = plot_object.ref[“id”]

So it’s possible, and it’s not too much work if you’re already building web pages. But if you’re just looking for this to work in the output of output_file or something similar, then I’m afraid that doesn’t work right now. (As I said, I’m def going to do a PR for this).

Best,

Bird

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros [email protected] wrote:

Hi all, first post here,

Two questions:
 • Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: [https://www.google.com/finance?q=NASDAQ:GOOG](https://www.google.com/finance?q=NASDAQ:GOOG) ?
 • Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

–

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/f74b6eee-be2d-4295-8d88-697115c1748a%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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com.

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/54C223A3-6A43-489D-A54E-27B2A8AA6681%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/CA%2BEr%2BdScG3NAOg3jnCYrHvmkXnRSYEKXpTPc8EQbw6n6QRL1Dg%40mail.gmail.com.

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/EEDDE047-E263-485A-A1CB-A84B9A4F68B8%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Bryan · June 5, 2015, 8:58pm

I think we are talking past each other somehow. The widget that triggers an event is passed unconditionally to the callback as "cb_obj" but if you need to configure the callback with multiple widgets (so you don't have to dig for them in JS) you can just pass those as args too. The sliders example does this, it passes all the sliders in so they can be used easily. The resize thing is unrelated to what I thought the question was, though it occurs to me that being able to specify and configure a callback on resize events would probably be pretty useful.

Bryan

···

On Jun 5, 2015, at 3:51 PM, Sarah Bird <[email protected]> wrote:

I can see a nugget of something here, but resize is a window event:

$(window).resize(resize_figures);

I can see how what you're suggesting works, but it feels wierd to me to add a page element just to act as the intermediary between the window resize event and the plot.....but maybe I'm missing something....and don't you still have the challenge of identifying the widget by id?

On Fri, Jun 5, 2015 at 10:15 PM, Bryan Van de Ven <[email protected]> wrote:
Sarah, the "args" properties of callbacks is a dict that you can populate with objects easily on the python side, to make available to the JS snippet automagically. Precisely to avoid having to try and root around in JS to find the right object:

For instance in the example from the user guide:

    s1.callback = Callback(args=dict(s2=s2), code="""
        var inds = cb_obj.get('selected')['1d'].indices;
        var d1 = cb_obj.get('data');
        var d2 = s2.get('data');
        d2['x'] =
        d2['y'] =
        for (i = 0; i < inds.length; i++) {
            d2['x'].push(d1['x'][inds[i]])
            d2['y'].push(d1['y'][inds[i]])
        }
        s2.trigger('change');
    """)

The data source "s2" is available to the JS code because it was passed in the "args" property from the python side. You could just as easily pass the plot itself in the args dict too.

Bryan

> On Jun 5, 2015, at 1:26 PM, Sarah Bird <[email protected]> wrote:
>
> Hi Bryan,
>
> That sounds REALLY useful, but I'm not understanding, can you clarify.
>
> Cheers,
>
> Bird
>
> On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven <[email protected]> wrote:
> Can't you just configure the callback with the plot, so it's available in the js code? (On phone can write more later)
>
> Bryan
>
> On Jun 5, 2015, at 00:29, Sarah Bird <[email protected]> wrote:
>
>> Hi,
>>
>> 1) There is a DateRangeSlider, but I think it might be broken - DateRangeSlider not rendering · Issue #2268 · bokeh/bokeh · GitHub
>>
>> 2) I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8
>>
>> The bit that does the resizing is:
>>
>> Bokeh.index["{{ figure.modelid }}"].model.set('plot_width', plot_width);
>> Bokeh.index["{{ figure.modelid }}"].model.set('plot_height', plot_height);
>>
>> But there's one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the "modelid." This, to my understanding, is not automatically spit out of bokeh's embed commands.
>>
>> So I manually extracted this and passed it to my html which has the above JS in it.
>>
>> self.modelid = plot_object.ref["id"]
>>
>> So it's possible, and it's not too much work if you're already building web pages. But if you're just looking for this to work in the output of output_file or something similar, then I'm afraid that doesn't work right now. (As I said, I'm def going to do a PR for this).
>>
>> Best,
>>
>> Bird
>>
>>
>>
>> On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros <[email protected]> wrote:
>> Hi all, first post here,
>>
>> Two questions:
>> • Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: https://www.google.com/finance?q=NASDAQ:GOOG ?
>> • Is it possible to have the width of the figure automatically rescale as the browser window rescales?
>> Thanks!
>>
>> aj
>>
>> --
>> 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/f74b6eee-be2d-4295-8d88-697115c1748a%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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com\.
>> 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/54C223A3-6A43-489D-A54E-27B2A8AA6681%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/CA%2BEr%2BdScG3NAOg3jnCYrHvmkXnRSYEKXpTPc8EQbw6n6QRL1Dg%40mail.gmail.com\.
> 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/EEDDE047-E263-485A-A1CB-A84B9A4F68B8%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/CA%2BEr%2BdTcRyB8iTx2E3fe--yt%3DJgKLUQHKgG4onNeo-QEqBCWuA%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Sarah_Bird3 · June 5, 2015, 9:05pm

“I think we are talking past each other somehow.” - definitely…I’m a little confused

I don’t understand why there would be a widget on the page at all (which would hold the callback you’re refering too).

My understanding of the question is: when you make your browser window smaller or larger the plot resizes to fit it.

···

On Fri, Jun 5, 2015 at 10:58 PM, Bryan Van de Ven [email protected] wrote:

I think we are talking past each other somehow. The widget that triggers an event is passed unconditionally to the callback as “cb_obj” but if you need to configure the callback with multiple widgets (so you don’t have to dig for them in JS) you can just pass those as args too. The sliders example does this, it passes all the sliders in so they can be used easily. The resize thing is unrelated to what I thought the question was, though it occurs to me that being able to specify and configure a callback on resize events would probably be pretty useful.

Bryan

On Jun 5, 2015, at 3:51 PM, Sarah Bird [email protected] wrote:

I can see a nugget of something here, but resize is a window event:

$(window).resize(resize_figures);

I can see how what you’re suggesting works, but it feels wierd to me to add a page element just to act as the intermediary between the window resize event and the plot…but maybe I’m missing something…and don’t you still have the challenge of identifying the widget by id?

On Fri, Jun 5, 2015 at 10:15 PM, Bryan Van de Ven [email protected] wrote:

Sarah, the “args” properties of callbacks is a dict that you can populate with objects easily on the python side, to make available to the JS snippet automagically. Precisely to avoid having to try and root around in JS to find the right object:

For instance in the example from the user guide:
s1.callback = Callback(args=dict(s2=s2), code="""
    var inds = cb_obj.get('selected')['1d'].indices;
    var d1 = cb_obj.get('data');
    var d2 = s2.get('data');
    d2['x'] = []
    d2['y'] = []
    for (i = 0; i < inds.length; i++) {
        d2['x'].push(d1['x'][inds[i]])
        d2['y'].push(d1['y'][inds[i]])
    }
    s2.trigger('change');
""")
The data source “s2” is available to the JS code because it was passed in the “args” property from the python side. You could just as easily pass the plot itself in the args dict too.

Bryan

On Jun 5, 2015, at 1:26 PM, Sarah Bird [email protected] wrote:

Hi Bryan,

That sounds REALLY useful, but I’m not understanding, can you clarify.

Cheers,

Bird

On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven [email protected] wrote:

Can’t you just configure the callback with the plot, so it’s available in the js code? (On phone can write more later)

Bryan

On Jun 5, 2015, at 00:29, Sarah Bird [email protected] wrote:

Hi,

There is a DateRangeSlider, but I think it might be broken - https://github.com/bokeh/bokeh/issues/2268

I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8

The bit that does the resizing is:

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_width’, plot_width);

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_height’, plot_height);

But there’s one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the “modelid.” This, to my understanding, is not automatically spit out of bokeh’s embed commands.

So I manually extracted this and passed it to my html which has the above JS in it.

self.modelid = plot_object.ref[“id”]

So it’s possible, and it’s not too much work if you’re already building web pages. But if you’re just looking for this to work in the output of output_file or something similar, then I’m afraid that doesn’t work right now. (As I said, I’m def going to do a PR for this).

Best,

Bird

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros [email protected] wrote:

Hi all, first post here,

Two questions:
 • Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: [https://www.google.com/finance?q=NASDAQ:GOOG](https://www.google.com/finance?q=NASDAQ:GOOG) ?
 • Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

–

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/f74b6eee-be2d-4295-8d88-697115c1748a%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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com.

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/54C223A3-6A43-489D-A54E-27B2A8AA6681%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/CA%2BEr%2BdScG3NAOg3jnCYrHvmkXnRSYEKXpTPc8EQbw6n6QRL1Dg%40mail.gmail.com.

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/EEDDE047-E263-485A-A1CB-A84B9A4F68B8%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/CA%2BEr%2BdTcRyB8iTx2E3fe–yt%3DJgKLUQHKgG4onNeo-QEqBCWuA%40mail.gmail.com.

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/3D14689B-8811-477E-ACB0-9E60F5465C78%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Bryan · June 5, 2015, 9:43pm

Sarah,

I saw the part about a "time slider" and also a part about "hard to look up objects" and those two together was what I was responding to. But now I see the "hard to look up objects" was in reference to the resize, not the "time slider". That said, I think adding a "resize callback" would be an entirely good thing.

Bryan

···

On Jun 5, 2015, at 4:05 PM, Sarah Bird <[email protected]> wrote:

"I think we are talking past each other somehow." - definitely....I'm a little confused

I don't understand why there would be a widget on the page at all (which would hold the callback you're refering too).

My understanding of the question is: when you make your browser window smaller or larger the plot resizes to fit it.

On Fri, Jun 5, 2015 at 10:58 PM, Bryan Van de Ven <[email protected]> wrote:
I think we are talking past each other somehow. The widget that triggers an event is passed unconditionally to the callback as "cb_obj" but if you need to configure the callback with multiple widgets (so you don't have to dig for them in JS) you can just pass those as args too. The sliders example does this, it passes all the sliders in so they can be used easily. The resize thing is unrelated to what I thought the question was, though it occurs to me that being able to specify and configure a callback on resize events would probably be pretty useful.

Bryan

> On Jun 5, 2015, at 3:51 PM, Sarah Bird <[email protected]> wrote:
>
> I can see a nugget of something here, but resize is a window event:
>
> $(window).resize(resize_figures);
>
> I can see how what you're suggesting works, but it feels wierd to me to add a page element just to act as the intermediary between the window resize event and the plot.....but maybe I'm missing something....and don't you still have the challenge of identifying the widget by id?
>
>
> On Fri, Jun 5, 2015 at 10:15 PM, Bryan Van de Ven <[email protected]> wrote:
> Sarah, the "args" properties of callbacks is a dict that you can populate with objects easily on the python side, to make available to the JS snippet automagically. Precisely to avoid having to try and root around in JS to find the right object:
>
> For instance in the example from the user guide:
>
> s1.callback = Callback(args=dict(s2=s2), code="""
> var inds = cb_obj.get('selected')['1d'].indices;
> var d1 = cb_obj.get('data');
> var d2 = s2.get('data');
> d2['x'] =
> d2['y'] =
> for (i = 0; i < inds.length; i++) {
> d2['x'].push(d1['x'][inds[i]])
> d2['y'].push(d1['y'][inds[i]])
> }
> s2.trigger('change');
> """)
>
> The data source "s2" is available to the JS code because it was passed in the "args" property from the python side. You could just as easily pass the plot itself in the args dict too.
>
> Bryan
>
> > On Jun 5, 2015, at 1:26 PM, Sarah Bird <[email protected]> wrote:
> >
> > Hi Bryan,
> >
> > That sounds REALLY useful, but I'm not understanding, can you clarify.
> >
> > Cheers,
> >
> > Bird
> >
> > On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven <[email protected]> wrote:
> > Can't you just configure the callback with the plot, so it's available in the js code? (On phone can write more later)
> >
> > Bryan
> >
> > On Jun 5, 2015, at 00:29, Sarah Bird <[email protected]> wrote:
> >
> >> Hi,
> >>
> >> 1) There is a DateRangeSlider, but I think it might be broken - DateRangeSlider not rendering · Issue #2268 · bokeh/bokeh · GitHub
> >>
> >> 2) I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8
> >>
> >> The bit that does the resizing is:
> >>
> >> Bokeh.index["{{ figure.modelid }}"].model.set('plot_width', plot_width);
> >> Bokeh.index["{{ figure.modelid }}"].model.set('plot_height', plot_height);
> >>
> >> But there's one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the "modelid." This, to my understanding, is not automatically spit out of bokeh's embed commands.
> >>
> >> So I manually extracted this and passed it to my html which has the above JS in it.
> >>
> >> self.modelid = plot_object.ref["id"]
> >>
> >> So it's possible, and it's not too much work if you're already building web pages. But if you're just looking for this to work in the output of output_file or something similar, then I'm afraid that doesn't work right now. (As I said, I'm def going to do a PR for this).
> >>
> >> Best,
> >>
> >> Bird
> >>
> >>
> >>
> >> On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros <[email protected]> wrote:
> >> Hi all, first post here,
> >>
> >> Two questions:
> >> • Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: https://www.google.com/finance?q=NASDAQ:GOOG ?
> >> • Is it possible to have the width of the figure automatically rescale as the browser window rescales?
> >> Thanks!
> >>
> >> aj
> >>
> >> --
> >> 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/f74b6eee-be2d-4295-8d88-697115c1748a%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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com\.
> >> 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/54C223A3-6A43-489D-A54E-27B2A8AA6681%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/CA%2BEr%2BdScG3NAOg3jnCYrHvmkXnRSYEKXpTPc8EQbw6n6QRL1Dg%40mail.gmail.com\.
> > 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/EEDDE047-E263-485A-A1CB-A84B9A4F68B8%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/CA%2BEr%2BdTcRyB8iTx2E3fe--yt%3DJgKLUQHKgG4onNeo-QEqBCWuA%40mail.gmail.com\.
> 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/3D14689B-8811-477E-ACB0-9E60F5465C78%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/CA%2BEr%2BdTWTUHgF84J%2BLKFBzYrvdR_gzqBJhMZ-ixF3BVJE_je%2Bw%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Sarah_Bird3 · June 5, 2015, 9:45pm

Hah! Confusion averted.

“resize callback” - yes - responsive in general is on my to do list - callback seems like it would be really useful part of that.

···

On Fri, Jun 5, 2015 at 11:43 PM, Bryan Van de Ven [email protected] wrote:

Sarah,

I saw the part about a “time slider” and also a part about “hard to look up objects” and those two together was what I was responding to. But now I see the “hard to look up objects” was in reference to the resize, not the “time slider”. That said, I think adding a “resize callback” would be an entirely good thing.

Bryan

On Jun 5, 2015, at 4:05 PM, Sarah Bird [email protected] wrote:

“I think we are talking past each other somehow.” - definitely…I’m a little confused

I don’t understand why there would be a widget on the page at all (which would hold the callback you’re refering too).

My understanding of the question is: when you make your browser window smaller or larger the plot resizes to fit it.

On Fri, Jun 5, 2015 at 10:58 PM, Bryan Van de Ven [email protected] wrote:

I think we are talking past each other somehow. The widget that triggers an event is passed unconditionally to the callback as “cb_obj” but if you need to configure the callback with multiple widgets (so you don’t have to dig for them in JS) you can just pass those as args too. The sliders example does this, it passes all the sliders in so they can be used easily. The resize thing is unrelated to what I thought the question was, though it occurs to me that being able to specify and configure a callback on resize events would probably be pretty useful.

Bryan

On Jun 5, 2015, at 3:51 PM, Sarah Bird [email protected] wrote:

I can see a nugget of something here, but resize is a window event:

$(window).resize(resize_figures);

I can see how what you’re suggesting works, but it feels wierd to me to add a page element just to act as the intermediary between the window resize event and the plot…but maybe I’m missing something…and don’t you still have the challenge of identifying the widget by id?

On Fri, Jun 5, 2015 at 10:15 PM, Bryan Van de Ven [email protected] wrote:

Sarah, the “args” properties of callbacks is a dict that you can populate with objects easily on the python side, to make available to the JS snippet automagically. Precisely to avoid having to try and root around in JS to find the right object:

For instance in the example from the user guide:
s1.callback = Callback(args=dict(s2=s2), code="""
    var inds = cb_obj.get('selected')['1d'].indices;
    var d1 = cb_obj.get('data');
    var d2 = s2.get('data');
    d2['x'] = []
    d2['y'] = []
    for (i = 0; i < inds.length; i++) {
        d2['x'].push(d1['x'][inds[i]])
        d2['y'].push(d1['y'][inds[i]])
    }
    s2.trigger('change');
""")
The data source “s2” is available to the JS code because it was passed in the “args” property from the python side. You could just as easily pass the plot itself in the args dict too.

Bryan

On Jun 5, 2015, at 1:26 PM, Sarah Bird [email protected] wrote:

Hi Bryan,

That sounds REALLY useful, but I’m not understanding, can you clarify.

Cheers,

Bird

On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven [email protected] wrote:

Can’t you just configure the callback with the plot, so it’s available in the js code? (On phone can write more later)

Bryan

On Jun 5, 2015, at 00:29, Sarah Bird [email protected] wrote:

Hi,

There is a DateRangeSlider, but I think it might be broken - https://github.com/bokeh/bokeh/issues/2268

I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8

The bit that does the resizing is:

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_width’, plot_width);

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_height’, plot_height);

But there’s one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the “modelid.” This, to my understanding, is not automatically spit out of bokeh’s embed commands.

So I manually extracted this and passed it to my html which has the above JS in it.

self.modelid = plot_object.ref[“id”]

So it’s possible, and it’s not too much work if you’re already building web pages. But if you’re just looking for this to work in the output of output_file or something similar, then I’m afraid that doesn’t work right now. (As I said, I’m def going to do a PR for this).

Best,

Bird

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros [email protected] wrote:

Hi all, first post here,

Two questions:
 • Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: [https://www.google.com/finance?q=NASDAQ:GOOG](https://www.google.com/finance?q=NASDAQ:GOOG) ?
 • Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

–

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/f74b6eee-be2d-4295-8d88-697115c1748a%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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com.

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/54C223A3-6A43-489D-A54E-27B2A8AA6681%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/CA%2BEr%2BdScG3NAOg3jnCYrHvmkXnRSYEKXpTPc8EQbw6n6QRL1Dg%40mail.gmail.com.

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/EEDDE047-E263-485A-A1CB-A84B9A4F68B8%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/CA%2BEr%2BdTcRyB8iTx2E3fe–yt%3DJgKLUQHKgG4onNeo-QEqBCWuA%40mail.gmail.com.

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/3D14689B-8811-477E-ACB0-9E60F5465C78%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/CA%2BEr%2BdTWTUHgF84J%2BLKFBzYrvdR_gzqBJhMZ-ixF3BVJE_je%2Bw%40mail.gmail.com.

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/85777EC2-A644-46BE-AD3F-3B3F95DB727E%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Fabio_Pliger · June 6, 2015, 9:29am

+1 on reusing the power of the callbacks around (there are really many places we can hook it!!). I was planning to add a few new ones this but unfortunately I didn’t have the time

···

On Fri, Jun 5, 2015 at 11:43 PM, Bryan Van de Ven [email protected] wrote:

Sarah,

I saw the part about a “time slider” and also a part about “hard to look up objects” and those two together was what I was responding to. But now I see the “hard to look up objects” was in reference to the resize, not the “time slider”. That said, I think adding a “resize callback” would be an entirely good thing.

Bryan

On Jun 5, 2015, at 4:05 PM, Sarah Bird [email protected] wrote:

“I think we are talking past each other somehow.” - definitely…I’m a little confused

I don’t understand why there would be a widget on the page at all (which would hold the callback you’re refering too).

My understanding of the question is: when you make your browser window smaller or larger the plot resizes to fit it.

On Fri, Jun 5, 2015 at 10:58 PM, Bryan Van de Ven [email protected] wrote:

I think we are talking past each other somehow. The widget that triggers an event is passed unconditionally to the callback as “cb_obj” but if you need to configure the callback with multiple widgets (so you don’t have to dig for them in JS) you can just pass those as args too. The sliders example does this, it passes all the sliders in so they can be used easily. The resize thing is unrelated to what I thought the question was, though it occurs to me that being able to specify and configure a callback on resize events would probably be pretty useful.

Bryan

On Jun 5, 2015, at 3:51 PM, Sarah Bird [email protected] wrote:

I can see a nugget of something here, but resize is a window event:

$(window).resize(resize_figures);

I can see how what you’re suggesting works, but it feels wierd to me to add a page element just to act as the intermediary between the window resize event and the plot…but maybe I’m missing something…and don’t you still have the challenge of identifying the widget by id?

On Fri, Jun 5, 2015 at 10:15 PM, Bryan Van de Ven [email protected] wrote:

Sarah, the “args” properties of callbacks is a dict that you can populate with objects easily on the python side, to make available to the JS snippet automagically. Precisely to avoid having to try and root around in JS to find the right object:

For instance in the example from the user guide:
s1.callback = Callback(args=dict(s2=s2), code="""
    var inds = cb_obj.get('selected')['1d'].indices;
    var d1 = cb_obj.get('data');
    var d2 = s2.get('data');
    d2['x'] = []
    d2['y'] = []
    for (i = 0; i < inds.length; i++) {
        d2['x'].push(d1['x'][inds[i]])
        d2['y'].push(d1['y'][inds[i]])
    }
    s2.trigger('change');
""")
The data source “s2” is available to the JS code because it was passed in the “args” property from the python side. You could just as easily pass the plot itself in the args dict too.

Bryan

On Jun 5, 2015, at 1:26 PM, Sarah Bird [email protected] wrote:

Hi Bryan,

That sounds REALLY useful, but I’m not understanding, can you clarify.

Cheers,

Bird

On Fri, Jun 5, 2015 at 4:13 PM, Bryan Van de Ven [email protected] wrote:

Can’t you just configure the callback with the plot, so it’s available in the js code? (On phone can write more later)

Bryan

On Jun 5, 2015, at 00:29, Sarah Bird [email protected] wrote:

Hi,

There is a DateRangeSlider, but I think it might be broken - https://github.com/bokeh/bokeh/issues/2268

I have implemented re-sizing manually, and am planning to submit a PR so this can be included in Bokeh. The javascript resize code is trivial: https://github.com/birdsarah/pycon_2015_bokeh_talk/blob/master/washmap/main/templates/main/snippets/embed_resize.js#L8

The bit that does the resizing is:

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_width’, plot_width);

Bokeh.index[“{{ figure.modelid }}”].model.set(‘plot_height’, plot_height);

But there’s one tricky bit: we use Bokeh.index to look up our actual Bokeh plot object which we can then resize. To do this we need the “modelid.” This, to my understanding, is not automatically spit out of bokeh’s embed commands.

So I manually extracted this and passed it to my html which has the above JS in it.

self.modelid = plot_object.ref[“id”]

So it’s possible, and it’s not too much work if you’re already building web pages. But if you’re just looking for this to work in the output of output_file or something similar, then I’m afraid that doesn’t work right now. (As I said, I’m def going to do a PR for this).

Best,

Bird

On Fri, Jun 5, 2015 at 1:06 AM, Andrew Joros [email protected] wrote:

Hi all, first post here,

Two questions:
 • Is it possible to create a plot with a time constraining slider bar similar to that seen at google finance: [https://www.google.com/finance?q=NASDAQ:GOOG](https://www.google.com/finance?q=NASDAQ:GOOG) ?
 • Is it possible to have the width of the figure automatically rescale as the browser window rescales?
Thanks!

aj

–

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/f74b6eee-be2d-4295-8d88-697115c1748a%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/CA%2BEr%2BdS8Rq2wW219CZLMBPn%2BcPCha5ExaykctgHv0jL%3DA84qEg%40mail.gmail.com.

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/54C223A3-6A43-489D-A54E-27B2A8AA6681%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/CA%2BEr%2BdScG3NAOg3jnCYrHvmkXnRSYEKXpTPc8EQbw6n6QRL1Dg%40mail.gmail.com.

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/EEDDE047-E263-485A-A1CB-A84B9A4F68B8%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/CA%2BEr%2BdTcRyB8iTx2E3fe–yt%3DJgKLUQHKgG4onNeo-QEqBCWuA%40mail.gmail.com.

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/3D14689B-8811-477E-ACB0-9E60F5465C78%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/CA%2BEr%2BdTWTUHgF84J%2BLKFBzYrvdR_gzqBJhMZ-ixF3BVJE_je%2Bw%40mail.gmail.com.

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/85777EC2-A644-46BE-AD3F-3B3F95DB727E%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.