1

I am running a flask script that calls a bokeh graph generator to create a script and four divs on load.

plots = {'temperature': t.get_plot(), 'humidity': h.get_plot(), 'light': 
l.get_plot(), 'combined': c.get_plot()}
    script, divs = components(plots)
    return script, divs['temperature'], divs['humidity'], divs['light'], 
divs['combined']

and rendering template in start_app.py

@app.route('/')
def index():
    script, temperature, humidity, light, combined = 
serial_ops.create_graphs()
    return render_template("index.html", script=script, 
temperature=temperature, humidity=humidity, light=light, combined=combined)

and I am rendering it to a template that looks like this.

{% extends "bootstrap/base.html" %}
{% block title %}RPI Flask Test{% endblock %}
{% block scripts %}
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.5.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>

{% endblock %}

{% block content %}
{{ script|safe }}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div id="temperature">
                {{ temperature|safe }}
            </div>
        </div>
       ... etcetera ...

There is some info about Bokeh embedding here, including examples of what the script / div may look like. http://docs.bokeh.org/en/latest/docs/user_guide/embed.html

I looked at a few examples and tutorials online, but I couldn't figure out how to update these scripts and divs without refreshing the page. Most examples use id=#x. I figure there are some other ways I could do it with iframes, but I'd prefer to try an AJAX solution before that. Currently I am not using Bokeh-Server as there are no interactions, and a slow refresh rate.

Thanks

bigreddot
  • 33,642
  • 5
  • 69
  • 122
atol ikan
  • 90
  • 8
  • 1
    Check out this question: [Flask + Bokeh AjaxDataSource](http://stackoverflow.com/q/37083998/5524090) – tuomastik May 13 '17 at 05:25
  • @tuomastik if I am not mistaken, this question refers to Bokeh-server, which I am not using as there are no interactions, and a slow refresh rate. – atol ikan May 13 '17 at 06:50
  • 1
    The question that I linked (and its answers by me and @bigreddot) is not referring to Bokeh-server. – tuomastik May 13 '17 at 07:00
  • @tuomastik OK, well I apologise in advance, but would you mind providing some additional assistance. AJAX and the like are not really my area. I tried running both of the examples in that thread, and a third one (https://github.com/bokeh/bokeh/blob/master/examples/howto/ajax_source.py) but none of them worked out of the box for me and I just cannot understand what is going on... What is an AjaxDataSource (not very well explained in docs)? What is the "server" the OP is querying? I am having trouble figuring out "what part does what" and how I can co-opt it. Sorry and thanks in advance – atol ikan May 13 '17 at 11:03
  • 1
    The server is Flask's built-in server, which sends Bokeh plot's HTML & JavaScript code to user's browser. The sent JavaScript code contains code for requesting new data from the server via Ajax method. AjaxDataSource is an abstraction for a data that is continuously streamed from the server every `polling_interval` milliseconds. My answer uses ColumnDataSource and does AJAX request via jQuery library (defined in `CustomJS` within Flask code) to request new data only when user asks for it. – tuomastik May 15 '17 at 11:36
  • 1
    I just updated the example code in my answer to work with the latest versions of Python, Flask and Bokeh. You could try running and investigating it to gain better understanding of each component. – tuomastik May 15 '17 at 12:22

0 Answers0