Urgently need a working example for dynamically adding plots

Community Support
4

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!