How to modify figure via ajax in flask + bokeh server

Community Support
1

Hello everyone,

I am currently working on a flask app + bokeh server. I have a bokeh_plot.py file where a bokeh’s figure is created and a separate flask file - app.py. I am wondering if I can modify the figure via custom ajax call, for example to change the color of the plot by clicking on a button. I don not how to access source which is in bokeh_plot.py from app.py. Ideally, I would prefer to merge bokeh_plot.py and app.py but I do not know how to deal with bokeh server. Here is my sample code:

bokeh_plot.py (bokeh serve --allow-websocket-origin=127.0.0.1:5000 bokeh_plot.py)

from bokeh.io import curdoc
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure

x = [1, 2, 3]

source = ColumnDataSource(data=dict(x=[1, 2, 3],
y=[1, 2, 3],
color=[‘red’] * len(x)))

fig = figure(plot_width=900, plot_height=300)
fig.circle(“x”, “y”, color=“color”, source=source,)

curdoc().add_root(fig)

``

app.py:

from flask import render_template, Flask, request, jsonify, url_for
from bokeh.embed import autoload_server
from bokeh.client import pull_session

app = Flask(name)

@app.route(’/’)
def index():
session = pull_session(app_path=’/bokeh_plot’)
script = autoload_server(None, app_path="/bokeh_plot",
session_id=session.id)
return render_template(“home.html”, script=script)

@app.route(’/color’, methods=[“POST”, “GET”])
def change_color():
color = request.json[‘color’]
# Need to access source in bokeh_plot to change the color
return jsonify(ok=“ok”)

if name == ‘main’:
app.run(debug=True)

``

main.js:

$(document).ready(function(){

$("#green").on('click', function(){
$.ajax({
    type: "POST",
    url: "/color",
        contentType: 'application/json; charset=UTF-8',
         data: JSON.stringify({'color': "green"}),
         dataType: 'json',
    success: function(data){
    console.log(data.ok);
    },
    error: function(){
    console.log(error);
    }
})
});

})

``

home.html:

<!doctype html>

Flask Bokeh

Welcome to Flask and Bokeh

{{script | safe }}

Green

</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Enter code here...

``

Any suggestions on how to solve this problem are highly appreciated.

Thanks for your time,
Vitali

···