flotというjQuery製のグラフ描画ライブラリがあるのだけど、Flaskにはjsonifyがあるので連携割と楽だろうと書いてみたら超楽だった。

from flask import Flask, request, redirect, url_for, jsonify, render_template
from database import db_session
from models import Bp
from datetime import datetime
from calendar import timegm

Debug      = True
SECRET_KEY = 'development key'

app = Flask(__name__)
app.config.from_object(__name__)

@app.after_request
def after_request(response):
    db_session.remove()
    return response

@app.route('/')
def show_graphs():
    return render_template('flot.html')


@app.route('/json')
def json_bps():
    bps = db_session.query(Bp).all()
    bpp = [[timegm(bp.date.timetuple())*1000, bp.sbp] for bp in bps]
    return jsonify(bp=bpp)

if __name__ == '__main__':
    app.run()

結局どういうJSONをどのURIにマップするかを考えるのかが重要なのかな。htmlはvisitors per day with zooming and weekendsをちょっとモディファイした。

したのほうの小さいグラフで選択するとその領域がすぐに反映される。インタラクティブなグラフがすぐ作れる