2016-03-25 27 views
2

私はFlaskを使って最初のWebアプリケーションを構築しています。 Webアプリケーションのコンセプトは、PandasとBokehを使用してデータを操作して視覚化することです。これはすべて比較的単純です。Python - Bokehを使ってFlaskにgmap_plotを埋め込む

今、私はGMapPlotを使ってニューヨークの地図に情報をプロットしています。プロットを表示するためにoutput_fileを使用すると、期待される結果が得られます。

は、私は自分のHTMLテンプレートにプロットを返すようにしようとすると、しかし、マップが空 enter image description here

を期待しました。

実際 enter image description here 私の.pyファイル(乱雑なコードのお詫び)です。

import pandas as pd 
import datetime 
from flask import render_template, request 
from web_app.app import app 
from bokeh.io import output_file, show 
from bokeh.embed import components 
from bokeh.models import (
    GMapPlot, GMapOptions, ColumnDataSource, Circle, DataRange1d, PanTool, WheelZoomTool, BoxSelectTool 
) 

@app.route('/heatmap', methods=['GET', 'POST']) 
def generate_heatmap(): 
    date1 = datetime.datetime.strptime(request.form['startFilter'],"%Y-%m-%d").date() 
    date2 = datetime.datetime.strptime(request.form['stopFilter'], "%Y-%m-%d").date() 
    date2 += datetime.timedelta(days=1) 
    date_start = str(date1) 
    date_stop = str(date2) 

    df = pd.read_csv("...", sep=",") 
    df = df.set_index(['starttime']) 
    df = df.loc[date_start:date_stop] 

    start_lats = pd.Series(df['start station latitude']).unique() 
    stop_lats = pd.Series(df['end station latitude']).unique() 
    start_long = pd.Series(df['start station longitude']).unique() 
    stop_long = pd.Series(df['end station longitude']).unique() 

    lats = start_lats.tolist() + stop_lats.tolist() 
    long = start_long.tolist() + stop_long.tolist() 

    map_options = GMapOptions(lat=40.741557, lng=-73.990467, map_type="roadmap", zoom=11) 
    plot = GMapPlot(
    x_range=DataRange1d(), y_range=DataRange1d(), map_options=map_options, title="NYC" 
    ) 
    source = ColumnDataSource(
     data=dict(
      lat=lats, 
      lon=long, 
     ) 
    ) 

    circle = Circle(x="lon", y="lat", size=8, fill_color="blue", fill_alpha=0.8, line_color=None) 
    plot.add_glyph(source, circle) 
    plot.add_tools(PanTool(), WheelZoomTool(), BoxSelectTool()) 
    output_file("gmap_plot.html") 
    show(plot) 
    script, div = components(plot) 
    return render_template('heatmap.html', script = script, div = div) 

と私のHTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Heatmap</title> 
     <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.css" type="text/css" /> 
     <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.js"></script> 
     {{ script | safe }} 
    </head> 
     <body> 
      <div class='bokeh'> 
       {{ div | safe }} 
      </div> 
     </body> 

+0

ここに表示されている問題が発生している可能性があります:https://github.com/bokeh/bokeh/issues/3737 – Alex

答えて

0

私はこれらのツールの両方を持つ初心者だけど、私がやってで動作するようにそれらを置く:

from web_app.app import app 
from flask import render_template 
from bokeh.embed import file_html 
from bokeh.plotting import figure 
from bokeh.resources import CDN 

@app.route('/example', methods=['GET']) 
def example(): 

    plot = figure() 
    plot.circle([1,2], [3,4]) 

    html = file_html(plot, CDN) 

    return render_template('whatever.html', plot=html) 

を次に、使用してJinja2テンプレート:

{{ plot|safe }} 
関連する問題