2016-03-25 8 views
2

İlk web uygulamasını Flask kullanarak yapıyorum. Web uygulaması kavramı Pandalar ve Bokeh kullanarak verileri işlemek ve görselleştirmek için. Bütün bunlar nispeten düz bir şekilde ileriye dönük.Python - Flask kullanarak bir gmap_plot gömmek Bokeh ile

Şimdi, GMapPlot kullanarak New York haritası hakkında bilgi çizdiğim bir noktadayım. Ben arsa göstermek için output_file kullandığınızda beklenen sonucu alırsınız.

Ben kendi html şablonuna arsa dönmek çalıştığınızda Ancak haritası boş enter image description here

bekleniyor.

gerçek enter image description here İşte .py dosyam (dağınık kod için özür dileriz).

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) 

ve benim 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

Burada görülen sorunu görüyor olabilirsiniz: https://github.com/bokeh/bokeh/issues/3737 – Alex

cevap

0

Ben bu araçların her ikisi ile bir acemi değilim, ama yaparak çalışmak için onları koyun: kullanarak,

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) 

Sonra Şablonda Jinja2:

{{ plot|safe }} 
İlgili konular