FlaskとHighcharts 3.0でグラフを描く

Published on:

FaskからJSON形式でブラウザに送り、Highcharts 3.0でグラフとして表示するサンプルです。

作業メモなので、気が向いたら補足説明を入れるかも。。

例によって参考は下記です。

フォルダ構成とその中身は下記の通りです。

  • HTML

    <!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code..com/highcharts.js"></script>
    <script>
     $(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('/data.json', function(data) {
        options.series[0] = data;
        var chart = new Highcharts.Chart(options);
    });
});
    </script>
</head>
<body>
<h1>{{ title }}</h1>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

  • Pythonファイル

    # -*- coding: utf-8 -*-
from flask import Flask, jsonify
import random
from flask.templating import render_template

app = Flask(__name__)


@app.route('/data.json')
def data():
    list = []
    for i in range(1000):
        list.append([i, random.randint(0, 500)])
    return jsonify(data=list)


@app.route('/')
def index():
    return render_template("graph.html", title=u"グラフテスト")


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