使用Flask和Bokeh绘制实时数据

Question

我正在使用MongoDB存储传感器数据（每秒1次测量），我想使用flask和bokeh在Web浏览器中实时绘制数据。不幸的是，我对Web框架的了解不是很好。 到目前为止，我已经成功创建了一个静态图，它从数据库中读取数据（请参见下面的示例） 如何以最佳方式实时更新图形？

from flask import Flask

import datetime
from pymongo import MongoClient
from bokeh.templates import RESOURCES

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html

app = Flask(__name__)

@app.route('/')
def index():
    client = MongoClient()

    db = client.test
    sdata = db.sensordata

    output = list(sdata.find())

    temp = [x['temperature'] for x in output]

    get_time = lambda x: datetime.datetime.strptime(x['time'], '%Y-%m-%d %H:%M:%S')
    time = [get_time(x) for x in output]

    humidity = [x['humidity'] for x in output]
    plot = figure(x_axis_type = "datetime")
    plot.line(time, temp)
    plot.line(time, humidity)

    html = file_html(plot, CDN, "my plot")

    return html

if __name__=='__main__':
    app.run(host='localhost', debug=True)

编辑：

我认为使用flask-socketio的解决方案会很好，但我还不确定如何实现。要嵌入绘图，我需要使用script, div = components(plot)创建一个脚本和div(详见：http://docs.bokeh.org/en/latest/docs/user_guide/embed.html)。 因此，将脚本放在html头部，而将div放在body中。我不知道如何更新数据，因为它存储在头部的脚本文件中，而不是div中。 我的想法是使用以下代码更改div中的html：

 <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        //connect to the socket server.
        var socket = io.connect('http://' + document.domain + ':' + location.port + '/');

        socket.on('plotupdate', function(msg) {
            $('#plot').html(msg.plot);
        });

    });
</script>

但是在这种情况下，这并不起作用。

- jrsm

Answer 1

您可以使用JavaScript的setInterval和ajax调用来刷新仅包含绘图的div。将路由更改为类似于“/plotIt”的内容。以下是使用jQuery进行重复ajax调用并刷新带有id =“myPlot”属性的div的代码：

setInterval(function() {
      $.ajax({
        url: "/plotit",
        type: "GET",
        dataType: "html",
        success: function (data) {$('#myPlot').html(data);},
    });
}, 60*1000); // Repeat interval is in milliseconds

我没有测试过这段代码，但应该可以正常工作或只需要进行少量调整。

通常我不太喜欢像这样反复执行的工作，而更喜欢更基于事件的方法。具体来说，是使用事件监听器来监听新的传感器数据（在mongodb上监听），并在生成新的绘图时推送新的绘图（使用例如flask-socketio的技术）。选择适合您的任何方法。上述代码应该至少可以让您开始。

- GG_Python

---

如果答案令人满意，请接受它。您可以发布一个新问题，针对socketio/实时应用，而不是编辑此问题，以防止未来读者的混淆。 - GG_Python