Flask + Bokeh AjaxDataSource-6ren

Flask + Bokeh AjaxDataSource

转载作者：行者123 更新时间：2023-12-03 15:26:16

25

4

挣扎于 Flask + Bokeh AjaxDataSource:

我有一个返回 json 数据的函数:

@app.route("/data", methods=['POST'])
def get_x():
    global x, y
    x = x + 0.1
    y = math.sin(x)
    return flask.jsonify(x=[x], y=[y])

我可以将它与 Bokeh AjaxDataSource 一起使用来创建流图:

source = AjaxDataSource(data_url="http://localhost:5000/data", polling_interval=1000, mode='append')
p = figure()
p.line('x', 'y', source=source)                                                                       
show(p)

但是，当我尝试将其嵌入到 flask 页面中时，AjaxDataSource 不会查询服务器。该图无法无错误地渲染。请注意，如果我使用静态绘图而不是 AjaxDataSource，它的绘图效果很好。以下是相关代码:

template = Template('''<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Streaming Example</title>
        {{ js_resources }}
        {{ css_resources }}
    </head>
    <body>
    {{ plot_div }}
    {{ plot_script }}
    </body>
</html>
''')

@app.route("/")
def simple():
    streaming=True
    source = AjaxDataSource(data_url="http://localhost:5000/data", 
                            polling_interval=1000, mode='append')

    fig = figure(title="Streaming Example")
    fig.line( 'x', 'y', source=source)

    js_resources = INLINE.render_js()
    css_resources = INLINE.render_css()

    script, div = components(fig, INLINE)

    html = template.render(
        plot_script=script,
        plot_div=div,
        js_resources=js_resources,
        css_resources=css_resources
    )

    return encode_utf8(html)

如果有人有任何想法，我将不胜感激。

布赖恩

最佳答案

像 OP 一样，我也想将 AJAX 与 Bokeh 和 Flask 一起使用。但是，不是使用 AjaxDataSource 连续从服务器流式传输数据。我只想在用户与网页上的输入交互时从服务器获取新数据。为此，我使用了 bigreddot 的 answer作为基础，更改了AjaxDataSource至ColumnDataSource并在 CustomJS 中添加了一个 jQuery AJAX 调用(以下示例是使用 Python 3.6.4、Flask 1.0.2 和 Bokeh 0.13.0 创建的):

import json

from flask import Flask, jsonify, request
from jinja2 import Template
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, CustomJS, Select
from bokeh.embed import components
from bokeh.resources import INLINE
from bokeh.layouts import column
from bokeh.util.string import encode_utf8

app = Flask(__name__)

N_DATAPOINTS = 20
DEFAULT_VARIABLE = 'bar'
MY_DATABASE = {
    'foo': [i**1 for i in range(N_DATAPOINTS)],
    'bar': [i**2 for i in range(N_DATAPOINTS)],
    'baz': [i**3 for i in range(N_DATAPOINTS)]}


@app.route("/get_new_data", methods=['POST'])
def get_new_data():
    app.logger.info(
        "Browser sent the following via AJAX: %s", json.dumps(request.form))
    variable_to_return = request.form['please_return_data_of_this_variable']
    return jsonify({variable_to_return: MY_DATABASE[variable_to_return]})


SIMPLE_HTML_TEMPLATE = Template('''
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        {{ js_resources }}
        {{ css_resources }}
    </head>
    <body>
    {{ plot_div }}
    {{ plot_script }}
    </body>
</html>
''')


@app.route("/")
def simple():
    x = range(N_DATAPOINTS)
    y = MY_DATABASE[DEFAULT_VARIABLE]

    source = ColumnDataSource(data=dict(x=x, y=y))

    plot = figure(title="Flask + JQuery AJAX in Bokeh CustomJS")
    plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
    callback = CustomJS(args=dict(source=source), code="""
    var selected_value = cb_obj.value;
    var plot_data = source.data;

    jQuery.ajax({
        type: 'POST',
        url: '/get_new_data',
        data: {"please_return_data_of_this_variable": selected_value},
        dataType: 'json',
        success: function (json_from_server) {
            // alert(JSON.stringify(json_from_server));
            plot_data.y = json_from_server[selected_value];
            source.change.emit();
        },
        error: function() {
            alert("Oh no, something went wrong. Search for an error " +
                  "message in Flask log and browser developer tools.");
        }
    });
    """)

    select = Select(title="Select variable to visualize",
                    value=DEFAULT_VARIABLE,
                    options=list(MY_DATABASE.keys()),
                    callback=callback)

    layout = column(select, plot)
    script, div = components(layout)
    html = SIMPLE_HTML_TEMPLATE.render(
        plot_script=script,
        plot_div=div,
        js_resources=INLINE.render_js(),
        css_resources=INLINE.render_css())

    return encode_utf8(html)

app.run(debug=True, host="127.0.0.1", port=5002)

关于Flask + Bokeh AjaxDataSource，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37083998/

25

4

0

文章推荐： crash - 在虚拟机中启动时 Xcode 11 beta 崩溃

文章推荐：使用 LLDB 时 Xcode 4.3 崩溃

文章推荐： flask - Flask运行的Web应用程序中的Sphinx文档

文章推荐： ruby-on-rails - rails : Why before_save on parent is called?

bokeh - 如何绘制引导线/ Bokeh ？
我用 bokeh.plotting.Figure.line 画了下面的图。我如何添加垂直引用线来强调 Feb/14 的一个点？这是另一个情节。这是 bokeh.charts.Bar。我想添加水平指南
bokeh - Bokeh 图的颜色选择器小部件
我使用 python 在 Bokeh 中创建了一个散点图。我想创建一个小部件，允许用户更改散点图中点的颜色。有没有简单的方法可以做到这一点？我找到了一个基于 JQuery 的颜色选择器小部件 ( ht
bokeh - 抑制列中 Bokeh 数据表之间的垂直空间
我有一个 bokeh 应用程序，我可以在其中读取各种文件(6 到 12 个)并生成 DataTable 来比较几个不同的变量。所以我有一个生成 DataTable 的循环，将它们添加到列表中，然后最
bokeh - 如何删除 Bokeh 中超出轴限制的空间
典型的 Bokeh 散点图可能如下所示: 其中 x 和 y 限制均为 [0,1]。如何删除轴上 0 之前并延伸到 1 之外的额外空间？这样最终图的左角为坐标 (0,0)，左上角和右下角分别为 (0,1
bokeh - 切换 Bokeh 图中的线条可见性
我正在尝试创建一个 Bokeh 图，它允许我通过单击复选框来切换图中线条的可见性。我开始尝试对复选框组使用 js 回调，但不幸的是，实际上并没有为复选框组实现 js 回调。任何人都可以提出另一种方
bokeh - 单击时如何更改 Bokeh 按钮标签？
例如，我有 button = Button(label="0", type="success") 选择此按钮后，我想将标签更改为“1”，反之亦然。有没有简单的方法来实现这一目标？编辑: RadioB
bokeh - 如何让 Bokeh 根据缩放缩放散点图大小
我团队中的一些人，包括我自己，发现在 Bokeh 散点图中使用 circle 非常令人迷惑。方法，对于图中数据的初始自动缩放拟合，我们可以为我们的数据拨入合理的大小，例如使用 plot.circle(
bokeh - 如何为 Bokeh 中的点添加标签？
所以我想做的是一个带有线条和圆圈的简单图形 http://docs.bokeh.org/en/latest/docs/quickstart.html#getting-started 但带有在鼠标悬停在
bokeh - 向 Bokeh 堆积条形图添加工具提示
考虑一个垂直堆积条形图，其中每一列都由多个条形(段)组成。是否可以在每个段上添加工具提示？目前，相同的工具提示附加到组成该列的所有段。 from bokeh.core.properties impor
bokeh - 基本 Bokeh 条形图
In[21]: from bokeh.charts import Bar, output_file, show In[22]: dict = {'sec': {u'A': 10, u'B': 20}}
bokeh - 如何在 Bokeh 中构建树形图
在 Bokeh 中实现树形图需要什么？类似于这个 DS 示例的东西会很好—— http://bl.ocks.org/robschmuecker/7880033 我只是想可视化一个数据结构，所以只需要平
bokeh - 如何在 Bokeh 中使用刻度的自定义标签？
我了解如何指定在 Bokeh 中显示的特定刻度，但我的问题是是否有一种方法可以分配特定的标签来显示与位置。例如 plot.xaxis[0].ticker=FixedTicker(ticks=[0,1]
bokeh - 有什么方法可以在 Bokeh 中创建传奇标题吗？
有什么方法可以为图例添加标题，例如左侧为当前图例，右侧为带有标题的图例。这个特殊的图例被放置在情节之外，所以我不知道是否可以用文本字形来伪造它。最佳答案从最新版本的 Bokeh (1.2) 开始，
bokeh - 异步流式传输到嵌入式 Bokeh 服务器
问题:我的 python 应用程序启动了一个 Bokeh 服务器，如本文所述: http://matthewrocklin.com/blog/work/2017/06/28/simple-bokeh-
bokeh - 如何在 Bokeh 图线上显示实际点
我正在使用 Bokeh 图制作折线图，我想标记实际的点(用线穿过它们)，而不是仅仅标记线本身。我怎样才能做到这一点？我浏览了文档和用户指南，但似乎找不到答案。谢谢! 最佳答案假设您正在使用 boke
bokeh - 如何从 Bokeh 图中提取来源？
我将一个 Bokeh Figure 实例作为输入传递给另一个函数，我需要在那里修改它的源代码。不知道该怎么做! 这就是我创建图形实例的方式: source = ColumnDataSource({'
bokeh - 设置 Bokeh 图的最大宽度
据我所知，我可以通过设置 responsive=True 来使 Bokeh 图响应 div 的宽度。然而，我感兴趣的是让 Bokeh 图只在一定程度上做出响应。有没有一种方法可以让我设置 Bokeh
bokeh - 将命令行参数传递给 Bokeh 服务器应用程序
我有一个 Bokeh 服务器应用程序。我想在命令行上传递自定义选项: bokeh serve /path/to/script.py --my-option foo 这可能吗？ Bokeh 会以某种方式
bokeh - 如何设置 Bokeh 图的初始缩放？
我有一个图，它使用来自一些原始数据的值(在 0-20 的 x/y 范围内)，以及一些导致一些相当大的 x/y 值(例如 -1000 到 1000+)的最小化数据。因此，我所做的绘图需要我手动单击缩放以
bokeh - 如何在 Bokeh 中选择图像的区域
在Web应用程序中，我想让用户使用bokeh的漂亮的框/套索选择工具来选择绘制图像中的感兴趣区域。我想接收选定的像素，以便在python中进行进一步的操作。对于散点图，这类似于gallery，很容易

首页

博学

6Ren·AI

商城

Flask + Bokeh AjaxDataSource