Urgently need a working example for dynamically adding plots

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.

  2. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.

  3. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

···

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

···

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Here you go:

from bokeh.io import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

···

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

···

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

I’ll give this a run through later today Eugene, thanks again for the help!

···

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

···

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});
···

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

···

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

···

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

···

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Did you use the same data source?
As per http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html#linked-brushing :“Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers.”

Eugene

···

On Monday, September 25, 2017 at 11:38:16 PM UTC+7, Allan wrote:

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Well I was just working off your example, no data has been loaded with ColumnDataSource, perhaps that is the issue?

···

On Monday, 25 September 2017 09:41:17 UTC-7, Eugene Pakhomov wrote:

Did you use the same data source?
As per http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html#linked-brushing :“Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers.”

Eugene

On Monday, September 25, 2017 at 11:38:16 PM UTC+7, Allan wrote:

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

That’s the issue indeed. My example just showed that adding plots is possible without Bokeh Server.

Eugene

···

On Monday, September 25, 2017 at 11:45:52 PM UTC+7, Allan wrote:

Well I was just working off your example, no data has been loaded with ColumnDataSource, perhaps that is the issue?

On Monday, 25 September 2017 09:41:17 UTC-7, Eugene Pakhomov wrote:

Did you use the same data source?
As per http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html#linked-brushing :“Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers.”

Eugene

On Monday, September 25, 2017 at 11:38:16 PM UTC+7, Allan wrote:

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Eugene,

I’m working with this right now, however the add button isn’t working, I’m not sure why.

from bokeh.io import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS, ColumnDataSource
from bokeh.layouts import column

``

x = [1, 2, 3]
y = [3, 2, 1]
source = ColumnDataSource(data=dict(x=x, y=y))
f1 = figure(tools=“pan, wheel_zoom, box_zoom, box_select, reset”)
f1.circle(‘x’, ‘y’, source=source)
main_row = column(f1)

b = Button(label=‘Add plot’,
callback=CustomJS(args=dict(main_row=main_row, source=source),
code="""
f = Bokeh.Plotting.figure({tools: “reset, pan, wheel_zoom, box_zoom, box_select”});
//f.cross({x: [1, 2, 3], y: [3, 2, 1]});
f.circle(‘x’, ‘y’, source=source)
main_row.children.push(f);
main_row.properties.children.change.emit();
“”"))

main_row.children.append(b)

output_file(‘add_plots2.html’)
curstate().file[‘resources’].js_components.append(‘bokeh-api’)
show(main_row)

``

···

On Monday, 25 September 2017 09:49:45 UTC-7, Eugene Pakhomov wrote:

That’s the issue indeed. My example just showed that adding plots is possible without Bokeh Server.

Eugene

On Monday, September 25, 2017 at 11:45:52 PM UTC+7, Allan wrote:

Well I was just working off your example, no data has been loaded with ColumnDataSource, perhaps that is the issue?

On Monday, 25 September 2017 09:41:17 UTC-7, Eugene Pakhomov wrote:

Did you use the same data source?
As per http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html#linked-brushing :“Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers.”

Eugene

On Monday, September 25, 2017 at 11:38:16 PM UTC+7, Allan wrote:

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

The line where you create a circle glyph should instead be:

f.circle({x: { field: 'x' }, y: { field: 'y' }, source: source})

Please read the links I provided and also this one: https://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html.

Otherwise, there will be a lot of questions that could easily be avoided.

Eugene

···

On Tuesday, September 26, 2017 at 12:48:18 AM UTC+7, Allan wrote:

Eugene,

I’m working with this right now, however the add button isn’t working, I’m not sure why.

from bokeh.io import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS, ColumnDataSource
from bokeh.layouts import column

``

x = [1, 2, 3]
y = [3, 2, 1]
source = ColumnDataSource(data=dict(x=x, y=y))
f1 = figure(tools=“pan, wheel_zoom, box_zoom, box_select, reset”)
f1.circle(‘x’, ‘y’, source=source)
main_row = column(f1)

b = Button(label=‘Add plot’,
callback=CustomJS(args=dict(main_row=main_row, source=source),
code="""
f = Bokeh.Plotting.figure({tools: “reset, pan, wheel_zoom, box_zoom, box_select”});
//f.cross({x: [1, 2, 3], y: [3, 2, 1]});
f.circle(‘x’, ‘y’, source=source)
main_row.children.push(f);
main_row.properties.children.change.emit();
“”"))

main_row.children.append(b)

output_file(‘add_plots2.html’)
curstate().file[‘resources’].js_components.append(‘bokeh-api’)
show(main_row)

``

On Monday, 25 September 2017 09:49:45 UTC-7, Eugene Pakhomov wrote:

That’s the issue indeed. My example just showed that adding plots is possible without Bokeh Server.

Eugene

On Monday, September 25, 2017 at 11:45:52 PM UTC+7, Allan wrote:

Well I was just working off your example, no data has been loaded with ColumnDataSource, perhaps that is the issue?

On Monday, 25 September 2017 09:41:17 UTC-7, Eugene Pakhomov wrote:

Did you use the same data source?
As per http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html#linked-brushing :“Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers.”

Eugene

On Monday, September 25, 2017 at 11:38:16 PM UTC+7, Allan wrote:

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

Eugene, I had read more deeply after I posted and solved it, my apologies for poor questions. I showed my examples to the group supervisor and he’s keen on working with Bokeh. I had asked this question here before but received no response, maybe you’ll know something about it if you don’t mind helping me again.

I have a plot. Under this plot I’m required to show a histogram related to the data in the plot. This histogram should have two vertical lines, one at each end. I should then have the ability to scroll either line towards the other in an effort to constrain data or brush it, and thus brushing on the plot above it. I’m not sure if these vertical lines on the histogram are possible, I’m sure a vertical slider would make him happy as well. Do you know if my goal is possible?

···

On Monday, 25 September 2017 11:06:42 UTC-7, Eugene Pakhomov wrote:

The line where you create a circle glyph should instead be:

f.circle({x: { field: 'x' }, y: { field: 'y' }, source: source})

Please read the links I provided and also this one: https://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html.

Otherwise, there will be a lot of questions that could easily be avoided.

Eugene

On Tuesday, September 26, 2017 at 12:48:18 AM UTC+7, Allan wrote:

Eugene,

I’m working with this right now, however the add button isn’t working, I’m not sure why.

from bokeh.io import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS, ColumnDataSource
from bokeh.layouts import column

``

x = [1, 2, 3]
y = [3, 2, 1]
source = ColumnDataSource(data=dict(x=x, y=y))
f1 = figure(tools=“pan, wheel_zoom, box_zoom, box_select, reset”)
f1.circle(‘x’, ‘y’, source=source)
main_row = column(f1)

b = Button(label=‘Add plot’,
callback=CustomJS(args=dict(main_row=main_row, source=source),
code="""
f = Bokeh.Plotting.figure({tools: “reset, pan, wheel_zoom, box_zoom, box_select”});
//f.cross({x: [1, 2, 3], y: [3, 2, 1]});
f.circle(‘x’, ‘y’, source=source)
main_row.children.push(f);
main_row.properties.children.change.emit();
“”"))

main_row.children.append(b)

output_file(‘add_plots2.html’)
curstate().file[‘resources’].js_components.append(‘bokeh-api’)
show(main_row)

``

On Monday, 25 September 2017 09:49:45 UTC-7, Eugene Pakhomov wrote:

That’s the issue indeed. My example just showed that adding plots is possible without Bokeh Server.

Eugene

On Monday, September 25, 2017 at 11:45:52 PM UTC+7, Allan wrote:

Well I was just working off your example, no data has been loaded with ColumnDataSource, perhaps that is the issue?

On Monday, 25 September 2017 09:41:17 UTC-7, Eugene Pakhomov wrote:

Did you use the same data source?
As per http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html#linked-brushing :“Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers.”

Eugene

On Monday, September 25, 2017 at 11:38:16 PM UTC+7, Allan wrote:

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!

I think something similar was described here: https://github.com/bokeh/bokeh/issues/3441
So yeah, it should be possible.

···

On Tuesday, September 26, 2017 at 3:39:37 AM UTC+7, Allan wrote:

Eugene, I had read more deeply after I posted and solved it, my apologies for poor questions. I showed my examples to the group supervisor and he’s keen on working with Bokeh. I had asked this question here before but received no response, maybe you’ll know something about it if you don’t mind helping me again.

I have a plot. Under this plot I’m required to show a histogram related to the data in the plot. This histogram should have two vertical lines, one at each end. I should then have the ability to scroll either line towards the other in an effort to constrain data or brush it, and thus brushing on the plot above it. I’m not sure if these vertical lines on the histogram are possible, I’m sure a vertical slider would make him happy as well. Do you know if my goal is possible?

On Monday, 25 September 2017 11:06:42 UTC-7, Eugene Pakhomov wrote:

The line where you create a circle glyph should instead be:

f.circle({x: { field: 'x' }, y: { field: 'y' }, source: source})

Please read the links I provided and also this one: https://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html.

Otherwise, there will be a lot of questions that could easily be avoided.

Eugene

On Tuesday, September 26, 2017 at 12:48:18 AM UTC+7, Allan wrote:

Eugene,

I’m working with this right now, however the add button isn’t working, I’m not sure why.

from bokeh.io import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS, ColumnDataSource
from bokeh.layouts import column

``

x = [1, 2, 3]
y = [3, 2, 1]
source = ColumnDataSource(data=dict(x=x, y=y))
f1 = figure(tools=“pan, wheel_zoom, box_zoom, box_select, reset”)
f1.circle(‘x’, ‘y’, source=source)
main_row = column(f1)

b = Button(label=‘Add plot’,
callback=CustomJS(args=dict(main_row=main_row, source=source),
code="""
f = Bokeh.Plotting.figure({tools: “reset, pan, wheel_zoom, box_zoom, box_select”});
//f.cross({x: [1, 2, 3], y: [3, 2, 1]});
f.circle(‘x’, ‘y’, source=source)
main_row.children.push(f);
main_row.properties.children.change.emit();
“”"))

main_row.children.append(b)

output_file(‘add_plots2.html’)
curstate().file[‘resources’].js_components.append(‘bokeh-api’)
show(main_row)

``

On Monday, 25 September 2017 09:49:45 UTC-7, Eugene Pakhomov wrote:

That’s the issue indeed. My example just showed that adding plots is possible without Bokeh Server.

Eugene

On Monday, September 25, 2017 at 11:45:52 PM UTC+7, Allan wrote:

Well I was just working off your example, no data has been loaded with ColumnDataSource, perhaps that is the issue?

On Monday, 25 September 2017 09:41:17 UTC-7, Eugene Pakhomov wrote:

Did you use the same data source?
As per http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html#linked-brushing :“Linked brushing in Bokeh is expressed by sharing data sources between glyph renderers.”

Eugene

On Monday, September 25, 2017 at 11:38:16 PM UTC+7, Allan wrote:

Eugene, I assumed that because we are adding the plots to the same row/layout, that brushing and linking would work, however when i brush (use box_select) on one of the plots, the others do not update. Can you give me any information on why this is?

On Sunday, 24 September 2017 20:36:11 UTC-7, Eugene Pakhomov wrote:

If all data is already loaded, just use ColumnDataSource and add it to args of the CustomJS. This page has all relevant examples: https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
If you want to load the data on a press of the button, then you have to use Bokeh Server.

Eugene

On Monday, September 25, 2017 at 2:05:45 AM UTC+7, Allan wrote:

One last thing! (hopefully)

I load my data with python scripts, if I’m using that callbackJS how can I use variables from the python code in that? Is there a replace syntax such as {{}}?

On Sunday, 24 September 2017 11:36:28 UTC-7, Eugene Pakhomov wrote:

It’s very much like you do it in Python. Just replace the string that creates a figure “f” with this:

f = Bokeh.Plotting.figure({tools: "pan,wheel_zoom,box_zoom"});

On Monday, September 25, 2017 at 1:31:50 AM UTC+7, Allan wrote:

Hey Eugene, I tried adding tools, but was unable to specify it to the figure object, where else would I supply tools?

On Sunday, 24 September 2017 07:57:44 UTC-7, Eugene Pakhomov wrote:

Ah, see that cheeky “main_row = column(f1)”? That’s because using “row” for some reason still laid out elements in a column, although a different one. Maybe I missed something, maybe there’s some bug - I don’t know.

On Sunday, September 24, 2017 at 9:55:58 PM UTC+7, Eugene Pakhomov wrote:

Here you go:

from [bokeh.io](http://bokeh.io) import show, output_file, curstate
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from bokeh.layouts import column

f1 = figure()
f1.x(x=[1, 2, 3], y=[3, 2, 1])
main_row = column(f1)

b = Button(label='Add plot',
           callback=CustomJS(args=dict(main_row=main_row),
                             code="""
    f = Bokeh.Plotting.figure();
    f.cross({x: [1, 2, 3], y: [3, 2, 1]});
    main_row.children.push(f);
    main_row.properties.children.change.emit();
"""))

main_row.children.append(b)

output_file('bokeh_add_plot_no_server.html')
curstate().file['resources'].js_components.append('bokeh-api')
show(main_row)

Eugene

On Sunday, September 24, 2017 at 9:05:45 PM UTC+7, Allan wrote:

Do you perhaps have any example code to demonstrate doing this, without the server?

Allan

On Saturday, 23 September 2017 22:23:20 UTC-7, Eugene Pakhomov wrote:

Hi,

First of all, I did not test whether it can be done with Bokeh server at this point. I think I saw some Github issues related to the dynamic addition of plots, but I may be wrong.

But if it’s possible, it should be possible without a server since plots themselves are created by BokehJS. The server just tells it how to create stuff. And components() just create all necessary JS code to initialize data and plots.

But I’d argue that having a Bokeh server, especially if you might need server callbacks, is worth trying. It’s not hard, and I find it much more pleasant than writing stuff directly in JS.

Regards,

Eugene

On Sunday, September 24, 2017 at 9:13:54 AM UTC+7, Allan wrote:

Hello,

I’m working hard to use Bokeh for a project I’m currently working on. I’ve looked around for examples of dynamically adding plots, but can’t seem to get any explanation/code that works for me. I have a page, with many options etc, and I want to press a button that will add a plot to the current layout of plots (Brushing and Linking is a huge thing here). So I’m wondering a couple things:

  1. Can this be done without the bokeh server? If so, please can you provide very simple code or point of reference for me to accomplish this without the server.
  1. Call backs etc aren’t important as of now, which made me wonder if the server is even necessary in this case.
  1. Right now I’m using components() to get the script/div to embed plots on my page, but I would like it to be more dynamic and be able to add plots with a click.

Thanks for any help you can provide!