Controlling the location of a chart directly from javascript

Kiko · January 12, 2017, 7:32am

Hi all,

I’m pretty new to bokeh and after reading the documentation and diggend in the coffeescript code and the js console I couldn’t find an answer to my question.

I can see that from python one can get the js code and the html DIV tag where the chart will be rendered using components (e.g., Embedding Bokeh content — Bokeh 2.4.2 Documentation).

Yesterday I was playing with bokehJS and Brython (http://brython.info/) and I could manage the creation of a plot but I don’t know how to control where the plot will be placed (e.g., Edit fiddle - JSFiddle - Code Playground adapted from Developing with JavaScript — Bokeh 2.4.2 Documentation). I’ve tried to use:

Bokeh.embed.add_document_standalone(doc, div);

seen here: http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models

But I was getting an error.

So, my question is,
is there something like components but in JS?,

or

is there the possibility to pass an html element id to a Bokeh.Plotting.figure in order to manage where it will be rendered the plot?

Thanks in advance.

Best.

Mateusz_Paprocki · January 12, 2017, 3:14pm

Hi,

···

On Thu, Jan 12, 2017 at 8:32 AM, Kiko correoso garcia [email protected] wrote:

Hi all,

I’m pretty new to bokeh and after reading the documentation and diggend in the coffeescript code and the js console I couldn’t find an answer to my question.

I can see that from python one can get the js code and the html DIV tag where the chart will be rendered using components (e.g., http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components).

Yesterday I was playing with bokehJS and Brython (http://brython.info/) and I could manage the creation of a plot but I don’t know how to control where the plot will be placed (e.g., https://jsfiddle.net/230v1zev/ adapted from http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#bokeh-plotting). I’ve tried to use:
Bokeh.embed.add_document_standalone(doc, div);

seen here: [http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models](http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models)

But I was getting an error.

So, my question is,
is there something like components but in JS?,

or

is there the possibility to pass an html element id to a Bokeh.Plotting.figure in order to manage where it will be rendered the plot?

there are two options, either you use the lower-level API, so add_document_standalone(), but then you have to configure a few things on your own, e.g. https://github.com/bokeh/bokeh/blob/master/bokehjs/examples/anscombe/anscombe.ts#L75 or use higher-level API as show in https://github.com/bokeh/bokeh/blob/master/bokehjs/examples/burtin/burtin.ts#L143. It’s not shown in this example (and any other for that matter), but show(plot, target) accepts an element, selector or jquery object as the second argument, which is then passed to add_document_standalone().

Mateusz

Thanks in advance.

Best.

–

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/fb6968d3-815b-4b6e-9f07-94f1bb7c2573%40continuum.io.

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

Mateusz_Paprocki · January 12, 2017, 3:15pm

Hi,

Hi all,

I'm pretty new to bokeh and after reading the documentation and diggend
in the coffeescript code and the js console I couldn't find an answer to my
question.

I can see that from python one can get the js code and the html DIV tag
where the chart will be rendered using components (e.g.,
http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components\).

Yesterday I was playing with bokehJS and Brython (http://brython.info/\)
and I could manage the creation of a plot but I don't know how to control
where the plot will be placed (e.g., Edit fiddle - JSFiddle - Code Playground
adapted from http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs\.
html#bokeh-plotting). I've tried to use:

Bokeh.embed.add_document_standalone(doc, div);

seen here: http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models

But I was getting an error.

So, my question is,
is there something like components but in JS?,

or

is there the possibility to pass an html element id to a Bokeh.Plotting.figure in order to manage where it will be rendered the plot?

there are two options, either you use the lower-level API, so

`add_document_standalone()`, but then you have to configure a few things on
your own, e.g. https://github.com/bokeh/bokeh/blob/master/bokehjs/
examples/anscombe/anscombe.ts#L75 or use higher-level API as show in
https://github.com/bokeh/bokeh/blob/master/bokehjs/
examples/burtin/burtin.ts#L143. It's not shown in this example (and any
other for that matter), but `show(plot, target)` accepts an element,
selector or jquery object as the second argument, which is then passed to
`add_document_standalone()`.

Actually

github.com

bokeh/bokeh/blob/branch-3.4/bokehjs/examples/stocks/stocks.ts#L66


      
            function new_data() {
              t += period
              const data = {
                t:      [t*1000],
                corp_a: [Math.sin(t*0.3 + 0)*2 + Math.random() + 3.0],
                corp_b: [Math.sin(t*0.5 + 1)*2 + Math.random() + 3.4],
                corp_c: [Math.sin(t*0.7 + 2)*2 + Math.random() + 3.8],
              }
              source.stream(data, 50)
            }
            setInterval(new_data, period*1000)
          
            // Create plot and attach to DOM
            const plot = make_plot("Simple stocks demo", source)
            void plt.show(plot, "#plot")
          }

shows this.

···

On Thu, Jan 12, 2017 at 4:14 PM, Mateusz Paprocki < [email protected]> wrote:

On Thu, Jan 12, 2017 at 8:32 AM, Kiko correoso garcia < > [email protected]> wrote:

Mateusz

Thanks in advance.

Best.

--
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/co
ntinuum.io/d/msgid/bokeh/fb6968d3-815b-4b6e-9f07-94f1bb7c257
3%40continuum.io
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb6968d3-815b-4b6e-9f07-94f1bb7c2573%40continuum.io?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/a/continuum.io/d/optout
.

Kiko · January 12, 2017, 3:25pm

Hi,

Hi all,

I'm pretty new to bokeh and after reading the documentation and diggend
in the coffeescript code and the js console I couldn't find an answer to my
question.

I can see that from python one can get the js code and the html DIV tag
where the chart will be rendered using components (e.g.,
http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components\).

Yesterday I was playing with bokehJS and Brython (http://brython.info/\)
and I could manage the creation of a plot but I don't know how to control
where the plot will be placed (e.g., Edit fiddle - JSFiddle - Code Playground
adapted from http://bokeh.pydata.org/en/lat
est/docs/user_guide/bokehjs.html#bokeh-plotting). I've tried to use:

Bokeh.embed.add_document_standalone(doc, div);

seen here: http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models

But I was getting an error.

So, my question is,
is there something like components but in JS?,

or

is there the possibility to pass an html element id to a Bokeh.Plotting.figure in order to manage where it will be rendered the plot?

there are two options, either you use the lower-level API, so

`add_document_standalone()`, but then you have to configure a few things on
your own, e.g. https://github.com/bokeh/bokeh
/blob/master/bokehjs/examples/anscombe/anscombe.ts#L75 or use
higher-level API as show in https://github.com/bokeh/bokeh
/blob/master/bokehjs/examples/burtin/burtin.ts#L143. It's not shown in
this example (and any other for that matter), but `show(plot, target)`
accepts an element, selector or jquery object as the second argument, which
is then passed to `add_document_standalone()`.

Actually https://github.com/bokeh/bokeh/blob/master/bokehjs/
examples/stocks/stocks.ts#L66 shows this.

Thanks it works like a charm using the selector:

I've tried to pass a brython HTML element object but it seems it doesn't
work (this is the expected I suppose...).

Thanks again.

···

2017-01-12 16:15 GMT+01:00 Mateusz Paprocki <[email protected]>:

On Thu, Jan 12, 2017 at 4:14 PM, Mateusz Paprocki < > [email protected]> wrote:

On Thu, Jan 12, 2017 at 8:32 AM, Kiko correoso garcia < >> [email protected]> wrote:

Mateusz

Thanks in advance.

Best.

--
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/co
ntinuum.io/d/msgid/bokeh/fb6968d3-815b-4b6e-9f07-94f1bb7c257
3%40continuum.io
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb6968d3-815b-4b6e-9f07-94f1bb7c2573%40continuum.io?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/a/co
ntinuum.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/CANFzp8iUODJ%3Dskd5LHyPofG803-
roPjp7CxyUUVJNp8-EjxP4A%40mail.gmail.com
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8iUODJ%3Dskd5LHyPofG803-roPjp7CxyUUVJNp8-EjxP4A%40mail.gmail.com?utm_medium=email&utm_source=footer>
.

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

Mateusz_Paprocki · January 12, 2017, 5:12pm

Hi,

···

On Thu, Jan 12, 2017 at 4:25 PM, Kiko [email protected] wrote:

are there any errors in JS console? I don’t know if brython works with native DOM elements or not. If it warps then there should be a way to get a handle on the underlying native element, as with e.g. jquery with element[0].

Mateusz

–

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/CAB-sx61YLhGyCWt%3DGde5ead%2ByvyZrDWNHyGwWr6u0RPNiwSTEQ%40mail.gmail.com.

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

2017-01-12 16:15 GMT+01:00 Mateusz Paprocki [email protected]:

Thanks it works like a charm using the selector:
https://jsfiddle.net/1c0ftk73/

I’ve tried to pass a brython HTML element object but it seems it doesn’t work (this is the expected I suppose…).

On Thu, Jan 12, 2017 at 4:14 PM, Mateusz Paprocki [email protected] wrote:

Hi,

Actually https://github.com/bokeh/bokeh/blob/master/bokehjs/examples/stocks/stocks.ts#L66 shows this.

On Thu, Jan 12, 2017 at 8:32 AM, Kiko correoso garcia [email protected] wrote:

Hi all,

I’m pretty new to bokeh and after reading the documentation and diggend in the coffeescript code and the js console I couldn’t find an answer to my question.

I can see that from python one can get the js code and the html DIV tag where the chart will be rendered using components (e.g., http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components).

Yesterday I was playing with bokehJS and Brython (http://brython.info/) and I could manage the creation of a plot but I don’t know how to control where the plot will be placed (e.g., https://jsfiddle.net/230v1zev/ adapted from http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#bokeh-plotting). I’ve tried to use:
Bokeh.embed.add_document_standalone(doc, div);

seen here: [http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models](http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models)

But I was getting an error.

So, my question is,
is there something like components but in JS?,

or

is there the possibility to pass an html element id to a Bokeh.Plotting.figure in order to manage where it will be rendered the plot?

there are two options, either you use the lower-level API, so add_document_standalone(), but then you have to configure a few things on your own, e.g. https://github.com/bokeh/bokeh/blob/master/bokehjs/examples/anscombe/anscombe.ts#L75 or use higher-level API as show in https://github.com/bokeh/bokeh/blob/master/bokehjs/examples/burtin/burtin.ts#L143. It’s not shown in this example (and any other for that matter), but show(plot, target) accepts an element, selector or jquery object as the second argument, which is then passed to add_document_standalone().

Thanks again.

–

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/CANFzp8iUODJ%3Dskd5LHyPofG803-roPjp7CxyUUVJNp8-EjxP4A%40mail.gmail.com.

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

Mateusz

Thanks in advance.

Best.

–

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/fb6968d3-815b-4b6e-9f07-94f1bb7c2573%40continuum.io.

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

Kiko · January 13, 2017, 9:35am

Hi,

2017-01-12 16:15 GMT+01:00 Mateusz Paprocki <
[email protected]>:

Hi,

Hi all,

I'm pretty new to bokeh and after reading the documentation and
diggend in the coffeescript code and the js console I couldn't find an
answer to my question.

I can see that from python one can get the js code and the html DIV
tag where the chart will be rendered using components (e.g.,
http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html
#components).

Yesterday I was playing with bokehJS and Brython (http://brython.info/\)
and I could manage the creation of a plot but I don't know how to control
where the plot will be placed (e.g., Edit fiddle - JSFiddle - Code Playground
adapted from http://bokeh.pydata.org/en/lat
est/docs/user_guide/bokehjs.html#bokeh-plotting). I've tried to use:

Bokeh.embed.add_document_standalone(doc, div);

seen here: http://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#low-level-models

But I was getting an error.

So, my question is,
is there something like components but in JS?,

or

is there the possibility to pass an html element id to a Bokeh.Plotting.figure in order to manage where it will be rendered the plot?

there are two options, either you use the lower-level API, so

`add_document_standalone()`, but then you have to configure a few things on
your own, e.g. https://github.com/bokeh/bokeh
/blob/master/bokehjs/examples/anscombe/anscombe.ts#L75 or use
higher-level API as show in https://github.com/bokeh/bokeh
/blob/master/bokehjs/examples/burtin/burtin.ts#L143. It's not shown in
this example (and any other for that matter), but `show(plot, target)`
accepts an element, selector or jquery object as the second argument, which
is then passed to `add_document_standalone()`.

Actually https://github.com/bokeh/bokeh/blob/master/bokehjs/examples/
stocks/stocks.ts#L66 shows this.

Thanks it works like a charm using the selector:
Edit fiddle - JSFiddle - Code Playground

I've tried to pass a brython HTML element object but it seems it doesn't
work (this is the expected I suppose...).

are there any errors in JS console? I don't know if brython works with
native DOM elements or not. If it warps then there should be a way to get a
handle on the underlying native element, as with e.g. jquery with
element[0].

Thanks for your responses.

Yes, brython wraps the HTML element so it is not really native.

This is the error I get (only the blue stuff is relevant, using this
example Edit fiddle - JSFiddle - Code Playground (just the last two lines are
different from previous examples) you can see the error in your js console
on your browser):

I think this is related with JQuery but I don't know the internals of
bokehJS.

UPDATE.......

Ok, while I was writting the email I've tested some stuff and I make it
work using the elt attribute of the brython wrapped object. Working example
here: Edit fiddle - JSFiddle - Code Playground (check just the two last lines as the
rest is similar to previous examples).

Thanks again for the hard work!!!

Have a good weekend.

···

2017-01-12 18:12 GMT+01:00 Mateusz Paprocki <[email protected]>:

On Thu, Jan 12, 2017 at 4:25 PM, Kiko <[email protected]> wrote:

On Thu, Jan 12, 2017 at 4:14 PM, Mateusz Paprocki < >>> [email protected]> wrote:

On Thu, Jan 12, 2017 at 8:32 AM, Kiko correoso garcia < >>>> [email protected]> wrote:

Mateusz

Thanks again.

Mateusz

Thanks in advance.

Best.

--
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/fb696
8d3-815b-4b6e-9f07-94f1bb7c2573%40continuum.io
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb6968d3-815b-4b6e-9f07-94f1bb7c2573%40continuum.io?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/a/co
ntinuum.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/co
ntinuum.io/d/msgid/bokeh/CANFzp8iUODJ%3Dskd5LHyPofG803-roPjp
7CxyUUVJNp8-EjxP4A%40mail.gmail.com
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8iUODJ%3Dskd5LHyPofG803-roPjp7CxyUUVJNp8-EjxP4A%40mail.gmail.com?utm_medium=email&utm_source=footer>
.

For more options, visit https://groups.google.com/a/co
ntinuum.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/co
ntinuum.io/d/msgid/bokeh/CAB-sx61YLhGyCWt%3DGde5ead%2ByvyZr
DWNHyGwWr6u0RPNiwSTEQ%40mail.gmail.com
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAB-sx61YLhGyCWt%3DGde5ead%2ByvyZrDWNHyGwWr6u0RPNiwSTEQ%40mail.gmail.com?utm_medium=email&utm_source=footer>
.

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/CANFzp8juxwLken4y%
3DyqFXcHFrTDvaX4XLvAhwiz4aZKSAYq%3DqA%40mail.gmail.com
<https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8juxwLken4y%3DyqFXcHFrTDvaX4XLvAhwiz4aZKSAYq%3DqA%40mail.gmail.com?utm_medium=email&utm_source=footer>
.

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