如何将bokeh服务器的交互性与django集成?

时间:2019-05-23 15:01:42

标签: django bokeh

我已经知道如何在Django上显示独立的散景图。我现在正在寻找的是有关如何将交互式bokeh服务器(我正在使用的示例为https://demo.bokeh.org/weather)连接到Django项目的高级说明。这里要强调的关键词是 interactive 。当我在Django页面上使用下拉菜单时,Bokeh服务器应该以交互方式响应,例如,当我运行bokeh serve --show app.py时,通常如此。

正如您在下面看到的那样,我已经将教程的大部分代码扔到了django视图中。一切都显示完美,但是没有交互发生-例如,当我选择查看Seattle的数据时,什么也没发生-因为bokeh服务器未激活或什么原因?

# all my imports up here...

def homepage(request):
    return render(request, 'pages/landing.html')

def alerts_dashboard(request):
# !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
# THE FOLLOWING CODE FROM HERE ON DOWN IS PURE COPY-PASTED FROM 
# THE BOKEH DEMO LINK ABOVE

    STATISTICS = ['record_min_temp', 'actual_min_temp', 'average_min_temp', 'average_max_temp', 'actual_max_temp', 'record_max_temp']

    def get_dataset(src, name, distribution):
        df = src[src.airport == name].copy()
        del df['airport']
        df['date'] = pd.to_datetime(df.date)
        # timedelta here instead of pd.DateOffset to avoid pandas bug < 0.18 (Pandas issue #11925)
        df['left'] = df.date - datetime.timedelta(days=0.5)
        df['right'] = df.date + datetime.timedelta(days=0.5)
        df = df.set_index(['date'])
        df.sort_index(inplace=True)
        if distribution == 'Smoothed':
            window, order = 51, 3
            for key in STATISTICS:
                df[key] = savgol_filter(df[key], window, order)

        return ColumnDataSource(data=df)

    def make_plot(source, title):
        plot = figure(x_axis_type="datetime", plot_width=800, tools="", toolbar_location=None)
        plot.title.text = title

        plot.quad(top='record_max_temp', bottom='record_min_temp', left='left', right='right',
                  color=Blues4[2], source=source, legend="Record")
        plot.quad(top='average_max_temp', bottom='average_min_temp', left='left', right='right',
                  color=Blues4[1], source=source, legend="Average")
        plot.quad(top='actual_max_temp', bottom='actual_min_temp', left='left', right='right',
                  color=Blues4[0], alpha=0.5, line_color="black", source=source, legend="Actual")

        # fixed attributes
        plot.xaxis.axis_label = None
        plot.yaxis.axis_label = "Temperature (F)"
        plot.axis.axis_label_text_font_style = "bold"
        plot.x_range = DataRange1d(range_padding=0.0)
        plot.grid.grid_line_alpha = 0.3

        return plot

    def update_plot(attrname, old, new):
        city = city_select.value
        plot.title.text = "Weather data for " + cities[city]['title']

        src = get_dataset(df, cities[city]['airport'], distribution_select.value)
        source.data.update(src.data)

    city = 'Austin'
    distribution = 'Discrete'

    cities = {
        'Austin': {
            'airport': 'AUS',
            'title': 'Austin, TX',
        },
        'Boston': {
            'airport': 'BOS',
            'title': 'Boston, MA',
        },
        'Seattle': {
            'airport': 'SEA',
            'title': 'Seattle, WA',
        }
    }

    city_select = Select(value=city, title='City: ', options=sorted(cities.keys()))
    distribution_select = Select(value=distribution, title='Distribution: ', options=['Discrete', 'Smoothed'])

    df = pd.read_csv('2015_weather.csv')
    source = get_dataset(df, cities[city]['airport'], distribution)
    plot = make_plot(source, "Weather data for " + cities[city]['title'])

    city_select.on_change('value', update_plot)
    distribution_select.on_change('value', update_plot)

    controls = column(city_select, distribution_select)

    theLayout = column(controls, plot, sizing_mode='stretch_both')

    script, div = components(theLayout)

    return render_to_response('pages/alerts_dashboard.html', {'script':script, 'linePlot': div})

基本.html

    <div class="container">

        <div class="section">

            {{ linePlot | safe }}

        </div>

    </div>

我离开了

curdoc().add_root(row(plot, controls))
curdoc().title = "Weather"

我不认为这会帮助我。

我听说过套接字和侦听器,但是老实说我不知道​​它们到底是什么。您能告诉我这是如何工作的,以及套接字/侦听器是否是正确的方法,如果可以的话,我会进行自我教育。还是我缺少一个简单的解决方法?

谢谢!

0 个答案:

没有答案
相关问题